激重WordPressも爆速に!? Google先生のQuicklink │ Webty Staff Blog

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

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

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

1. Quicklinkとは
2. デモ
3. 仕組み
4. サイトへの導入
5. 拡張機能・プラグイン
6. まとめ

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のプラグインも登場しています．

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

まとめ

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

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

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

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

Quicklinkとは

デモ

仕組み

サイトへの導入

拡張機能・プラグイン

Google Chrome

WordPress

React

Angular

Vue

まとめ

リクルート

お問い合わせ