ポイント
- リソースヒントを試す
- 画像 の ダウンロード時間は誤差が大きい
- 誤差以上の効果を得るのは難しい
目的：ページの表示を高速化する
前回まで、画像サーバーを変更して画像の表示を高速化した。
さらにできることがないかを検討し、リソースヒント を試してみた。
リソースヒント とは？
リソースヒントとは、重要なファイルの参照を予めブラウザに知らせて、取得を促す指示になる。
代表的なものに preload、preconnect、dns-prefetch がある。
Web にあまり詳しくない書き手は、次のように理解した。
- preload：これ取り寄せといて！
- preconnect：電話つないどいて！
- dns-prefetch：電話番号調べといて！
詳細は、こちらを参考にした。
preload
preload はブラウザに対して、リソースを事前にダウンロードするように指示する。どのように動くのか、実際に確認してみた。
preload は <head> 内の早い場所に、以下の記述をする。
<link rel="preload" href="画像のURL" as="image" />
上が通常の読み込み、下が preload を使用した場合になる。
まず preload が無い場合、通常通りページの読み込みを行い、終了近くで画像のリンクを見つけて画像の取得を開始する。
次に preload がある場合、ページの読み込み初期に <head> 内の 早い段階でリンクを見つけて、即ダウンロードを開始 している。
画像のダウンロードは、ページのダウンロードより早く終了している。
どれぐらいの効果があるのか、11回測定して中央値を求めてみた。
ケース１：速いサーバーの場合
Blogger の旧画像サーバー
preload があると、確かに ページのダウンロード開始直後に、画像のダウンロードも開始 している。
しかし、２つのグラフを比較すると、画像の取得は確かに早くなっているが LCP は変わっていない。
速いサーバーでは、LCP は画像のダウンロード以外の所が ボトルネック になるようである。
ケース２：遅いサーバーの場合
Blogger の新画像サーバー
遅いサーバーでも、先ほどと同じように、preload があるとページのダウンロード開始の直後に画像のダウンロードが始まっている。
しかし、その後のダウンロード時間の誤差が大きくて、LCP は改善していない。
11回 の測定の結果がこの値なので、実際のダウンロード時間はかなり誤差に影響されることがわかる。
preconnect、dns-prefetch
preconnect と dns-prefetch は、ブラウザに接続の準備をすることを指示する。
preconnect は実際の接続まで行い、dns-prefetch は接続の初期段階のみ実行する。
理論上は先ほどの preload より効果は小さく、また実際の接続にかかる時間も 0.1 秒 程度なので、そこまで大きな効果は期待できない。
また、あくまでブラウザにヒントを与えるだけなので、書き手の環境では 実際には実行されないことが多かった。
結論：誤差以上の効果を得るのは難しい
今回の測定では、リソースヒントで明らかな効果は得られなかった。
リソースヒントは、機能を多く追加してパフォーマンスの悪化した場合に効果を発揮するもので、もともと動作が軽い場合にはあまり効果が無いのかもしれない。
最近のブラウザはタスクを最適化しているので、人が指示するよりそのまま任せたほうが良い可能性もある。
次の記事
前の記事
オリジナルのブログ記事