largest contentful paint の画像のプリロードしてWebページの読込速度を高速化する方法

largest contentful paint の画像のプリロードしてWebページの読込速度を高速化する方法

ことみ

画像をギリギリまで圧縮してもpage speed insightsでLCP時間を改善する為にプリロードしてくださいと表示されますがどうすればいいの?

Webサイトやブログを運営するなら画像を入れて読みやすいページを作りたいでも画像を入れすぎると読込速度が遅くなってしまい

せっかく記事を読みに来てくれた方が最後まで読まずに途中で離脱してしまい結果アクセス数が激減してアドセンスやアフィリエイトの収益も減ってしまいます。

最近のGoogleはユーザーの利便性を重要視しているので表示速度も評価項目の対象になりSEO(検索エンジン最適化)にも影響が出るのでなるべく記事を軽くする事が大切です。

みこと

今回は画像を圧縮しても改善されない方向けにLCP要素で使用する画像をプリロードして読込速度を高速化する方法を紹介します

LCPとは

LCPとはlargest contentful paint の略でサイトページ内でメインとなる動画や画像などのコンテンツブロックが表示される時間までの待機時間の事でどのくらい早く表示されるかが

重要になりpage speed insightsでの読込速度が2.5秒以内なら『良好』4秒以下は『改善が必要』それ以上は『不良』という評価になるので状況によって修正が必要になります。

largest contentful paint の画像のプリロードする方法

みこと

それではLCPの画像のプリロードする方法を紹介します。このブログではWordPressのテーマ『SANGO』と『PORIPU』を使用しています

今回はAdSense広告を遅延読込して高速化した記事をlargest contentful paint(LCP) の画像をプリロードして更に読込速度を高速化しました。

mikotoniomakase.com

LCP画像をプリロードする手順
1:page speed insightsでLCPエラーを確認する
2:画像のプリロード(先読み)するコードを追加する
3:完成した画像のプリロード(事前読込)コードを貼り付ける

page speed insightsでLCPエラーを確認する

まずはWebページの読込速度を確認する為にpage speed insightsでLCPエラーが表示されるかを確認します。

page speed insightsでLCPエラーを確認する

表示速度を確認したいアドレスを入力するとpage speed insightsの結果が表示されるので写真赤枠で囲ってある現在のLCP読込時間は4.6秒/短縮できる時間の1.05秒部分を確認します。

このブログの画像データ容量はギリギリまで圧縮をして30KB前後にしていますが読込速度が4秒以上なので『不良』という評価になってしまいました。

mikotoniomakase.com

画像のプリロード(事前読込)するコードを追加する

改善する項目でlargest contentful paint (LCP)の画像のプリロードというエラーが表示された場合は右側にあるをクリックすると更に詳しくエラー内容が表示されます。

画像のプリロード(先読み)するコードを追加する

読込速度に影響が出ている画像とURLと減らせるデータ量が表示されるので詳細ページを参考にしながら画像のプリロード(事前読込)するコードを追加します。

今回は画像の事前読込するコードを利用していますが動画/JavaScript/CSSなど<link rel=”preload” as=”〇〇〇>タグを使い優先順位を決めて読込をさせます。

Chrome 73以降、プリロードをレスポンシブ画像と一緒に使用して、両方のパターンを組み合わせて、画像の読み込みを大幅に高速化できます。(青文字部分はお好みで設定)

<html>
<link rel="preload" as="image" href="img.png" />

お好みで追加必ずしも必要ではない
<link
  rel="preload"
  as="image"
  href="img.jpg"
  imagesrcset="img_400px.jpg 400w, img_800px.jpg 800w, img_1600px.jpg 1600w"
  imagesizes="50vw"/>
</html>

まずはメモ帳などにこちらの<link rel=”preload” as=”image” href=”img.png” />をコピーして貼り付けます。そして赤文字のimg.pngを削除したら

レスポンシブ画像と一緒に使用して、両方のパターンを組み合わせて、画像の読み込みを大幅に高速化できます。

画像のURLを右クリックしてリンクのURLをコピーして削除した部分にコードを貼り付けます。

完成した画像のプリロード(事前読込)コードを貼り付ける

プリロード(事前読込)コードが完成したコードを貼り付けます。WordPressのテーマや環境によって貼り付ける場所は変わります私の場合はタイトルとアイキャッチ画像の間にコードを貼り付けたら

プリロード(事前読込)コードが完成したコードを貼り付けます。WordPressのテーマや環境によって貼り付ける場所は変わります私の場合はタイトルとアイキャッチ画像の間にコードを貼り付けたら

もう一度page speed insightsで確認して改善できる項目 largest contentful paint (LCP)の画像のプリロードというエラーが表示されなくなり読込時間も1.0秒で評価は『良好』になりました。

page speed insightsの読込速度が大幅に改善されました
このブログではロリポップサーバーの月額250円の安いプランで運営して1記事にアドセンス広告を5つ貼り付けた状態でpage speed insightsの読込速度は100点満点中モバイルで83パソコンで99までスコアを上げる事が出来ました。

largest contentful paint の画像のプリロードして高速化する(まとめ)

Webページを運営するなら画像を貼り付けて分かりやすい記事にする事が大切ですが読込速度が遅くなると最後まで読まずに途中で離脱してしまいGoogleからの評価も下がってしまい結果アクセス数が激減してアドセンスやアフィリエイトの収益も減ってしまうので

画像の圧縮や遅延読込するプラグインを使っても改善されない場合はlargest contentful paint の画像のプリロード(事前読込)を試してみてはいかかでしょうか?

みこと

WordPressのテーマや環境によってはうまくいかない場合がありるので試す場合は事前にバックアップを取ってからお試しください

#ブログ初心者 #画像編集 #WordPress #Google #アドセンス #アフィリエイト #はてなブログ #ロリポップレンタルサーバー

投稿日2021/03/07 書いた人 Mikoto Mikaka



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です