【WordPress】サイトの動作速度を向上させた話

はじめに

　自分のホームページのスピードを診断してくれる「PageSpeedInsitghts」というサイトがある。
　このサイトはGoogleが提供しているもので、遅いと評価されたサイトは検索結果の上位にあがりにくいという問題がある。

計測してみた

　さっそく測定してみた。
　100点満点中モバイルサイトが19点、パソコンサイトが52点と、惨憺たる結果だった。

　写真ポートフォリオサイトがゆえに、写真を多く掲載しており、評価は低いだろうと予想はしていたが、これは予想以上に悪かった。
　遅くなる原因と改善方法は提示してくれる。
　特にスコアに影響する問題として指摘されたのは、「レンダリングを妨げるリソースの除外・使用していないCSSの遅延読み込み」だ。

　なるほど、さっぱりわからん。何が悪いのか調べていたが、どうやらcssやjavascriptが重いらしい。

改善してみた

　更にWebで色々と調べていくうちに、以下のWordpressプラグインが有効らしい、ということがわかった。

　①CSS最適化プラグイン　Autoptimize
　②JavaScript最適化プラグイン　Async JavaScript
　③ 画像圧縮プラグイン　EWWW Image Optimizer

　どのように最適化するのか原理はよく分からないので、トライ＆エラーで進めていった。試していくうちに動作がおかしくなったりするので、元に戻せるよう事前のバックアップは必須だ。ちなみにこちらの記事を参考にしてほしい。

【WordPress】BackWPupのバックアップデータをコンソールからリストアした話

再度測定してみた

　少しずつ設定を変更しては動作確認、測定を重ねていった結果、、、、

　モバイル：15点　→　83点
　パソコン：55点　→　97点

　ものすごくスコアが上がった！

　以下、変更点を記載するが内容を理解していないので、参考までにどうぞ。

■CSS最適化プラグイン　Autoptimize
　※Javascriptも修正できるのだが、JSは別プラグインに任せるためOFF
・ CSS オプション　->ON
・ CSS コードを最適化 ->ON
・ Aggregate CSS-files? ->ON
・ CSS のインライン化と遅延 ->ON

　なお、下記cssファイルは僕の環境ではメニュー動作がおかしくなるため除外した。
・ Autoptimize から CSS を除外 ↓
　wp-content/themes/photek_tcd024/photek.css

■Async JavaScript
Enable Async JavaScript
Enable Async JavaScript?　->ON
Async JavaScript Method ->Defer
jQuery ->Async

■ EWWW Image Optimizer
　Jpeg画像を次世代jpeg2000に変換(高圧縮)してくれるプラグイン。
　このサイトは画像データが多いため少しでもデータを綺麗なまま圧縮したい。