【高速化】 preload、preconnect、dns-prefetch は 効果があるか？

## ポイント

- リソースヒントを試す
- 画像 の ダウンロード時間は誤差が大きい
- 誤差以上の効果を得るのは難しい

</div>

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

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

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

## リソースヒント とは？

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

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

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

- preload：これ取り寄せといて！
- preconnect：電話つないどいて！
- dns-prefetch：電話番号調べといて！

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

https://developer.mozilla.org/ja/docs/Web/Performance/Speculative_loading

## preload

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

preload は `<head>` 内の早い場所に、以下の記述をする。
```
<link rel="preload" href="画像のURL" as="image" />
```

<br>

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUQgxEQNZX4g3vtpHEW1DHLjy_riHZlS-JAKA7YT9AV9bzCnOsVBsFUVteG1Wsx62ipfuP1YvAdfwr20nx03OSs5oHrBcmveOrRhuI8AvPpfiMTKULb9WIfZEpNBN28FRCyjyN_vNM9sx7_PSD5V3mf0oB68E3ALgAv6C39rbLTi0epg/s0-rw-e90/%E6%97%A7%E7%94%BB%E5%83%8F%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%80%80preload%E3%81%AA%E3%81%97%E3%80%80%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E5%85%A5%E3%82%8A.png" alt="旧画像サーバー　preloadなし　コメント入り.png (1296×253)" width="1296" height="253" ><img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMT6ClU8pqd2E7wHQi7ICCV5_SoDkRET0BHlwABroKqa2WHSrUCbMWGO7unEkp84lCp0ztOhMU86biP9Kna2HJjL9H4Xdx1eOmjI8EyrSawwa2mARQs5Gcvp-OB-xKK_A2Vs5k0jphaoklTe6-xyAXGgQXifFAl81bs3qib7YsPi7Vw/s0-rw-e90/%E6%97%A7%E7%94%BB%E5%83%8F%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%80%80preload%E3%81%82%E3%82%8A%E3%80%80%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E5%85%A5%E3%82%8A.png" alt="旧画像サーバー　preloadあり　コメント入り.png (1300×252)" width="1300" height="252" >
</div>
</figure>

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

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

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

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

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

## ケース１：速いサーバーの場合

<br>

### Blogger の旧画像サーバー

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR40gahvCDs86MaBgO-LG9-ZmOoMJrj5ql88rjLOJdytXBvxuRTUw3z_cl1X9VTu1P1pxwYjtWno7m06WBdY-_XSXFUv5z_b9P_2Y20X3kMEM0UI6CbQMn647V4W7glZUVHaAJs0Qu-6jRLAxrfaDMlLKacgKJj9KVkiTt5LsMz4XPVg/s0-rw-e90/%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%92%E3%83%B3%E3%83%88%E3%81%AE%E6%B8%AC%E5%AE%9A%E3%80%81%E6%97%A7%E7%94%BB%E5%83%8F%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%20preload%20%E3%81%AA%E3%81%97.png" alt="リソースヒントの測定、旧画像サーバー preload なし.png (800×1120)" width="350" height="490" ><img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RUlASZA5pM0IlY8A04bZmE0cgd7x7x0A2EIQtvu0XRhmtg0Vicagm6kYq0dUduDkhdGJHdBrBnAZIAXbK8AJfodbdV_9UA5giV0lDvkcm6Q1NMmG4UVb4hOiG6Oay-dJbIKx9gngcT4sBD57CS01eSMmlKD57q3aZGSeX6ImrC3ZkQ/s0-rw-e90/%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%92%E3%83%B3%E3%83%88%E3%81%AE%E6%B8%AC%E5%AE%9A%E3%80%81%E6%97%A7%E7%94%BB%E5%83%8F%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%20preload%20%E3%81%82%E3%82%8A.png" alt="リソースヒントの測定、旧画像サーバー preload あり.png (800×1120)" width="350" height="490" >

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

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

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

## ケース２：遅いサーバーの場合

<br>

### Blogger の新画像サーバー

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh66omjjbb7xSBqZmrFDv6dk4PmhFYJIJyVnRc_VVo8XBemvAAMBgEq2llmkBJ_uSZd59CTDbGsTKW-UL-J-V8CJTSChzWBRHd9KBrEIQPgkwqWkoSBVEqje2i2sgeCiA8C9Qe09Ygg3vf1RVC84Q-8LQQcKmA2t7OTG43v8_6X2Zih3Q/s0-rw-e90/%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%92%E3%83%B3%E3%83%88%E3%81%AE%E6%B8%AC%E5%AE%9A%E3%80%81%E6%96%B0%E7%94%BB%E5%83%8F%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%20preload%20%E3%81%AA%E3%81%97.png" alt="リソースヒントの測定、新画像サーバー preload なし.png (800×1120)" width="350" height="490" ><img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5arNIskxN0_lk0pprcSV5gONLKWQfKW-gZ_zCkcSCmk6q9_G1Nw1c20zu_EzapK1fQ9zAEppwt1TiBPMVBdp8Qo087Jx-Y8up8kR7SvM5P9LofDrIZIInX_UZj8crdZ77VPXjrKka4ZLKBOySJhwTwdHjH686x_MX5RSsDiuyt6izw/s0-rw-e90/%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%92%E3%83%B3%E3%83%88%E3%81%AE%E6%B8%AC%E5%AE%9A%E3%80%81%E6%96%B0%E7%94%BB%E5%83%8F%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%20preload%20%E3%81%82%E3%82%8A.png" alt="リソースヒントの測定、新画像サーバー preload あり.png (800×1120)" width="350" height="490" >

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

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

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

## preconnect、dns-prefetch

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

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

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

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


## 結論：誤差以上の効果を得るのは難しい

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

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

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

<br>

---

次の記事

https://qiita.com/kimamanaDr/items/5e172d1862501d97ad78

前の記事

https://qiita.com/kimamanaDr/items/159054aca659cfe43a9c

<br>

オリジナルのブログ記事

https://kimamaniigakuronbun.blogspot.com/2024/04/Blog08.html