人生のセーフティネット

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

Google core web vitalsのFIDについて解説する人

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)

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

FIDって何?

FIDとはFirst Input Delayの略です。

日本語でいうとユーザーが最初にページを操作してから
ブラウザーがその操作に対して実際に応答できるまでの時間のことを指します。

遅延を測定するには
Total Blocking Time(TBT)を使用しています。

TBT

画面の初期表示と操作可能になるまでの合計時間

TBTが50ミリ秒以上かかった場合
ブロックされているとみなされてしまいます

TBTを改善することによってFIDが改善されるということになります。
それではFIDの低下要因は何かを見ていきましょう

FIDの低下の原因は?

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

FIDの低下の原因

大量のJavaScript実行

JavaScriptがWebページで解析、コンパイルおよび実行する方法を
最適化するとFIDが直接削減されます。

ブラウザはJavaScriptを実行している間、ほとんどのユーザー入力に応答できません。
つまりメインスレッドがビジー状態の間、ブラウザはユーザーの操作に応答できません。

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の考えていることを理解して、ブログを継続していきましょう!

参考文献:web.dev

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

リモートワーク無料note

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