この記事の中でPreloadingというものが紹介されていたので試してみました。Chrome Dev Summitの紹介記事だったので紹介の紹介ですね。
Preloadingとは
次以降のページで使う画像やJSファイルなどの静的ファイルをあらかじめ取得しておくことで、遷移後の表示速度の向上を図ることができるというものです。 ブラウザのキャッシュを意図的に準備できるイメージです。
試してみた
用意するのはこちら。
- 静的ファイル
- jQueryをCDNから拝借しました
- htmlファイル2つ
- 最初にアクセスするファイル(index1.html)
- jQueryのファイルをあらかじめ読み込む
- 遷移後のファイル(index2.html)
- 実際にjQueryのファイルを使う
- 最初にアクセスするファイル(index1.html)
- Preloadingが使えるブラウザ
- 今回はChrome(70.0.3538.110)
- 使えるブラウザは(https://caniuse.com/#feat=link-rel-preload)で確認できます
最初にアクセスするファイル(index1.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index1</title> <link rel="preload" href="https://code.jquery.com/jquery-3.3.1.js" as="script"> </head> <body> <script> // jQueryを使えないことの確認用 $("body").css("background-color", "gray"); </script> <a href="index2.html">jQueryを使うページへ</a> </body> </html>
遷移後のファイル(index2.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index2</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <script> $("body").css("background-color", "gray"); </script> </body> </html>
確認
最初にアクセスするファイル(index1.html)
まずはindex1.html
から。
jQueryのファイルがダウンロードされていることが確認できます。時間にして470msとバカにはできない時間です。
ちなみにConsoleでは
index.html:11 Uncaught ReferenceError: $ is not defined at index.html:11
と出ています。あらかじめの読み込みなのでこのページ上ではjQueryが使えないということが確認できました。
遷移後のファイル(index2.html)
そして問題のindex2.html
。
ちゃんとキャッシュされてるーーーーー!
今回の検証では事前に読み込んでおくことで470ms→3ms
と大幅な時間短縮ができました。
もちろんその分1ページ目の表示に時間はかかりますが、どのページの表示を短縮するかをある程度操作することが出来るのでUXの向上に一役買うのではないでしょうか。
おまけ
ちなみに1ページ目で<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
としても2ページ目ではキャッシュされました。
1ページ目でも同じファイルを使うなら問題ありませんが、使わないのであれば名前の衝突などを避けるためにもPreloadingで有ることを示しておいた方が良いと思います。