サイトの高速化はページ回遊率や離脱率の改善に非常に効果的なので、色々と思考錯誤している人は多いかと思います。特にWordpressサイトを運用しているとページ数の増加に伴い著しく速度が落ちてくるので悩んでいる人も多いのではないでしょうか？
同じように私も悩んでいましたが、一つの改善手段を見つけたのでシェアしたいと思います。また、それに伴うデメリットも解説していきます。
この記事の目次
Pjaxライブラリ『Barba.js』を導入すればサイト・ブログが爆速化する！
その改善手段とは『Pjax』と呼ばれる技術を活用することです。
PjaxとはJavascriptを使い動的にサイトの表示を書き換える『Ajax』という仕組みをより実用的にしたものです。ざっくり言うとこんな感じです。
そのPjaxを手軽に導入するJavascriptライブラリに『Barba.js』というものがあり、今回実際に導入してみたんですがまさに異次元レベルの高速化が実現しました。
実証！当ブログにも Barba.js を導入済み
ちなみに今あなたがご覧になっている当ブログにも Barba.js を導入済みです。
2ページ目以降の表示が1秒以内どころかほぼ一瞬になっているかと思います。
当ブログはWordpressで運用していて、以前まではページが表示されるまで3～5秒程度と結構ストレスでしたが今ではノンストレスです。正直ここまで爆速化出来るとは思っていなかったので嬉しい誤算ですね。
Pjaxの特徴・メリット
Barba.jsを始めとするPjaxライブラリを導入すると爆速化するにはPjaxの特徴が関係しています。
通常のページ遷移ではページ全体を読み込むわけですが、Pjaxでは必要な箇所だけ読み込むので爆速化するんですよね。多くのサイトではヘッダーやフッターは全ページ共通なので、こういう部分の読み込みを省略することが出来るわけです。
更に、Barba.jsでは『先読み機能』が実装されています。リンクにマウスオンした時点で次のページをロードする為、体感速度がさらに向上するという『鬼に金棒』状態となっているんです。
これらを踏まえてPjax導入のメリットを紹介します。
- 必要部分だけを読み込み、更に先読みすることで圧倒的高速化が可能
- 一般的なサイトでも、Wordpressのようなブログでも導入可能
- WordPressの場合はキャッシュプラグインと併用すればさらに速い
- 回遊率・離脱率が改善されSEOにも効果的
こんな感じで、複数ページを回遊させたい場合に大きな効果を発揮します。よく読まれるサイトはSEO的にも効果が見込めるハズです。
Pjaxのデメリット
続いてPjaxを導入するデメリットを紹介します。まずはざっくりと箇条書きで。
- 高速化するのは２ページ目以降。なので平均ページビューが低いサイトではあまり意味が無い
- Javasriptライブラリ、Wordpressプラグインの実行タイミングを変更する必要がある
- アナリティクスの2ページ目以降の集計にはスクリプトを実行する必要あり
- グーグルアドセンス広告が使えない
こんな感じですが、導入する最低条件としてJavascriptのイベント周りの知識は必要です。
また、JavascriptライブラリやWordpressプラグインの実行タイミングを変更する必要があるのですが、例えば window.onload のタイミングで実行するスクリプトは、 Barba.Dispatcher.on(‘newPageReady’,function(){~}) といったイベントで動作させる必要があります。
また、アナリティクスの集計も標準のコードだけでは1ページ目しか集計されないので、2ページ目以降はAPIを活用して集計する必要があります。
個人的に一番デメリットに感じたのがグーグルアドセンスが使えない事ですね。アドマネージャーを使えば利用可能みたいですが、ネットで得られる情報が少なすぎて私にはハードルが高くて断念しました…( ;∀;)
Barba.jsのダウンロードと設定方法
Barba.jsは以下のサイトからダウンロードすることが可能です。
また、今回導入するにあたって参考にさせていただいたサイトを紹介します。
Barba.jsの基本設定
まず、Barba.jsの基本的な設定には株式会社 エヴォワークスさんの記事を参考にさせていただきました。
とりあえずBarba.jsを動作させるならこちらの内容だけでOKです。
Barba.jsを使ってシームレスな画面遷移を実装する – 株式会社 エヴォワークス
Barba.jsでのアナリティクスやメタタグ書き換えの設定方法
2ページ目以降もアナリティクスで集計する設定や、メタタグやOGPタグも正常に反映させるにはWill Styleの記事で紹介されているコードをコピペすればOKです。
Barba.jsを使うときに設定しておくと便利なスニペット – Will Style
Barba.jsでグーグルアドセンスを利用する
LeapInさんの記事で『アドマネージャー』を使うことでアドセンス広告をPjaxサイトでも掲載出来る事を知りました。
ただ、アドセンスのように手軽にはいかないので私にはハードルが高くて断念…( ;∀;)
Barba.js(Pjax)でGoogle Adsenseを遷移毎に表示する方法 – LeapIn
使いどころを見極めてPjaxを導入すれば絶大な効果がある！
- とにかく圧倒的な高速化はPjaxの何よりもの魅力です。
- 導入する際の制限だったりハードルは有りますが、使いどころを見極めれば絶大な効果が見込めます。
- サイトのスピードが遅くて悩んでいる人は是非試してみてくださいね(・∀・)
コメント