SEO講座
Core Web Vitalsの対策② FIDの改善方法
大目にみてケロ。
FIDとは？
FID（First Input Delay）を日本語に訳すと「初回入力遅延」！
訳してもよくわからないですよね。。。
ウェブページを見た時に、ユーザーが行う最初の操作（タップやクリック）から、第一印象で感じるサイトのインタラクティブ性や反応速度を測る指標をFIDと言います。
※ズームやスクロールなどの動作は、最初の操作には含まれません。
下記のように、ページ内でユーザーが行動するまでの応答性や時間が評価対象になります。
・目次をタップする
・フォームに文字を入力するなど
FIDの判定基準は、ユーザーが最初の操作を行ってから下記時間で判定されます。
300ms以下：要改善
300ms超過：不良
※msは「ミリ秒」です。
FIDが低下する要因
FIDが低下する主な要因は、大量のJavaScriptの実行です。
JavaScriptをヘッダーやボディの上部に入れることが多いと思いますが、JavaScriptの処理をしている間、ブラウザがユーザーの最初の操作に応答できなくなるというデメリットがあります。
JavaScriptが少数であれば特に問題はないですが、大量にJavaScriptを入れると処理量が多くなるためFIDが低下します。
FIDの改善方法
では、FIDを改善するには何をすればいいのでしょうか？
改善方法をいくつかご紹介します。
JavaScriptはバージョン更新の度に新しい構文や仕様が追加されるため、ブラウザによって対応状況が変わってしまいます。
それに対応するために、複数のJavaScriptを入れるのはなく、互換性がないブラウザでもJavaScriptが動くようにBabelやPolyfill（ポリフィル）を使うのがおすすめです。
Babelは、JavaScriptのソースコードをどのブラウザでも実行できる古いバージョンのJavaScriptに変換してくれるので、たくさんのコードを書く必要がなくなり工数の削減にも繋がります。
② javascript のコードを分割して読み込む
長いタスクを分割することもおすすめです。
ブラウザがイベント等を処理する箇所を「メインスレッド」と呼び、50ミリ秒以上ブロックするコードが長いタスクとされています。
ユーザーがその場で必要とする以上のものを読み込んで実行する必要はないため、長く時間がかかっているタスクを分割することにより、サイトの入力遅延を削減することができます。
例えば、スクロールしないと見えない箇所のJavaScriptを遅延して処理させるなどで、JavaScriptの初期処理に費やす時間を短縮させてFIDを改善することができます。
③ Web Workerを使用する
Web Workerを使用すると、JavaScript をバックグラウンドのスレッドで実行できるようになります。
ユーザーインターフェイス以外の操作を、web workerを使用してバックグラウンド処理にすることで、メインスレッドに割く時間を短縮出来るため、FIDを改善することができます。
昔はscriptでしか出来なかったことも、今はCSSで出来るようになったことも多いし、出来るだけscriptを減らすのがいいかも～。