LCPってご存じですか？
Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP) つまりページの表示速度のことです。
ページの表示速度が良いということは、ユーザビリティ的にも良いのはもちろんのこと、SEOにも良い影響があります。
今回は、LCP改善に向けてできることをご紹介します。
LCPはGoogleが無料で提供している「PageSpeed Insights」で測定できますので、対応前と対応後でどれだけスコアが改善するかお試しください。
https://pagespeed.web.dev/
画像の読込速度を改善
まずは、最も読込速度の改善が簡単な画像から改善しましょう。
画像を圧縮してること前提で話を進めます。
webpを使用する
webpはGoogleが開発した次世代画像フォーマットです。
基本的にはJPGやPNGより圧縮率が高いので、容量も軽くなり、読込速度も改善します。
WEBPへの変換ツールはオンライン上で変換してくれるツールを利用させてもらうと便利です。
■サルワカ道具箱
https://saruwakakun.com/tools/png-jpeg-to-webp/
画像を出し分ける
webpはまだ古いバージョンのブラウザでは対応してないものがあるので、その場合は<picture>タグを使用して、画像を出し分けます。
<picture>
<source type="image/webp" srcset="img.webp">
<img src="img.png">
</picture>画像を遅延読込する
ファーストビュー（ブラウザで見える範囲の画面）以外の画像を遅延読込することで、表示速度を改善します。
方法としては二つあります。
- 遅延読み込み用のプラグインを導入 （Lazy Loadライブラリ）
- loading属性にlazyを適用する方法
おすすめは、指定が簡単なloading属性です。
loading属性は、img 要素、 iframe 要素の読込方法を指定します。
<img src="img.png" loading="lazy" />これまでsafariでサポートされていない属性でしたが、15.4以降のSafariではサポートされました。
今後はloading属性が主流になると思われます。
背景画像の遅延読込
背景画像の遅延読込については、別途ライブラリが必要になります。
そもそも写真などの遅延読込するほど重いファイルをcssに記載することはあまりないし、ＳＥＯ的にも微妙だとは思いますが。。
内容については、こちらの記事が参考になるかと。
https://www.plusdesign.co.jp/blog/authorb57ce/113.html
alt属性を記載する
読込速度とは関係ありませんが、alt属性はきちんと入れておきましょう。
文章と同じ内容を入れるより、画像の内容を簡潔に説明したテキストを入れましょう。
CSSを遅延読込・非同期読込させる
cssはブラウザが読み込んで内容を解析するまで、レンダリング（画面描写）をストップします。
非同期でcssを読み込むことで、レンダリングを止めずにcssを読み込みます。
ただ、ファーストビューのcssも遅延読込すると、一瞬画面が崩れた状態で表示されてしまうので、ファーストビューの表示で使用するcssについては、非同期で事前読込します。
rel="preload" で事前読込する
<link>に対して「rel="preload"」を指定することで、レンダリングをブロックせずにcssを事前読込することができます。
記述は下記のうよに 「as="style"」「rel="preload"」と指定し、別途通常のスタイルシート読込を行います。
<link href="style.css" as="style" rel="preload">
<link href="style.css" rel="stylesheet" type="text/css">ファーストビューで使用する以外のCSSは遅延読込を行う。
ファーストビューの表示に必要のないcssファイルについては、遅延読込を行います。
良く使用されるテクニックとして、「media」属性を使用したものがあります。
<link rel="stylesheet" media="print" onload="this.media='all'">「media="print"」は印刷用のｃｓｓです。
画面が全て読み込まれた後、「onload」イベントで、media属性をallにすることでcssをレンダリングをブロックすることなくcssを読み込めます。
cssファイルを圧縮する(Minify)
通常のwebサイトではあまり効果がないかもしれませんが、cssファイルの不要な改行や空白などを削除し、ファイルサイズ自体を小さくすることで読込速度を改善できます。
gulpなどを使用して圧縮しますが、よくわからない方は、オンライン上のツールでも可能です。
JavaScriptを非同期で読み込ませる
JavaScriptが読み込まれると、先にJSを処理してから画面を読み込むため、レンダリングをブロックします。
JavaScriptを非同期で読み込み、レンダリングを止めないようにする。
async/defer属性を使用する
scriptタグに 「async」もしくは「defer」を付けることで、非同期で読み込ませることができます。
基本的には、「defer」を付けることがオススメです。
「async」は、読み込まれたJSファイルがすぐに実行されるため、実行するJSファイルの順番が前後する可能性があります。
「defer」はhtmlのコンテンツ読込後実行され、実行される順番は「defer」をつけたものは順番に実行されます。
<script type="text/javascript" src="style.js" defer></script>async/defer属性を使用する際の注意
遅延読込させるファイルの順番によってはjavascriptでエラーが出る可能性があります。
たとえば、jqueryとstyle.jsというファイルを二つ読み込んでおり、style.jsの中でjqueryを使用している場合。
style.jsを実行している時点ではまだ、jqueryが読み込まれていないため、エラーになります。
<script type="text/javascript" src="jquery-3.6.3.slim.min.js" defer></script>
<script type="text/javascript" src="style.js"></script>対策としては、style.jsにもdeferをつけるか、どこでどんな影響が出るか分からないjavascriptなら、何もせずそのままにしておいた方が良いかもしれません。
<script type="text/javascript" src="jquery-3.6.3.slim.min.js" defer></script>
<script type="text/javascript" src="style.js" defer></script>まとめ
以上 ページの読込速度の改善方法でした。
ほとんどのWebサイトはトップページが一番情報が集中しているため、読込速度が遅くなっていると思います。
ですので、とりあえずトップページだけでも対応をしてみると良いと思います。