JavaScript

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

GoogleのChrome teamがquiclinkというOSSを公開したので、少し試してみました。

すごくいい感じ:grin:だったので紹介します。

:octocat: GitHub

https://github.com/GoogleChromeLabs/quicklink

68747470733a2f2f692e696d6775722e636f6d2f4e56525a4c48762e706e67.png

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

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

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


基本的な動作

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


  • viewportのリンクを検出する

  • ブラウザがアイドルするまで待つ

  • ユーザが遅いコネクションかどうかをチェックする(またはdata-saverが有効化どうか)

  • リンクをプリフェッチする


使い方

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

<script src="dist/quicklink.js"></script>

<script>
quicklink();
</script>

まじか。。。簡単すぎる:open_mouth:

もちろん、APIでtimeoutpriorityなど細かい設定をすることも可能です。 詳細は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です。

スクリーンショット 2018-12-12 18.50.03.png

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

プリフェッチ3.jpg

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

プリフェッチ4.jpg

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

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


まとめ

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

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