スマホ対応の優れもの!クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page

ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。

ページに外部スクリプトを1つ加えるだけの簡単実装です。

サイトのキャプチャ

instant.page
instant.page -GitHub

instant.pageの特徴

instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。

ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.pageはプリロードを始め、ページのプリロードには平均300ミリ秒かかります。スマホではユーザーはページを解放する前にディスプレイに触れ始め、ページをプリロードするのに平均90ミリ秒かかります。

人間の脳は100ミリ秒未満の行動を「瞬間」として知覚するため、instant.pageでページをプリロードすると即座に感じられるようになります。

instant.pageではユーザーが訪問する可能性が高い場合にのみページがプリロードされ、ユーザーとサーバーの帯域幅とCPUを考慮して、そのページのHTMLのみがプリロードされます。
スクリプトはわずか1kBで、MITライセンスです。

prefetchとは

prefetchとは先読みする機能で、3種類あります。

  • Link Prefetching(prefetch)
    リンク先のキャッシュ可能なリソースを先読みします。
  • DNS Prefetching(dns-prefetch)
    リソースに使用されている外部URLの名前解決を先に実施します。
  • Page Prefetching(prerender)
    指定URLのCSSを適用してJavaScriptを実行し、ページ全体の可視バージョンを作成します。

参考: Lightning Fast Websites with Prefetching

Amazon.co.jpやWordPressでは、dns-prefetchが使用されており、他にも多くのサイトで既に使用されています。

Amazonのコード

Amazonのコード

instant.pageでのプリロードは<link rel="prefetch" href="url">で行われます。

ブラウザのサポート

instant.pageはプログレッシブエンハンスメントで、サポートしていないブラウザには影響はありません。

  • Chromeは、<link rel="prefetch">をサポートしています。
  • Firefoxは、<link rel="prefetch">をサポートしていますが、キャッシュされていない場合はページを再ダウンロードします。
  • Safariは、<link rel="prefetch">をサポートしていません。
  • Edgeは、<link rel="prefetch">をサポートしていませんが、Chromeのエンジンを採用する予定です。

instant.pageのデモ

instant.pageのプリロードのデモではありませんが、リンクをホバーしてからクリックするまでの時間を数字で確認できます。

サイトのキャプチャ

instant.page

instant.pageの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして、</body>の上に記述するだけです。

ソースコード

外部ファイル「instantpage.js」のソースコードは、下記の通りです。

sponsors

top of page

©2024 coliss