quicklinkを試してみる

概要

• quicklinkというライブラリを試してみます
• https://github.com/GoogleChromeLabs/quicklink

quicklinkとは？

• 公式サイトには以下のように書いてあります

Faster subsequent page-loads by prefetching in-viewport links during idle time

• 表示しているページ上にあるaタグのリンク先を事前に取得しておくことで、ページ遷移を高速化するというものです

検証

• 試してみました
• 再現手順は以下のとおりです

雛形生成

• 今回はexpressを使います

mkdir quicklink-sample
cd quicklink-sample
yarn init -y
yarn add express

• 必要なファイルを作成していきます

app.js

var express = require('express');
var app = express();

app.get('/hello', (req, res) => {
  res.sendFile('hello.html', { root: `${__dirname}/public/` });
});

app.get('/world', async (req, res) => {
  await new Promise(resolve => setTimeout(() => resolve(), 3000));
  res.sendFile('world.html', { root: `${__dirname}/public/` });
});

app.listen(8080, () => console.log('app start'));

public/hello.html

<h1>Hello</h1>
<a href="./world">next</a>

world.html

<h1>World</h1>
<a href="./hello">next</a>

ファイルの説明

• /helloにアクセスするとpublic/hello.htmlが返されて画面にHelloと表示されます
• /worldにアクセスするとpublic/world.htmlが返されて画面にWorldと表示されます
  • ただし3000msのスリープを入れているのでレスポンスは3秒待たされることになります
  • quicklinkによってキャッシュされる場合の効果をわかりやすくするためにスリープを入れています

動作確認

• 以下のコマンドで起動

node app.js

• http://localhost:8080/helloにアクセスしてみる
• nextをクリックするとおよそ3秒後に次のページに遷移しています

quicklinkを適用する

• hello.htmlにquicklinkを適用します

public/hello.html

<h1>Hello</h1>
<a href="./world">next</a>
<script src="https://unpkg.com/quicklink@1.0.0/dist/quicklink.umd.js"></script>
<script>
  quicklink();
</script>

動作確認

• アプリを再起動してhttp://localhost:8080/helloにアクセスしてみる

• /helloにアクセスすると裏側で/worldへアクセスしていることが分かります
• そしてリンクをクリックすると3秒待つことなく即時に遷移できいます
• このようにして事前にキャッシュしておくことで高速な遷移を実現できています

まとめ

• quicklinkを使うと簡単にページ遷移の高速化を実現することができる