ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます。脱線もしますが助けになれば幸いです。

ブラウザのPreloadingを試してみた

blog.asial.co.jp

この記事の中でPreloadingというものが紹介されていたので試してみました。Chrome Dev Summitの紹介記事だったので紹介の紹介ですね。

Preloadingとは

次以降のページで使う画像やJSファイルなどの静的ファイルをあらかじめ取得しておくことで、遷移後の表示速度の向上を図ることができるというものです。 ブラウザのキャッシュを意図的に準備できるイメージです。

試してみた

用意するのはこちら。

  • 静的ファイル
    • jQueryをCDNから拝借しました
  • htmlファイル2つ
    • 最初にアクセスするファイル(index1.html)
      • jQueryのファイルをあらかじめ読み込む
    • 遷移後のファイル(index2.html)
      • 実際にjQueryのファイルを使う
  • Preloadingが使えるブラウザ

最初にアクセスするファイル(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から。

f:id:te-nu:20181124185940p:plain

jQueryのファイルがダウンロードされていることが確認できます。時間にして470msとバカにはできない時間です。

ちなみにConsoleでは

index.html:11 Uncaught ReferenceError: $ is not defined
    at index.html:11

と出ています。あらかじめの読み込みなのでこのページ上ではjQueryが使えないということが確認できました。

遷移後のファイル(index2.html)

そして問題のindex2.html

f:id:te-nu:20181124190217p:plain

ちゃんとキャッシュされてるーーーーー!

今回の検証では事前に読み込んでおくことで470ms→3msと大幅な時間短縮ができました。

もちろんその分1ページ目の表示に時間はかかりますが、どのページの表示を短縮するかをある程度操作することが出来るのでUXの向上に一役買うのではないでしょうか。

おまけ

ちなみに1ページ目で<script src="https://code.jquery.com/jquery-3.3.1.js"></script>としても2ページ目ではキャッシュされました。

1ページ目でも同じファイルを使うなら問題ありませんが、使わないのであれば名前の衝突などを避けるためにもPreloadingで有ることを示しておいた方が良いと思います。