前回ご紹介したPageSpeed Insightsの分析結果を受けて、WordPressを高速化したいと思います！
課題に挙げた通り、WordPressを高速化するために、CSSやJavaScript、画像サイズの見直しを行いました。
| ページの読み込み時間には、SEOの観点からも非常に重要視されています。特に昨今では、スマホでWEBサイトを閲覧する機会が多くなっているため、利用者が待ち時間にイライラしたり、パケット代を気にするようにもなりました。まずは、自分のサイトの読み込みにどのく... PageSpeed InsightsでWebページの読み込み時間を分析する - Minory |
WordPress高速化プラグイン
まず、始めに手を付けたのは、不要なプラグインの除去です。
その上で、WordPressを高速化するために以下の2つのプラグインを導入しました！
EWWW Image Optimizerで画像を圧縮
ページを読み込む際に、1番重たいのは何と言っても画像です。
画像1枚あたり数十〜数百KBはあると思います。
「EWWW Image Optimizer」プラグインは、新規にアップロードする画像はもちろんのこと、今までに保存した既存の画像も、画質を劣化させることなく圧縮してくれます！
特に、PNG形式の圧縮率は高く、画像によっては半分近くまでサイズを削減することができます！
使える方は使った方が良いかと思います。
WP Fastest Cacheでページをキャッシュ
参照したページの情報を保持して高速化してくれるキャッシュ機能を利用するプラグインです。
キャッシュを利用する場合、少し問題があるので悩みましたが、比較的設定が少なく簡単でトラブルが少なそうな「WP Fastest Cache」プラグインを選びました。
その他の有名なプラグインは、無料かつ高度な設定ができますが、初心者にはこちらをオススメします！
| Wordpressのページキャッシュプラグインの導入としては、最も入りやすいかと思われる「WP Fastest Cache」プラグインのインストール方法や、設定方法の紹介です。 初心者にも扱いやすいWordPressキャシュプラグイン「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」が原因ではないかと思われます。
まだまだ改善の余地はあると思いますので、有益な情報をお持ちでしたらコメントをよろしくお願い致します！
- Original:https://minory.org/wordpress-speed-up.html
- Source:Minory
- Author:管理者