前回ご紹介したPageSpeed Insightsの分析結果を受けて、WordPressを高速化したいと思います！
課題に挙げた通り、WordPressを高速化するために、CSSやJavaScript、画像サイズの見直しを行いました。
WordPressを高速化するプラグインもご紹介しますので、ぜひ参考にしてみてください！
WordPress高速化プラグイン
まず、始めに手を付けたのは、不要なプラグインの除去です。
その上で、WordPressを高速化するために以下の2つのプラグインを導入しました！
EWWW Image Optimizerで画像を圧縮
EWWW Image Optimizer
EWWW Image Optimizerページを読み込む際に、1番重たいのは何と言っても画像です。
画像1枚あたり数十〜数百KBはあると思います。
「EWWW Image Optimizer」プラグインは、新規にアップロードする画像はもちろんのこと、今までに保存した既存の画像も、画質を劣化させることなく圧縮してくれます！
特に、PNG形式の圧縮率は高く、画像によっては半分近くまでサイズを削減することができます！
余談ですが、ページを読み込んだ後に画像を遅延表示する「Lazy Load」と言うプラグインも有効なようですが、著者のブログとはなぜか相性が悪く、モバイルページを表示した際に画像が消えてしまいます。
使える方は使った方が良いかと思います。
WP Fastest Cacheでページをキャッシュ
WP Fastest Cache
WP Fastest Cache参照したページの情報を保持して高速化してくれるキャッシュ機能を利用するプラグインです。
キャッシュを利用する場合、少し問題があるので悩みましたが、比較的設定が少なく簡単でトラブルが少なそうな「WP Fastest Cache」プラグインを選びました。
その他の有名なプラグインは、無料かつ高度な設定ができますが、初心者にはこちらをオススメします！
自信がある方は別のプラグインを試してみても良いかもしれません。
CSSを見直す
PageSpeed Insightsの分析結果で1番重かったCSSは、フォントを読み込んでいるCSSでした。
当然と言えば当然ですね。
実は当ブログ、ロゴに使用しているフォントの他、ブログ全体にGoogle製のNoto Sansというフォントを使用していました。
ご存知の通り、フォントファイルは1つ1つのサイズが大きいので、それを複数読み込むとなると、読み込みに時間がかかってしまいます。
JavaScriptを見直す
JavaScriptは、特にheadタグ内で読み込むのはあまり良くないようです。
とりあえず、当ブログで使用していたPace.jsというページ読み込み時にプログレスバーを表示するJavaScriptを廃止しました。
あとは、できるだけJavaScriptをbodyの終了タグ直後に記載するようにしました。
改善した結果
以上の対策をして、再度PageSpeed Insightsで分析してみたところ、パソコンでは確かに改善が見られましたが、モバイルに関してはあまり改善されませんでした。
| 対策前 | 対策後 | |
|---|---|---|
| モバイル | 2点 | 9点 |
| パソコン | 9点 | 28点 |
予想では、モバイル表示用の「WPtouch Mobile Plugin」が原因ではないかと思われます。
まだまだ改善の余地はあると思いますので、有益な情報をお持ちでしたらコメントをよろしくお願い致します！
コメント