激重WordPressも爆速に!? Google先生のQuicklink

激重WordPressも爆速に!? Google先生のQuicklink

どうもこんにちは塚本です!

本日は先輩に「爆速w」と教えてもらったQuicklinkの紹介をしたいと思います.

WordPressに入れてみても「確かに速いw」っていう挙動なんで面白いですw
(サイトによってだいぶ変わりますが…)

Quicklinkとは

我らがGoogle先生の GoogleChromeLabs がお作りになられたUX向上の為のプラグインです.

Instant next-page navigations with prefetching の通りで,
このプラグインを入れることによって,
ビューポート内にあるリンクのURLを自動的にプリフェッチしていきます‥.

トップページの内容を読んでる間に裏で,
他の下層ページを読み込みにいっているということですね〜

デモ

デモサイトはコチラになります.
内部リンクがいくつかあるサイトですが,Chromeのデベロッパーツール等でNetworkを見てみると,,

Quicklinkが他ページをプリフェッチしにいっていることが分かると思います.

仕組み

※ 画像は本家から拝借しております

Quicklinkの動きとしては,

① ビューポート内のリンクを検出する
② ブラウザがアイドル状態になるまで何もしない
③ ユーザが低速の通信速度で接続していないかを確認
④ データセーバーが有効になっているかどうかを確認
⑤ リンクのURLをプリフェッチしていく

という流れになっています.

サイトへの導入

<script src="//cdnjs.cloudflare.com/ajax/libs/quicklink/2.0.0-alpha/quicklink.umd.js"></script>
<script>
window.addEventListener('load', () => {
  quicklink.listen();
});
</script>

これだけです.
流石Google先生…シンプルイズベスト…。

拡張機能・プラグイン

サイトへの導入が不安な方や,
難しい方向けにChromeの拡張機能やWordPressのプラグインも登場しています.

Google Chrome

https://chrome.google.com/webstore/detail/quicklink-chrome-extensio/epmplkdcjhgigmnjmjibilpmekhgkbeg

WordPress

https://wordpress.org/plugins/quicklink/

React

https://github.com/HOUCe/react-quicklink-component/

Angular

https://github.com/mgechev/ngx-quicklink/

Vue

https://nuxtjs.org/api/components-nuxt-link/

特にChromeの拡張機能は手軽に体験できて良いかしれませんね!

まとめ

Quicklinkは本体も超軽量に作られています.
「次のページナビゲーションを最大1秒高速化し,コンバージョンを最大10%改善します」という見出しも嘘じゃないかも〜という感じです.

ただ,WordPressは基本的に重いので,これを高速化しようとすると
もっと他の部分のダイエットが効果的かなと思われます.

まだα版とのことなので今後のアップデートにも期待です☆