こんにちは。もんしょー（@sima199407）です。
今回は、WordPressの高速化を考えて行きたいと思います。
このブログもWordPressを使っているのですが、最近Googleさんのアップデートにより少しアクセスが落ちた感じになってます。
そこで対策を考えていこうということで分析をしていたところ、
「どうやら、ページの表示スピードが遅いみたい。。。」
ということがわかりました。
有名な「Page Speed Insights」を使ってみて以下のような結果に。
モバイルファーストと言われる時代に「モバイル:0」はさすがにやばいなと。
そこで見つけたいくつかの問題点を一つずつ改善していこうと思います。
今回注目する項目はこちら
・オフスクリーン画像の遅延読み込み
・レンダリングを妨げるリソースの除外
・サーバーの応答時間を短縮する
それではさっそくみていきましょう。
オフスクリーン画像の遅延読み込み
[box04 title="どういった項目？"]オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。[/box04]
これが一番効果あったと感じてます。しかも簡単です。
結論、「BJ Lazy Load」というプラグインを使って画像の読み込みを遅らせましょう。
なぜ必要なのか？
Page Speed Insightsはトップページで判断されるので、そこの画像の読み込みが少ないとそれだけ早く表示できます。
しかし、画像がないトップページなんてユーザー的には見にくいかと思います。
そこで以上のプラグインが必要になります。
やり方
「プラグイン」→「新規追加」で「BJ Lazy Load」と検索しましょう。
※Lazy Loadはいろんな種類がありますが、試した結果これが一番効果がありました。
インストールと有効化をしたら設定は特になく終了です。
参考：【2019年版】WordPressを高速化する9つの方法｜プラグインや注意点も紹介
レンダリングを妨げるリソースの除外
[box04 title="どういった項目？"]ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。[/box04]
つまり、CSSやJSの読み込みの最適化することを判断する項目です。
記述にある「インライン化」とは、
普段、CSSは以下のように書かれています。
img {
display: block;
width: 100%;
}
インライン化すると１行で収めるように書きます。
img { display: block; width: 100%;}
こうすることで読み込む行数を減らしてページの表示を高速化します。
こちらは方法はいろいろありますが、お手軽なのは、「Autoptimize」というプラグインを使用することなのでこちらを使用して改善しようと思います。
Autoptimizeのやり方
プラグインをインストールしたあとに有効化して、「設定」→「Autoptimize」で詳しく見ていきます。
右上にある「高度な設定を表示」をクリックします。
※ここではHTMLとCSSのみの最適化を行います。
JSは最適化すると挙動の不具合が確認されているようで、
自己責任でお願いいたします。
ポイントは、
CSSの
「すべての CSS をインライン化」に✔
その他オプションの
「連結されたスクリプト / CSS を静的ファイルとして保存」に✔
【チェック用】
こちらのような設定にしてみましょう。
参考:【2018年版】重いWordPressを高速化する方法
サーバーの応答時間を短縮する
[box04 title="どういった項目？"]その名の通り、サーバーからの反応までの時間を判断[/box04]
といった項目です。
サーバーの性能に少し左右される部分かなと。
解決策
これは、WordPressではなく、サーバーのお話になります。
僕はエックスサーバーを使っているのですが、先日「Xアクセラレータ Ver.2」というものが発表されてこれが役に立ちます。
表示スピードは大事ですね。早速行いました！
PHP7.2に変更する必要があるので、「PHP」→「PHP Ver.切替」で設定変えれば適応できますね。 https://t.co/tcHegRb9bS
— もんしょー?webが主食な人 (@sima199407) 2019年4月9日
設定方法
なので、Xサーバーのインフォパネルの「サーバー管理」に入り、「高速化」をする。
「Xアクセラレータ Ver.1」→「Xアクセラレータ Ver.2」に変更。
「Xアクセラレータ Ver.2」では、すでに提供中の高速化機能「Xアクセラレータ」に、PHPプログラムの処理速度がキャッシュなしで最大20倍（※1）、WordPressでは最大10倍（※2）となる、新たなPHP高速化機能を追加しています。
WordPressの処理速度が最大10倍になるってすごい。。
※Xアクセラレータ Ver.2 を有効化するためには、PHP 7.2に変更する必要があります。
こういったエラーが出たので、PHPのバージョンを7.2に変更して、
再度、Xアクセラレータ Ver.2に変更を行い無事に完了。
自分のサイトを見てみると、以下のエラーが表示
Warning: count(): Parameter must be an array or an object that implements Countable in /home/sho200/simablog.net/public_html/wp-content/plugins/wordpress-ping-optimizer/cbnet-ping-optimizer.php on line 533
調べてみると、
ping-optimizerのプラグインの修正が必要。
〜public_html/wp-content/plugins/wordpress-ping-optimizer/cbnet-ping-optimizer.php
if (is_null($this->cbnetpo_future_pings))
$pingCount=0;
else
$pingCount = $this->cbnetpo_future_pings ? count( $this->cbnetpo_future_pings ) : 0; //ここを修正
これでエラーが解消されました。
【追記】※エラーが何度か出てくるのでこのプラグインを外しました。影響は少ないので、気になる方はぜひ。
今回の改善の成果はこちら
改善前
モバイル
PC
| モバイル | 0 |
| PC | 27 |
改善後
モバイル
PC
| モバイル | 32 |
| PC | 40 |
まだまだ遅いですが改善はされました。
以前のPage Speed Insightsの基準では、９０点以上になっていたのですが、
２０１８年の11月ごろの新方式で一気に下がった感じですね。
とりあえず評価を上げることも大事なんですが、一番は「ユーザーが見やすく、欲しい情報があるか」ということだと思いますのでそこを忘れずに運営できればと思います。