2020年5月にあったGoogleコアアプデ後にブログPVが激減したブロガーは多いのではないでしょうか
もともとPVが少なかったアラフォーブロガーの私も
アクセスがほぼゼロになりました。
変化に対応していくために何が必要か調べてみたところ、
Google Core Web Vitalsというキーワードが出てきました。
今回はGoogle Core Web Vitalsとは何かを理解していきたいと思います。
Google Core Web Vitalsとは？
簡単にいうと
ウェブサイトを訪れるユーザーのストレスを減らすこと
使いやすくすることです
重要なポイントは3つ
1 ページの表示速度を速くすること
2 操作に対する反応が良いこと
3 デザインや見ためが安定していること
それぞれ重要な指標ですね
googleは上記の3つのポイントを数値化するために下記を設定しました。
* Largest Contentful Paint (LCP)
* First Input Delay (FID)
* Cumulative Layout Shift (CLS)
今回はLCPについて解説していきます。
LCPって何？
LCPとはLargest Contentful Paintの略です。
日本語でいうとサイト内の最大コンテンツ要素がいつ表示されるかを測定します。
ページのメインコンテンツが画面上でのレンダリングをいつ終了したかを判断するために使用します
レンダリングなど専門用語が出てくるのでわかりやすく解説していきます
データを整形して表示すること
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の考えていることを理解して、ブログを継続していきましょう！
リモートワークについての記事を下記noteにまとめています。
無料なのでフォロー、ブックマークお願いします
