【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pjax（非同期画面遷移）』を使って、高速化する方法を取り上げます。

プラグインを使いましたが、やや難点があるようです。そのような点を解決して、プラグインで実装してみましょう。

Pjaxとは？どんなメリットがあるの？

Pjaxとは、『非同期画面遷移』のことです。たとえばこのサイト（読んどけコラム）で使った場合、次のような通信のしかたをします。

具体的にいうと、次のページに移動するときに
『新しいurlに変える・メタ情報（titleやdescription）を新ページに・コンテンツ部分をコンテンツ部分を読み込む』
『ヘッダーのロゴやメニュー・サイドバー・フッターなどは読み込まずそのまま』
というような通信をします。

読み込むパーツが減るために、（１ページ目は普通に読み込む）２ページ目以降での通信量の削減やページ読み込み速度アップという効果があります。また、フレームで作ったサイトとは異なり、ヘッダーやurl情報はページに応じてきりかわり、下層ページに直接アクセスされてもメニューなどを表示できます。

（＊フレームでメニューを表示させていると、下層ページにユーザーが直接検索エンジンから来た場合、メニューが表示されず、ユーザーが迷子になる可能性があります。これがフレーム形式のwebサイトが、現在非推奨とされている理由です。）

wordpress　Pjax（非同期画面遷移）プラグイン例１：wp-pjax

【wp-pjaxページ】
https://ja.wordpress.org/plugins/wp-pjax/

ここでは、『wp-pjax』というプラグインを使って、wordpressサイトにPjaxを取り入れてみます。心配なのが『利用ユーザー数が少ない（調べたとき解決策が出てきにくい）・最終アップデートが数年前（最新のwordpressやテーマと相性が悪いと、エラーが出る）』点です。

テーマhestiaに、ローカル環境でつけてみる（ヘッダーにエラーメッセージ）

心配なときは、ローカル環境で試せばokです。とりあえず、ローカル版wp（4.9）に、hestiaテーマという状況で、『wp-pjax』プラグインを導入しました。通常はこのような表示になりますが・・・

ヘッダー内に、がっつりエラーメッセージが表示されてしまいました。古いorユーザー数が少ないプラグインで怖いのは、これです。（ただし、ファイルの何行目かがわかったので、プラグインのphpファイルを改造して、対処できそうです。）

このサイト（読んどけコラム）につける＆エラー対処

このサイト（読んどけコラム・wpのバージョンは4.9.5）に、『wp-pjax』プラグインをつけてみたところ、やはりヘッダーにエラーが出てしまいました。そこでプラグインの構成ファイル（おそらくjavascriptを出力するような部分）を少し改造して・・・

直しました。

あと、下にpjaxマークみたいなのが出ますけど、たぶんアクティブになっていることだと思います。toggleメソッドですかね？

wordpress　Pjax（非同期画面遷移）プラグイン例２：Preload & Pjax Faster Page Load

【Preload & Pjax Faster Page Loadページ】
https://ja.wordpress.org/plugins/wp-preload-pjax/

2個目のpjaxプラグインは『Preload & Pjax Faster Page Load』を使ってみます。こちらは最終更新が３年前でしたが、ややユーザー評価が気になるところ（だいたい原因はわかりました）。

読んどけコラムにつけた例～２ページ目のメニュー開閉用javascriptが効かない

読んどけコラムに『Preload & Pjax Faster Page Load』をつけた例です。ＰＣビューなどは特に問題がありませんでしたが、スマホ時に出るアコーディオンメニュー開閉に、javascriptを使用していたところ、２ページ目以降で、メニュー用などの追加javascriptが効かなくなってしまいました。

ユーザーレビュー内（英語です）にも、『javascriptでつけた、topまでスクロールするボタンが効かなくなった』などの事例が報告されていました。

テーマhestiaは大丈夫（javascriptじゃなくてcssだから）&重めなのに高速

テーマhestiaに『Preload & Pjax Faster Page Load』をつけた例です。こちらはスマホメニューはjavascriptでなかったので（ＣＳＳ）特に問題なく動きます。現在ではクリックで開くメニューも、ＣＳＳだけで実装できるようになっているのでご検討ください。

javascriptでの不具合さえどうにかなれば、重めのテーマ（ここのトップページが重い）でもかなり速く表示してくれました（ブログ部分からトップに移るときも、ほぼ一瞬で表示）。

プラグインを使わない場合は『Barba.js 』がおススメ

wordpressで、プラグインを使わないでPjax（非同期画面遷移）を行うばあいは、『Barba.js 』が実装事例が多いのでおススメです。テーマに手を入れるため、やや難易度が高くなりますが、『狙ったところだけ非同期』というのが行いやすくなります（管理人も、プラグインの次は、これでやってみようと思いました）。

http://barbajs.org

あとがき・まとめ

Pjax（非同期画面遷移）をwordpresにつけてみると、２ページ以降が圧倒的に高速化できます。しかし、プラグインによっては『エラーメッセージが出る』『メインで読み込んだもの以外のjavascriptが効かない』と言う状況が出てしまいました。

『非同期にする場所を指定できる』『ＰＨＰファイルを改造してカスタマイズできる』『cssなどで、javascriptが効かない代替案を出せる』という場合は、導入してもよいといえるでしょう（少しハードルが高いし、エラーが出る件もあるので、必ずwordpressに詳しい人と相談しながら行ってください）。