高速化のカギ、LCPの改善方法まとめ
ここ最近、PageSpeed Insightsの指標のひとつであるLCPについて色々と勉強していたので、調べて分かったことをまとめておきます。どなたかの参考になれば幸いです。
そもそもLCPって？
LCPというのは、Largest Contentful Paint（最大コンテンツの描画）のことです。
Search Consoleヘルプのウェブに関する主な指標レポートでは、「ユーザーがURLをリクエストしてから、ビューポートに表示される最大のコンテンツ要素がレンダリングされるまでの時間」と定義されています。
うーん、よく分からないですね…
これは要するに、Webサイトが読み込まれる時に一番大きな要素（ヘッダーの画像とか）が表示されるまでの時間のことを意味しています。
LCPの値が大きいとその分読み込みに時間がかかっているということなので、出来る限り小さく抑えたいです。サーチコンソールの指標では、以下のような基準が設けられています。
| 良好 | 改善が必要 | 低速 |
|---|---|---|
| 2.5秒以下 | 4秒以下 | 4秒を超える |
なので、2.5秒以下で画面内にページ全体が表示されていればOK！ということですね。
ちなみに当ブログのLCPは、モバイルでだいたい2.0秒前後です。
LCPに関わる要素
表示速度はデータの生成・転送・描画という3つのプロセスから決定されており、LCPの低下要因としては主に以下の3つが挙げられます。
- サーバーの応答時間
- CSS/JavaScriptによるレンダリングブロック
- リソースの読み込み速度
サーバーの応答時間に関しては、通信の早いサーバーを選んだり、キャッシュの有効期限（TTL）を伸ばしたりして配信を最適化することで改善が見込めます。
Bloggerの場合、画像のキャッシュはパラメータを設定することで簡単に有効期限を変更することができます（-e○○という指定を追加するだけ）。この件に関して「水の中にはサメがいる！」さんが詳しく解説されているので、詳細は以下の記事をご覧ください。
CSS/JavaScriptによるレンダリングブロック（読み込み阻害）の問題は、コードの最小化や圧縮、不要なCSS/JavaScriptの削除、スクリプトの非同期読み込みなどで解消することができます。
圧縮・軽量化はこちらのラッコツールズさんのツールが便利です↓
JavaScript / Css 圧縮・軽量化（Minify）
ということで、以降では3つ目のリソースの読み込みをメインに見ていきます。
読み込み最適化方法
Webページの要素の中でも画像などはファイルサイズが大きくなりやすく、読み込み速度低下に繋がってしまいます。ここでは、そうした要素の読み込み最適化に関してご紹介します。
① 画像の最適化
まず、画像をギリギリまで圧縮してファイルサイズを減らしましょう。大きい画像は縮小するだけでもかなりファイルサイズを抑えることができます。
Windowsであれば、「ペイント」→「サイズ変更」で簡単にサイズ変更可能です。
実際、こちらの画像は元サイズが2.6MBありますが、サイズを幅500pxまで縮小すると…
この通り、96KBまで小さくなります。単純計算すると、ファイルサイズは元画像の約3.6%です。
画像を縮小してもまだファイルサイズが大きいという場合は、TinyJPGで画像を圧縮しましょう。名前はTinyJPGですが、PNG画像も圧縮できます。
画像の種類によっては劣化が目立つことがありますが、ほとんどは違和感のない範囲で圧縮してくれます。
② プリロード
linkタグでは、rel="preload"と指定することで画像などをプリロード（事前読み込み）させることができます。以下のような形です。
<link rel="preload" as="image" href="img.jpg"/>
事前読み込みさせることで対象の要素が優先的に読み込まれるようになり、効率的に処理されることで高速化を図ることができます。通常はこれを<head>内に設置すればOKです。
preloadはこの他にもscript, fontなど様々な要素を指定できるようです。読み込みに時間がかかる要素に効果的に使っていきましょう。その他preloadに関しては、以下の記事で詳しく説明されています。
サイト高速化に必須の link rel=preload とは？（使い方とサンプルHTML・CSS）
③ 表示の最適化
imgタグでは、メディアクエリを用いてデバイス別に表示を最適化することができます。
以下のように指定すると、ユーザーのデバイス幅に応じてブラウザが適切なサイズの画像を選択してくれます。ちなみにwというのはpxに対応する記述子で、vwはビューポートの幅のことです（初期値100vw）。
<img src="img.jpg" srcset="img-400.jpg 400w, img-720.jpg 720w, img-1170.jpg 1170w" sizes="100vw">
上の場合、ビューポートの幅が400pxまではimg-400.jpg、401～720pxまではimg-720.jpg、721px以上はimg-1170.jpgが選択されることになります。
複数の画像サイズを指定していますが、実際に使われるのはブラウザが適切と判断した1枚のみです。不要なものはロードされないので安心してください。
sizesには50vw（ビューポートの幅の50%）なども指定できますが、そうするとsrcsetの画像切り替えに影響する点だけご注意ください。この内容を含むimgタグの詳細は以下の記事が参考になります。
HTML5/埋め込み/img要素 レスポンシブイメージ（画像サイズの最適化）
PSIの活用
原因がよくわからないときは、PageSpeed Insightsの結果画面を参考にしてみましょう。「改善できる項目」や「診断」にヒントが示されていることがあります。
各項目のタブを開くと詳細が表示されるので、そこでどの要素が影響しているのか、読み込みに時間がかかっているかなど詳しく確認することができます。
まとめ
LCPの改善方法について、ざっくりながらご紹介しました。
LCPに関わる要素はWebサイトの読み込み全般に共通しているので、改善に取り組むことはサイト全体の最適化にも繋がってくると思います。特に画像の最適化は効果が大きいので、ぜひ試してみてください。
…ただし、一度気にし始めると思わぬ深みにはまることもあります（経験談）。上手くいかないときは一旦落ち着いて、見落としポイントがないかチェックしてみましょう。
LCP…なんだそれ？と思いながらスクロールすると即解説があり、さすがに分かりやすい書き方をしているなぁと思いました^^
モバイル用に画像を最適化するのは僕も一度考えたことはありましたが面倒臭がりな性格から「まぁ…いいか」とスルーした記憶が。でも高速化を徹底するなら有用な手段なのしょうね。vwは使用したことあったのですが、幅記述子については知らなかったので勉強になりましたm(_ _)m
こんにちは。コメントありがとうございます(^^)
imgタグの最適化は私もわりと最近知って、いろいろと試したりしていました。そこまでシビアにやらない限り使うことはあまりないですが、テクニックのひとつとして覚えておけば損はないと思います。
ひき太郎さんのブログに関してはもともと画像がコンパクトですし、WebP化までしているのでおそらく必要ありませんね(^^;
コメントを書き込む