こう
- 「Web の
画面の 表示が 遅い とき、 何を 測って どう 直しますか」 - 「手元で
測ると 速いのに、 利用者からは 遅いと 言われます。 なぜですか」 - 「ボタンを
押してから 反応するまでが 重い、と 言われたら、 何を 疑いますか」
面接官が
- 「遅い」を、
何が 遅いのかに 分けて 測れるか (出るまで、 反応、ずれ) - 手元の
測定と、 実際の 利用者の 数字の 違いを 分かっているか - 3 つの
数字それぞれに、 遅さの 元と 直し方の 見当があるか - 直した
あと、 同じ 数字で 良くなったかを 確かめるか
短い答え
- まず
何が 遅いかを 3 つに 分けて 測ります。 主な 中身が 出るまでの 時間 (LCP)、 操作してから 画面が 反応するまでの 時間 (INP)、 表示が 後から ずれる 量 (CLS) です。 - 手元の
測定だけで 判断せず、 実際の 利用者の 端末と 回線での 数字を 集めて 見ます。 手元の 速い 機械と 回線では、 遅さが 見えないからです。 - 出るまでが
遅ければ、 最初の 応答と 大きな 画像を、 反応が 遅ければ JavaScript の 長い 処理を、ずれが 大きければ 大きさの 決まっていない 画像や 後から 差し込まれる 物を 直します。
この
少し
3 つの
画面の
- LCP いちばん
大きな 中身 (見出しの 画像や本文) が 出るまでの 時間です。 良いと される 目安は 2.5 秒以内です - INP クリックや
入力から、 次の 画面の 描き直しまでの 時間です。 良いと される 目安は 200 ミリ秒以内です - CLS 読んでいる
途中に、 表示が どれだけずれたかです。 良いと される 目安は 0.1 以下です
目安は、
手元の
手元の
INP は、
それぞれの直し方
- LCP (出るまで
) が遅い サーバーの 最初の 応答が 遅くないか、 大きな 画像を 小さく 軽い 形式に しているか、 見出しの 画像を 先に 読み込むよう 指示しているか、を 見ます。 最初に 見える 画像に、 後から 読み込む指定 (遅延読み込み) を 付けると、 かえって 遅くなります。 静的な物は CDN から配ります - INP (反応) が遅い押した
ときに、 JavaScript の 長い 処理が 画面の 処理を 止めていないかを 見ます。 重い 処理を 小さく 分ける、 要らない JavaScript を 減らす、 画面の 描き直しを 要る 所だけに する、 などで直します - CLS (ずれ) が大きい
画像や 動画に 幅と 高さを 書いていない、 広告や 埋め込みが 後から 差し込まれて下を 押し下げる、 文字の フォントが 後から 替わる、が 主な元です。 先に 場所を 取っておきます
HTML
<img src="/hero.webp" width="1200" height="630" fetchpriority="high" alt="見出しの画像">幅とfetchpriority="high" は、
直したら
直したら、
話すときは、
よく
- 手元の
速い 機械と 回線で 測って 「速い」と言う 利用者の 端末と 回線では 遅いことがあります。 利用者の 数字を見ます - 最初に
見える 画像にも 遅延読み込みを付ける いちばん 大事な 画像が 後回しに なり、 LCP が 遅くなります - 画像に
幅と 高さを書かない 画像が 届いた ときに 下の 文が 押し下げられ、 ずれ (CLS) が増えます - 何が
遅いかを 分けずに、 まとめて 直し始める 効かない 手に 時間を 使います。 3 つの 数字の どれが 悪いかを 先に見ます
深掘りの問い
- 「描き方 (CSR と SSR) で
変わりますか」 画面を ブラウザで 組み立てる 形は、 JavaScript が 届いて 動くまで 中身が 出ないので LCP が 遅れやすい、と 1 文で 答え、 測る 話に戻ります - 「JavaScript の
量を 減らすには」 使わない 部品を 読み込まない、 画面ごとに 分けて 読み込む、 要らない ライブラリを 外す、 と答えます - 「良くなった
状態を 保つには」利用者の 数字を 見続け、 目安を 外れたら 知らせる 形にし、 変更の たびに 手元の 測定も 回す、と答えます