ポイント

目的：ページの表示を高速化する

前回まで、画像サーバーを変更して画像の表示を高速化した。

さらにできることがないかを検討し、リソースヒントを試してみた。

リソースヒントとは、重要なファイルの参照を予めブラウザに知らせて、取得を促す指示になる。

代表的なものに preload、preconnect、dns-prefetch がある。

Web にあまり詳しくない書き手は、次のように理解した。

詳細は、こちらを参考にした。

preload はブラウザに対して、リソースを事前にダウンロードするように指示する。どのように動くのか、実際に確認してみた。

preload は <head> 内の早い場所に、以下の記述をする。

<link rel="preload" href="画像のURL" as="image" />

上が通常の読み込み、下が preload を使用した場合になる。

まず preload が無い場合、通常通りページの読み込みを行い、終了近くで画像のリンクを見つけて画像の取得を開始する。

次に preload がある場合、ページの読み込み初期に <head> 内の 早い段階でリンクを見つけて、即ダウンロードを開始 している。

画像のダウンロードは、ページのダウンロードより早く終了している。

どれぐらいの効果があるのか、11回測定して中央値を求めてみた。

preload があると、確かに ページのダウンロード開始直後に、画像のダウンロードも開始 している。

しかし、２つのグラフを比較すると、画像の取得は確かに早くなっているが LCP は変わっていない。

速いサーバーでは、LCP は画像のダウンロード以外の所がボトルネックになるようである。

遅いサーバーでも、先ほどと同じように、preload があるとページのダウンロード開始の直後に画像のダウンロードが始まっている。

しかし、その後のダウンロード時間の誤差が大きくて、LCP は改善していない。

11回の測定の結果がこの値なので、実際のダウンロード時間はかなり誤差に影響されることがわかる。

preconnect と dns-prefetch は、ブラウザに接続の準備をすることを指示する。

preconnect は実際の接続まで行い、dns-prefetch は接続の初期段階のみ実行する。

理論上は先ほどの preload より効果は小さく、また実際の接続にかかる時間も 0.1 秒程度なので、そこまで大きな効果は期待できない。

また、あくまでブラウザにヒントを与えるだけなので、書き手の環境では 実際には実行されないことが多かった。

今回の測定では、リソースヒントで明らかな効果は得られなかった。

リソースヒントは、機能を多く追加してパフォーマンスの悪化した場合に効果を発揮するもので、もともと動作が軽い場合にはあまり効果が無いのかもしれない。

最近のブラウザはタスクを最適化しているので、人が指示するよりそのまま任せたほうが良い可能性もある。

次の記事

前の記事

オリジナルのブログ記事