プログラミング雑記

【コスパ順】webサイトの表示高速化 - PageSpeed Insights対応

goke

個人開発から世界を変えるようなプロダクトづくりを目指しています

目次
  1. はじめに
  2. 「レンダリングを妨げるリソースの除外」への対応
  3. 「次世代フォーマットでの画像の配信」への対応
  4. 最後に

はじめに

webサイトを制作する上でまず1番に気にしなければならないのはコンテンツそれ自体ですが、コンテンツが良いにも関わらずサイトでの体験が悪いから離脱されてしまうなんてことがあるととても勿体無いです。
特に、コンテンツが充実すればするほどサイト全体の表示速度は遅くなる傾向にあるので表示速度には気を向けたいところです。

PageSpeed Insightsを使うとサイトの表示速度や表示速度向上につながるヒントを教えてくれます。
基本的には速度向上の妨げになっている率が高いものから対応していけば良いのですが、具体的にどう対応したら良いかわからないヒントもあるので、この記事では僕が知る限りコスパが良い順に対応する方法を紹介します。

「レンダリングを妨げるリソースの除外」への対応

Google Fonts

この項目にはさまざまな要素がありますが、引っかかる要素の1つに「Google FontsをCDNから読み込んでいるケース」が挙げられます。コレに関してはサクッと修正できるので下記に方法を示します。
ただし、表示速度を上げるベストな方法はフォントを読み込まないことです。特に日本語のフォントは読み込みに時間がかかるので、スピード重視の場合は極力使わない方がいいです。

Google Fontsを利用するにはCDNからリソースを読み込む方法と、フォント自体を自分のサーバーにUPして読み込む方法とがあります。後者にするとパフォーマンスが向上します。

まずは必要なGoogle Fontsをダウンロードしてきます。例えば僕がよく使うのはNoto Sansなので、Google Fontsの右上の「Download Family」でダウンロードしてきます。

Zipでいくつかのファイルが入っているので、必要なファイルを自分のサーバーにアップします。

どれが必要かわからないときは全部アップしてしまえば良いですが、読み込むフォントは最小限にすべきです。
ちなみによく使うのは「-Regular」と「-Bold」です。

あとは、Google FontsをCDNから読み込む代わりにCSSで読み込みます。

@font-face {
  font-family:'Noto Sans JP';
  src: url('/vender/font/NotoSansJP-Bold.otf') format('opentype');
  src: url('/vender/font/NotoSansJP-Regular.otf') format('opentype');
  font-display:swap;
}   
body{
  font-family:'Noto Sans JP', sans-serif;
}

上記の中で忘れずに記載したいのが「font-display:swap;」の部分です。
これは「@font-face」の中に書きます。
これがあるとフォントを読み込むまでに時間がかかる場合に代わりのフォントを表示してくれます。
formatの部分はフォントの種類によって下記のように書き分けます。

書き方拡張子
format(‘woff‘).woff
format(‘truetype’).ttf
format(‘opentype‘).otf
format(‘embedded-opentype‘).eot
format(‘svg‘).svg / .svgz

下記のように読み込んでいた記載は削除しましょう。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

これで完了です。

「次世代フォーマットでの画像の配信」への対応

サイトに画像を利用している場合、PNGやJPEGなどのフォーマットよりもWebpなどのフォーマットを利用した方がファイルサイズが小さくて（劣化を抑えつつも）読み込みが早くなる、という指摘です。

これに対しては単純に画像ファイルを置き換えれば良いだけなのですが、これにはいくつか問題があります。

  1. Webpをどうやって手に入れるか
  2. 既存の画像を置き換えるのが大変

まず、1に関しては画像のフォーマットをオンラインで変換してくれるサービスはいくつかあります。
それらを使うのもありですが、PHPでも簡単に実施できます。
例えばJPEGからWebpに変換するには下記のようにすれば良いです。

<?php
$jpeg_path = "/img/image.jpeg"; /*どのjpegファイルを*/
$webp_path = "/img/image.webp"; /*どこにwebpで保存する*/
$jpg = imagecreatefromjpeg($jpeg_path); /*jpegファイルを読み込む*/
$webp = imagewebp($jpg, $webp_path); /*webpで保存*/
imagedestroy($jpg); /*読み込んだjpegを解放*/

たったこれだけでjpegからwebpに変換できます。PNGの場合はjpegの部分をPNGにするだけです。

<?php
$png_path = "/img/image.png"; /*どのpngファイルを*/
$webp_path = "/img/image.webp"; /*どこにwebpで保存する*/
$png = imagecreatefrompng($png_path); /*pngファイルを読み込む*/
$webp = imagewebp($png, $webp_path); /*webpで保存*/
imagedestroy($png); /*読み込んだpngを解放*/

これができれば、既存のファイルもDBからパスを読み込んできてループで変換して置き換えるなどの対応で2もクリアできます。

最後に

gokeでは上記のようなプログラムを駆使して新しいサービスを制作しています。気になることなどがあればコメントまたはTwitterでご連絡ください。

  • この記事を書いた人

goke

個人開発から世界を変えるようなプロダクトづくりを目指しています

-プログラミング雑記