スマホ表示の救世主！リンク先のページを高速表示できる超軽量スクリプト【instant.page】

夏も終わりに近づいている今日この頃、みなさまいかがお過ごしでしょうか😌

とはいえまだまだ暑い日が続きそうなので、引き続き体調には気をつけていきたいものです。

さて今回は、ユーザーがクリック・タップする直前にページをプリロードし、高速に表示できる超軽量スクリプト「instant.page」をご紹介させていただきます。

公式サイトでは、「サイトのページを1分で瞬時に作成し、コンバージョン率を1％改善します。」（和訳）のキャッチコピーを掲げており、モバイルファーストの今、活躍すること間違いなしです。

このスクリプトの特徴

instant.pageはジャストインタイムプリロードを使用します。

ジャストインタイムとは製造業でよく使われる言葉だそうですが、要は無駄をなくし効率をアップさせるという意味だそう。

つまり、ユーザーがクリックする直前にページをプリロードし、ロードを待つことがなくページを見られるという事です。

また公式サイトでは、以下の発表をしています。（和訳）：

ユーザーがリンクをクリックする前に、そのリンクの上にマウスを置きます。ユーザーが65ミリ秒間カーソルを合わせると、2回のうち1回そのリンクをクリックする可能性があるため、instant.pageはこの時点でプリロードを開始し、ページのプリロードには平均300ミリ秒以上かかります。

 

別のオプションは、ユーザーがマウスを押し始めたときに、マウスを放す直前にプリロードすることです。これは、実質になり、ゼロ未使用のリクエストまだしながら、80ミリ秒で、ページのロードの改善、平均で。

 

モバイルでは、ユーザーはディスプレイをタッチしてからリリースし、ページがプリロードされるまで平均90ミリ秒を残します。

人体の脳は、100ミリ秒未満の行動を瞬時に知覚するため、 その結果、instant.pageを使用すると、3Gでもページが瞬時に表示されると感じられるそうです。

このスクリプトでは、ユーザーがアクセスする可能性が高い場合にのみページがプリロードされ、ユーザーとサーバーの帯域幅とCPUを尊重してHTMLのみがプリロードされます。
スクリプトはわずか1kBと、超軽量。他すべてのスクリプトの後にロードされます。

設置方法

<script src="//instant.page/2.0.0" type="module" integrity="sha384-D7B5eODAUd397+f4zNFAVlnDNDtO1ppV8rPnfygILQXhqu3cUndgHvlcJR2Bhig8"></script>

公式サイトはこちら

まとめ

PCとスマホではロードする速度が違い、またモバイル回線を使うことでロードが遅くなる場合があるスマホではこれから重宝されるべきスクリプトですね。

超軽量なので積極的に使用していき、ユーザーの離脱を抑えコンバージョンの改善に役立てましょう。