HOME >コーディング>lazySizesでウェブページの画像を遅延表示させる

lazySizesでウェブページの画像を遅延表示させる

以前にこのブログでポートフォリオページを作ったものの、モバイル表示を意識するとデータサイズや表示速度が気になって画像点数はそんなに多く置けませんでした。なので今回は画像を遅延表示させる「lazySizes」というjQuery不要のスクリプトを導入し、表示速度の改善を試してみました。

lazySizesで参考にしたサイト

lazySizesを導入しGTmetrixで評価測定してみると・・・

画像の多い下記のポートフォリオページを「GTmetrix」を利用して測定してみました。(MacのChromeブラウザで測定)

私の年賀状ページ

http://design03.net/portfolio-illust-16040601/

Performance Scores

  • PageSpeed Score : A(90%) → B(89%)
  • Slow Score : B(87%) → B(86%)

Page Details

  • Page Load Time : 2.3s → 1.7s – 2.5s
  • Total Page Size : 1.5MB → 213KB
  • Requests : 34 → 22

私のDTPデザインページ

http://design03.net/portfolio-print-16040601/

Performance Scores

  • PageSpeed Score : D(65%) → B(88%)
  • YSlow Score : B(87%) → B(86%)

Page Details

  • Page Load Time : 2.8s → 1.9s – 2.9s
  • Total Page Size : 1.48MB → 308KB
  • Requests : 34 → 22

測定結果について

  • PageSpeed Score はページによって評価が上がったり、下がったり。
  • YSlow Score は両ページで評価が下がる。
  • Page Load Time はどちらのページも測定する度に変化。他の項目は変化なし。
  • Total Page Size と Requests は劇的に下がる。

遅延表示の対応すると全ての評価が上がるのかなと思ったら意外とそうでもなかったです。あとPage Load Time は測定するたびに早かったり遅かったりすのであまり参考にできませんでした。

本来はここから評価を下げている部分を突き詰めていくのですが、時間がかかりそうなので今回は Total Page Size と Requests が大きく下がったので良しとしました。

他の対応メモ

  • 全ての画像を遅延表示すると google PageSpeed Insights の評価で「表示可能コンテンツの優先順位を決定する」との修正の考慮項目が表示。3点ほど減点となったのでファーストビューに含まれる画像は遅延表示を非対応に。
  • WordPress での利用だったので functions.php に「wp_enqueue_script」を利用してjsファイルを読み込み指定。スクリプトの読み込み位置は最初 $in_footer を false にしてヘッダー部分で読み込んでいましたが google PageSpeed Insights でレンダリングをブロックしていると注意を受けたので true にしてフッター部分へ移動。
  • 指定画像の class が「lazy load」→「lazy loading」→「lazy loaded」と変化するので css でのコントロールができて便利。

表示速度の評価サイトいろいろ

他の遅延表示スクリプト

lazySizeを導入した後に見つけたライブラリ。こちらもjQueryに依存しないみたいなので機会があれば試してみたいです。