quicklinkで超簡単にページロードを高速化する

quicklinkで超簡単にページロードを高速化する:

GoogleがquiclinkというOSSを公開したので、少し試してみました。
すごくいい感じだったので紹介します。

GitHub
https://github.com/GoogleChromeLabs/quicklink

quicklinkは、画面表示領域のリンクをプリフェッチしてくれるモジュールです。

遷移が早くなるのでUXの向上が期待できます！

この記事では、Githubリポジトリ内のデモhtmlを使って挙動を確認するまでを紹介します。

基本的な動作

動きとしてはこんな感じらしいです。

• viewportのリンクを検出する
• ブラウザがアイドルするまで待つ
• ユーザが遅いコネクションかどうかをチェックする（またはdata-saverが有効化どうか）
• リンクをプリフェッチする

使い方

最も簡単な例だと、quicklinkを読み込んで、関数をコールするだけです。

<script src="dist/quicklink.js"></script> 
<script> 
quicklink(); 
</script> 

まじか。。。簡単すぎる

もちろん、APIでtimeoutやpriorityなど細かい設定をすることも可能です。 詳細はREADMEを参照してください。

インストール

はい、楽勝ですね。

$ npm install --save quicklink 

デモを試す

Githubから持ってきたソースに移動して、yarnでnode_modulesを取得します。

$ cd /path/to/quicklink 
$ yarn install 
yarn install v1.12.3 
[1/4] ��  Resolving packages... 
[2/4] ��  Fetching packages... 
[3/4] ��  Linking dependencies... 
[4/4] ��  Building fresh packages... 
$ npm run -s build 
(node:12722) Warning: N-API is an experimental feature and could change at any time. 
Build "quicklink" to dist: 
        741 B: quicklink.js.gz 
        601 B: quicklink.js.br 
        737 B: quicklink.mjs.gz 
        604 B: quicklink.mjs.br 
        797 B: quicklink.umd.js.gz 
        661 B: quicklink.umd.js.br 
✨  Done in 746.23s. 

npm start して、serverを起動します。

$ npm start 
 
> quicklink@0.1.1 start /path/to/quicklink 
> http-server . 
 
Starting up http-server, serving . 
Available on: 
  http://127.0.0.1:8080 
  http://10.XX.XX.XX:8080 
Hit CTRL-C to stop the server 

デモ用のhtmlにアクセスします。ブラウザを直接叩いても大丈夫です。

$ open http://127.0.0.1:8080/demos/basic.html 

で、こんな画面が表示されればOKです。

画面をスクロールすると、viewportにLink 3が現れ、そのリンクをプリフェッチしていることがわかります。

更にスクロールすると、Link 4もプリフェッチされたのがわかります。いい感じすぎる。

Initiatorを見るとわかるのですが、内部的にはServiceWorkerを使っていますね。

また、自分でデモを動かして確認するのがめんどくさい人は、WebPageTestで動きを確認することができます。

まとめ

Google謹製のquicklinkを紹介しました。

使い方も簡単だし、導入コストも低そうなので、これであなたのサイトのUXを超簡単に向上させることができそうですね！