【高速化】 preload、preconnect、dns-prefetch は 効果があるか？
Webページ の読み込みを早くするのに、リソースヒントを使う方法があります。 リソースヒントは、外部のファイルの参照を事前にブラウザに知らせて、読み込みを効率化する方法です。 今回、リソースヒントの効果について、実際に測定してみました。
ポイント
- リソースヒントを試す
- 画像 の ダウンロード時間は誤差が大きい
- 誤差以上の効果を得るのは難しい
はじめに
ページの高速化に、まだできることはあるだろうか？
前回まで、画像表示を高速化するために画像サーバーを変更したことを紹介した。
サーバーを変更することで、サイトの表示をかなり高速化できた。
さらにできることがないかを検討し、今回は リソースヒント を試してみた。
結果から言うと、残念ながら期待する効果は得られなかった。
なお、初心者がいろいろ試しているので、誤りがあってもご容赦願いたい。
リソースヒント とは？
リソースヒントとは、重要なファイルの参照を事前にブラウザに知らせて、取得を促す指示である。
代表的なものに preload、preconnect、dns-prefetch がある。
Web にあまり詳しくない書き手は、下のように理解した。
- preload：これ取り寄せといて！
- preconnect：電話つないどいて！
- dns-prefetch：電話かける準備しといて！
詳細は 投機的読み込み - ウェブパフォーマンス | MDN を参考にした。
preload
preload はブラウザに対して、リソースを事前にダウンロードするように指示する。どのように動くのか、実際に確認してみた。
今回は、Blogger の旧画像サーバー（1.bp.blogspot.com）で検証した。
preload は <head> 内の早い場所に、以下の記述をする。
<link rel="preload" href="画像のURL" as="image" />
上が通常の読み込み、下が preload を使用した場合になる。
まず preload が無い場合、通常通りページの読み込みを行い、<body> の終了近くで画像のリンクを見つけて、画像の取得を開始する。
Blogger の旧画像サーバーは高速なので、画像の取得は一瞬で終わっている。
次に preload がある場合、ページの読み込み初期に <head> 内の早い段階でリンクを見つけて、即ダウンロードを開始している。
画像のダウンロードは、ページのダウンロードより早く終了している。
どれぐらいの効果があるのか、実際に測定してみた。
実際の測定
旧画像サーバー
preload があると、確かに ページのダウンロード開始直後に、画像のダウンロードも開始 している。
しかし、２つのグラフを比較すると、画像の取得は確かに早くなっているが LCP は変わっていない。
旧画像サーバーは高速なので、LCP は画像のダウンロード以外の所が ボトルネック になるようである。
新画像サーバー
遅いサーバーなら効果があるかもしれないと思い、新画像サーバーでも測定してみた。
新サーバーでも、旧サーバーと同じように、preload があるとページのダウンロード開始の直後に画像のダウンロードが始まっている。
しかし、その後のダウンロード時間の誤差が大きく、LCP は改善していない。
11回 の測定の結果がこの値なので、実際のダウンロード時間はばらつきが大きいことがわかる。
今回の結果からすると、リソースヒントで誤差を上回る効果を得るのは難しいようである。
preconnect、dns-prefetch
preconnect と dns-prefetch は、ブラウザに接続の準備をすることを指示する。
preconnect は実際の接続まで行い、dns-prefetch は接続の初期段階のみ実行する。
理論上は先ほどの preload より効果は小さく、また実際の接続にかかる時間も 0.1秒 程度なので、そこまで大きな効果は期待できない。
また、あくまでブラウザにヒントを与えるだけであり、書き手の環境では実際には実行されないことが多かった。
結論：誤差以上の効果を得るのは難しい
今回の測定では、リソースヒントで明らかな効果は得られなかった。
リソースヒントはパフォーマンスの悪化した場合に効果を発揮するもので、もともと動作が軽い場合にはあまり効果が無いのかもしれない。
最新のブラウザはタスクを最適化しているので、人間が指示するよりそのまま任せた方が良いの可能性もある。
今回はほぼ バニラ の JetTheme で測定したが、機能を多数追加している場合は違う結果になる可能性もある。
いずれにしても、LCP 1秒 未満 を追求しても誤差を上回れないことが分かったので、画像の表示は今の方法で満足することにした。
次回から、見やすい Webサイト について考える。