wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@SS_mshpです。

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

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

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

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

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

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

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

wordpress Pjax(非同期画面遷移)プラグイン例1: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(非同期画面遷移)プラグイン例2: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』を使ってみます。こちらは最終更新が3年前でしたが、ややユーザー評価が気になるところ(だいたい原因はわかりました)。

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


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

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

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


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


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

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

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

http://barbajs.org

あとがき・まとめ

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

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト高速表示, wordpressプラグイン(拡張)情報 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【WPプラグイン】WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPをどうぞ

今回は、以前すこしDJの練習をしていた管理人が、webサイト(wordp …

wordpressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】

今回は、wordpressで溜まりすぎるとデータベースを圧迫するリビジョ …

【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定

今回は、WordPressサイトに、googleアカウントがある人ならみ …

【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)

今回は、サイト表示速度に関わるキャッシュ話題です。 以前ロリポサーバーで …

【wordpressで教室・個別相談・サロン予約受付】プラグインEasy Appointmentsの設定・サイト実装方法を詳しく解説

今回は、特定の形態のビジネスで、『カレンダーつき予約フォームで、お客さん …

【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック

今回はサイトを高速表示するときに重要なポイントといえる『キャッシュ活用』 …

【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで

今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだ …

【PHPでwpプラグインを改造】all in one seoで、og:descriptionを書かなかったときに、文章が全部出力されてしまうのを直したい

今回は、ワードプレスでよくつかわれるプラグイン『all in one s …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【phpでWPプラグイン改造】What’s New Generatorで、記事タイトル文字数を設定する

今回は、ワードプレスサイトでよく使われる更新情報表示プラグイン『What …

【WPプラグイン】ページ読み込み画面(ローディングアニメ)をサクッと実装できるWP Smart Preloader

今回は、wordpressのサイトで、ページ読み込み時の画面(ローディン …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …