Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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を超簡単に向上させることができそうですね!

szk3
My interests are AWS/GCP/VSCode/Node.js/TypeScript/golang/rust. My posts represent the views of the individual, not the official position of the organization.
lifull
日本最大級の不動産・住宅情報サイト「LIFULL HOME'S」を始め、人々の生活に寄り添う様々な情報サービス事業を展開しています。
https://lifull.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away