画像をIE11でpreloadする • Yurikago Blog

link要素のrel属性にpreloadを指定するとリソースを先読みします。リソースを先読みすることでレンダリングがブロックされにくくなりページパフォーマンスが向上するのですが、この機能はIEで使えません。この記事ではpreloadのPolyfillを導入してIEで同等の機能を実現する方法をまとめました。

参考: https://caniuse.com/#search=preload

preloadとは

要素のrel属性でpreloadを指定すると、HTMLの要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

Polyfill

digitalkaoz氏が作成したライブラリを利用させていただきます。2020/07/09時点のバージョンはv1.22.5です。

参考: https://github.com/digitalkaoz/preload-polyfill

インストール

% mkdir preload-polyfill
% cd preload-polyfill
% npm init -y
% npm install @digitalkaoz/preload-polyfill

node_modules/@digitalkaoz/preload-polyfill/distに以下のスクリプトが作成されます。

preload-polyfill.min.js
preload-polyfill-invoke.min.js
preload-polyfill-inline.min.js

スクリプトを読み込む

検証リポジトリ: https://github.com/cuavv/sandbox-preload-polyfill

<!DOCTYPE html>
<html>
  <head>
    <!-- PromiseのPolyfill -->
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    <script>
      /**
       * IE9以上向けにCustomEventの機能を代替する
       * @see https://developer.mozilla.org/ja/docs/Web/API/CustomEvent/CustomEvent#Polyfill
       */
      ;(function () {
        if (typeof window.CustomEvent === 'function') return false

        function CustomEvent(event, params) {
          params = params || {
            bubbles: false,
            cancelable: false,
            detail: undefined,
          }
          var evt = document.createEvent('CustomEvent')
          evt.initCustomEvent(
            event,
            params.bubbles,
            params.cancelable,
            params.detail
          )
          return evt
        }

        CustomEvent.prototype = window.Event.prototype

        window.CustomEvent = CustomEvent
      })()
    </script>

    <script src="/lib//preload-polyfill.min.js"></script>
    <script src="/lib/preload-polyfill-invoke.min.js"></script>
    <script src="/lib/preload-polyfill-inline.min.js"></script>

    <link rel="preload" as="image" href="/image/bridge-4605202_1280.jpg" />
  </head>
  <body>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <script type="text/javascript" src="/js/hello.js"></script>
    <img src="/image/bridge-4605202_1280.jpg" alt="bridge" />
  </body>
</html>

Dockerコンテナを立ち上げてIE11で以下のURLにアクセスします。

http://192.168.99.100:8080/preload.html

結果

preloadなしに比べて、preloadありは画像を早いタイミングでリクエストします。この結果からpreloadがIE11で動作していることが分かります。

preloadなし

preloadあり

最後に

preloadを導入してどれくらいページパフォーマンスが向上するのかはそのうち調べます。