これまでコアウェブバイタルについての概要や画像最適化について記事で紹介してきました。 コアウェブバイタルとは？SEO対策の方法も紹介 非エンジニアでも簡単にできる画像圧縮の方法。PNGとJPGの違いも解説します
モトキ
モトキ
今回はLCP、FID、CLSの3項目に対して、こちらのLIGブログでも行った具体的なスコア改善方法をご紹介します。
LCP (Largest Contentful Paint) 対策
LCPとは最大コンテンツの表示スピードを示す指標です。
最大コンテンツというのはシンプルにそのページ内で一番大きな要素です。開発者ツールでLighthouseを実行し、画面のパフォーマンスの項目下のほうのLargest Contentful Paint elementというところで具体的にどの要素が判定されたかが確認できます。大抵はアイキャッチ画像などファーストビュー内にある画像要素だと思います。
対策としてはまず、以前の記事で紹介したように、該当要素を含むページ内の画像を適切に圧縮して、ページ全体の読み込みスピードを上げます。
実際のところ、画像のレンダリングは上から順に行われるので、該当のコンテンツまでを圧縮すればそれでほぼクリアですが、ユーザー体験の向上という本質を求めるために、この際全体の最適化も行いましょう。
さらにスピードアップに関して重要なこととしては、ファーストビュー以降の画像に対して loading=”lazy” の設定を行います。この際LCPの要素に対して設定してしまうとスコアダウンです。一括で全部の img 要素にかけないよう注意しましょう。
ページのレンダリングは通常、HTML, CSS, Javascript, 画像などのコンテンツという順で行われます。なので「ファーストビューの表示」を本気で行うなら「ファーストビューの表示に必要なスタイルを抜き出してインラインで記述する」みたいなことができますが、そこまでの対策を取れないことが多いと思います。ですが実際のところ、上記のような全体のファイルの軽量化をメインに対策をすれば合格ラインに到達するのは難しくないのでご安心ください。
CLS (Cumulative Layout Shift) 対策
これに関してはすでに前々回の記事でも紹介済みですが、imgやvideo、iframeにサイズ情報（縦横比）を設定すること、Webフォントの読み込みを工夫することでレイアウトがずれることを防げます。
<img loading="lazy" src="xxx.jpg" alt="" width="300" height="200">具体的には上記の感じで画像要素に対して縦横比（px はいりません）を設定すれば、あとはブラウザ側が画像が読み込まれる前にその比率に応じた空間を空けてくれるので、レイアウトシフトが起こらないようになります。
FID (First Input Delay)対策
これはJavascriptファイルの読み込み時間を改善する必要があります。まずは不要なコードの削除、そしてファイルの圧縮をします。
そして読み込みがメインスレッドのみで行われているのを非同期で同時に行うために、広告やソーシャル共有などの実行する順序が問題にならないサードパーティのJavaScriptファイルに対してasyncを設定すれば、大幅に改善されます。
具体的な設定方法はGoogleから共有されているこちらのおすすめの方法をご確認ください。
以上、コアウェブバイタルの改善方法でした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
