人生のセーフティネット

【Googleコアアプデ 】Core Web Vitals 3つのうちLCPの解説と改善方法

google core web vitalsのLCPについて解説する人

2020年5月にあったGoogleコアアプデ後にブログPVが激減したブロガーは多いのではないでしょうか

もともとPVが少なかったアラフォーブロガーの私も
アクセスがほぼゼロになりました。

変化に対応していくために何が必要か調べてみたところ、
Google Core Web Vitalsというキーワードが出てきました。

今回はGoogle Core Web Vitalsとは何かを理解していきたいと思います。

Google Core Web Vitalsとは?

簡単にいうと

ウェブサイトを訪れるユーザーのストレスを減らすこと
使いやすくすることです

重要なポイントは3つ

1 ページの表示速度を速くすること

2 操作に対する反応が良いこと

3 デザインや見ためが安定していること

それぞれ重要な指標ですね

googleは上記の3つのポイントを数値化するために下記を設定しました。

3つのポイント

* Largest Contentful Paint (LCP)

* First Input Delay (FID)

* Cumulative Layout Shift (CLS)

今回はLCPについて解説していきます。

LCPって何?

LCPとはLargest Contentful Paintの略です。

日本語でいうとサイト内の最大コンテンツ要素がいつ表示されるかを測定します。
ページのメインコンテンツが画面上でのレンダリングをいつ終了したかを判断するために使用します

レンダリングなど専門用語が出てくるのでわかりやすく解説していきます

レンダリング

データを整形して表示すること

LCPを簡単に説明すると

記事のメインコンテンツの表示が何秒かかったか

読み込みから表示までの速度が重要になっていますね。
表示速度を早めるために、ブロガーは調整をしていかなければなりません

それでは記事が表示されるまでの表示速度を速めるためには何をしたらいいのでしょうか?
表示速度を遅くしている原因は何か調べていきましょう。

LCPの低下の原因は?

表示速度を遅くする原因は下記が考えられます。

LCPの低下の原因

・サーバーの応答時間が遅い

・レンダリングをブロックするJavaScriptとCSS

・リソースの読み込み時間が遅い

・クライアント側のレンダリング

サーバーの応答時間が遅いという原因を改善するには、まずサーバーを最適化することです。
サーバーキャッシュ適用や、サーバー高速化がONされているか確認しましょう。

サーバーキャッシュ

サイトのデータをサーバー上の読み込みの速い領域へ一時的に保存すること

次に表示するときには、一時保存にアクセスするので読み込み速度が速くなります。

JavaScriptとCSSについて

JavaScriptファイルを縮小して圧縮したり、余分なものが無いかチェックします。
未使用のCSSは完全に削除するなどの対応が必要となります。

リソースの読み込み時間が遅い点について

スクロールせずに見える範囲でサイト表示にかかった時間が遅い場合
何をチェックするかというと、ここで大きな遅延要素となるのが画像です。

凝った画像を全表示するまでに時間がかかりすぎるという事が
マイナスポイントとなるわけです。

バナーなど画像の読み込みがかなりLCPに影響する

対処方法としては画像の最適化と圧縮があげられます。

画像の最適化と圧縮対応

・そもそも画像を使わないこと

・コンテンツと関係がない場合は削除

・画像を圧縮する

・画像を新しい形式(JPEG 2000、JPEG XR、またはWebP)に変換する

加えてテキストファイルを圧縮する必要がある場合は、
gzipではなくBrotliを使用すると圧縮率が向上します。

【Googleコアアプデ 】Core Web Vitals LCPのまとめ

Google Core Web Vitalsとはウェブサイトを訪れるユーザーの
ストレスを減らすことを目的としたものであり、
それを数値化した指標のうち、今回は『LCP』について解説しました。

LCPとは簡単にいうと記事のメインコンテンツの表示が何秒かかったかであり、
その改善方法は表示までのデータ量削減と圧縮によるものという事がわかりました。

一番衝撃的なのは

そもそも画像を使用しない事を検討する

これがビックリした点です。

Googleの考えていることを理解して、ブログを継続していきましょう!

参考文献:web.dev

リモートワークについての記事を下記noteにまとめています。
無料なのでフォロー、ブックマークお願いします

リモートワーク無料note

ABOUT ME
アバター
あおぞらキンモクセイ
人生のセーフティネット、複数の収入源を構築。大学卒→フリーター +バンドマン→ 証券系サラリーマン→起業→証券系サラリーマン◆株、為替はどっぷり◆子育て奮闘中。英語はあんまり喋れないけど旅行好き◆イギリス、オランダ、ベルギー、シンガポール ◆音楽はGarage bandで宅録継続◆入り口は初期パンクだけど、オールジャンル好き◆サッカー好き◆最近は化石と釣り、落語に興味あり。https://aozorakinmokusei.com◆https://blog.with2.net/link/?2043158