FID (First Input Delay) の改善

最終更新日:2021年04月13日公開日:2021年4月13日 2021年04月

1. FIDとは(初回入力遅延とは)
2. First Input Delay の改善
3. FID FAQ
4. PageSpeed Insights 対策

FIDとは(初回入力遅延とは)

PageSpeed Insights に出てくる Core Web Vitals の一つ First Input Delay
originsummary

解説ページである Web Vitals を見てみると

First Input Delay は「最初の入力までの遅延」のこと．

「応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します」と書いてある通り，閲覧者が操作できるようになるまでの時間を表す．

確かにいくら表示が高速でも，その後操作できないということでは結局イライラは収まらないので，必要な指標と言える．

First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.

「ページのFIDが100ミリ秒未満である必要があります。」といっている．
具体的には触れるようにするまでかかってもよい時間は 100ms までだ，とのこと．

First Input Delay の改善

では，この FID の改善をしてみよう．

Optimize First Input Delay のページによれば，FID を改善するためには TBT を改善するのがよいと書いてある．
「英々辞典の輪廻」かと思うが，TBT とは Total Blocking Time のこと．

TBT は「マウスのクリック、画面のタップ、キーボードの押下などのユーザー入力への応答がブロックされている合計時間を測定します。」と日本語訳はなっている．

Reducing JavaScript payloads with code splitting
removing unused code
efficiently loading third-party JavaScript

要は javascript を何とかしろと言っている．

リンクを張ったので詳しく知りたい方はその先のページを参照してください．

javascript のコードを分割して読み込む

コードを分割してモジュールとして書いておいて，そのコードにある関数を使う時だけ，そのファイル(モジュール)を読み込みに行くべき．

以下で少しだけ説明する．

未使用のコードは削除するべき

npm などのパッケージマネージャを使った場合，使っていないバンドルは読み込まないようにするべきだし，読み込まないようにするプラグインがあるよ，とアドバイスしている．

しかし，普通のホームページで npm を使っているようなところはあるのだろうか？
これは大規模ECサイトなどに向けて書かれた記事だろうか？

ちなみに弊社の「検索エンジン順位チェックツールのChrome拡張機能」は npm を使っている．

サードパーティーのコードはうまく読み込む

まず，本当にそのライブラリが必要かを考えて不要なら削除するべきだと言っていて，

次にそのスクリプト(コード)を読み込むタイミングを考え直せと言っている．

javascript 読み込み時に async と defer の指定を提案している．

どちらも非同期でスクリプトを読み込みにいく．
メインスレッドで javascript を読み込みに行くと DOM の構築が遅れるので基本的に非同期で読み込みにいくのは DOM の構築を妨げないという意味でよい解決法となる．

async は非同期でスクリプトを読み込んだ後，DOM 構築を止めてでもスクリプトの実行を優先する．

defer は非同期でスクリプトは読み込むが DOM構築が終わるまで待機していて，DOM構築が終わった後にスクリプトを実行する．

つまり，すべての要素が出来てからではないとそのスクリプトを実行したときに問題が起こる場合は defer を選択するしかない．
逆に言うと，そういう制約がないなら，async で良いということになる．

FID FAQ

FIDとは何ですか？

初回入力遅延のことです．ページの閲覧者が操作できるようになるまでの時間を表します．

どうすれば FID の数値を改善できますか？

方法は一つではないですが，javascript などの外部ファイルの読み込みを必要最低限にすると速くなります．jQuery などのライブラリは使わないものまで入っているので遅くなる原因となります．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．

ご質問等ありましたら，お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します．