2020年5月にあったGoogleコアアプデ後にブログPVが激減したブロガーは多いのではないでしょうか
もともとPVが少なかったアラフォーブロガーの私も
アクセスがほぼゼロになりました。
変化に対応していくために何が必要か調べてみたところ、
Google Core Web Vitalsというキーワードが出てきました。
今回はGoogle Core Web Vitalsとは何かを理解していきたいと思います。
Google Core Web Vitalsとは？
簡単にいうと
ウェブサイトを訪れるユーザーのストレスを減らすこと
使いやすくすることです
重要なポイントは3つ
1 ページの表示速度を速くすること
2 操作に対する反応が良いこと
3 デザインや見ためが安定していること
それぞれ重要な指標ですね
googleは上記の3つのポイントを数値化するために下記を設定しました。
今回はFIDについて解説していきます。
FIDって何？
FIDとはFirst Input Delayの略です。
日本語でいうとユーザーが最初にページを操作してから
ブラウザーがその操作に対して実際に応答できるまでの時間のことを指します。
遅延を測定するには
Total Blocking Time（TBT）を使用しています。
画面の初期表示と操作可能になるまでの合計時間
TBTが50ミリ秒以上かかった場合は
ブロックされているとみなされてしまいます
TBTを改善することによってFIDが改善されるということになります。
それではFIDの低下要因は何かを見ていきましょう
FIDの低下の原因は？
表示速度を遅くする原因は下記が考えられます。
大量のJavaScript実行
JavaScriptがWebページで解析、コンパイルおよび実行する方法を
最適化するとFIDが直接削減されます。
ブラウザはJavaScriptを実行している間、ほとんどのユーザー入力に応答できません。
つまりメインスレッドがビジー状態の間、ブラウザはユーザーの操作に応答できません。
・JavaScriptの実行時間を短縮する
・長いタスクを分割する
・インタラクションの準備のためにページを最適化する
・ウェブワーカーを使用する
JavaScriptの実行時間短縮について
ページ上のJavaScriptの量を制限することで、ブラウザーがJavaScriptコードの解析
コンパイル、および実行に費やす時間を削減できます。
・JavaScriptファイルを縮小して圧縮する
・未使用のJavaScriptを延期する
・未使用のポリフィルを最小化
未使用のJavaScriptを削減するにはJavaScriptバンドルを
小さなチャンクに分割するというもので遅延読み込みとも呼ばれます
次は未使用のポリフィルを最小化することですね。
最近の機能をサポートしていない古いブラウザーでその機能を使えるようにするためのコードです。
大抵はウェブ上のJavaScriptのことを指します
長いタスクの分割について
実行時間の長いコードを小さな非同期タスクに分割しましょう。
メインスレッドを50ミリ秒以上ブロックするコードは、ロングタスクとして特徴付けることができます
TBTが50ミリ秒以上かかった場合はブロックとみなされるので注意です。
コード分割やロングタスクの分割を実施するとFIDはかなり改善されます。
インタラクションの準備のためにページを最適化する
まずインタラクションとは何かを理解しましょう。
ユーザーが特定の操作を行なったとき、システムがその操作に応じた反応を返すこと
ルートベースのコード分割が使用されている場合、数百ミリ秒、数秒かかることがあります。
ビルド時にサーバー側のロジックをシフトするか、静的に生成するコンテンツを増やした方が良いです。
JSサイズの膨張、重い実行時間、および非効率的なチャンクに対しては
コードと機能を段階的にロードすることで対応しましょう
【Googleコアアプデ 】Core Web Vitals FIDのまとめ
Google Core Web Vitalsとはウェブサイトを訪れるユーザーの
ストレスを減らすことを目的としたものであり、
それを数値化した指標のうち、今回は『FID』について解説しました。
FIDとは簡単にいうとユーザーが最初にページを操作してから
ブラウザーがその操作に対して実際に応答できるまでの時間のこと
ポイントは
大量のJavaScript実行を減らし、
画面の初期表示と操作可能になるまでの合計時間を短くする
LCPとともに重要な指標ですね！
Googleの考えていることを理解して、ブログを継続していきましょう！
リモートワークについての記事を下記noteにまとめています。
無料なのでフォロー、ブックマークお願いします
