WordPressの表示速度を速くするためにやったことメモ

ブログのテンプレートを変えて以来、表示速度を測ってみたところ想像していたよりも遅くてビックリしました。。
テンプレートを変更する前はブログの表示速度が体感的に速かった(ように感じて)ため、今まで表示速度を測っていなかったことに猛烈に後悔です。

今回は表示速度を上げるために色々とやったことを備忘録として残しておきます。

現状の速度計測

まずは自分のサイトがどれほどの表示速度かをPageSpeed Insightsを使って調べましょう。

当ブログの修正前の表示速度はコチラです。おせじにも早いとは言えない結果でした。。赤くなってる。

今から紹介する方法をすべて実施したら大分改善されました。
一応キャッシュを有効化する直前で測定しています。
モバイルがまだ黄色いのは今後の課題ですが。。

EWWW Image Optimizerの導入

EWWW Image Optimizerはかなり有名なので説明が不要ではないでしょうか。
こちらのプラグインを導入することで、画像を圧縮してくれるので自分で画像を圧縮する手間が省けます。

もちろん過去にアップロードした画像も一括で圧縮してくれます。
こちらのサイトに詳しく圧縮方法が解説されています。
EWWW Image Optimizer の設定方法と使い方

もしこちらプラグインを導入して、サムネイル画像今まで正方形だったのに長方形になってしまった！というかたはコチラを参考にして表示方法を変えてみてください。
わたしはコチラで紹介されている方法で、無事正方形画像を表示させることができました。
WordPressのアイキャッチ（サムネイル）を好きなサイズの正方形で表示しよう

CDNの利用

こちらCDN(コンテンツデリバリネットワーク)を使うことで大きな画像を小さいトラフィックで送信することが出来ます。
詳しくはコチラのサイトで紹介されています。
WordPressの表示スピード改善と転送量を激減させるプラグインPhotonの紹介

CSNを使うにはWordPressプラグインjetpackをインストールして、wordpress.comへユーザ登録する必要があります。

jetpackのインストール方法はコチラのサイトが詳しく解説してくれています。
CloudFlareよサヨナラ！ WordPressの表示速度が改善するプラグイン「Photon」

WP DBManagerでデータベースの最適化

WordPressのデータベースも使い続けていると重くなってくるので、定期的に最適化するようにしましょう。
ただ効果がすごく出たという人と、あまりでなかったという人に分かれるようです。

わたしは残念ながらあまり効果が出たようにも思えなかったです。
ただデータのバックアップも定期的にとるという意味でもこちらのプラグインは入れたほうよいかと思います。

WP DBManagerの基本的な使い方はコチラのサイトが詳しく解説してくれています。
WordPressのデータを改ざんされる前に！プラグイン「WP DBManager」の使い方

WP DBManagerを使って最適化する方法はコチラのサイトが詳しく解説してくれています。
WordPress の月1メンテナンス。WP-DBManager でデータベースの最適化を行おう！

WP Super Cacheでキャッシュを有効

WordPressは毎回のアクセスで動的にページを生成していますが、こちらのプラグインを使うことで静的なページをキャッシュしておいて毎回動的ページを生成せずに表示速度を速くするというプラグインです。

WP Super CacheはWordPressでもかなり有名なプラグインです。
ネットで調べてみると悪評がチラホラと。。。賛否両論があるので納得したうえでの利用をオススメします。

こちらのサイトに詳しい使い方が解説されています。
wp super cache（WordPressキャッシュ系プラグイン）の設定と、quick cacheとの比較

ネットで調べてみますと、アンインストール時にブログが壊れてしまうという現象が起こるようです。
原因はこのプラグインがwp-config.phpへ勝手に書き込みを行っているからのようです。
わたしはまだ起こっていませんが、アンインストール時はこちらのサイトを参考に手順を進めることをオススメします。
3ステップでWP Super Cacheプラグイン削除時のエラーを復旧させる方法 #WordPress

.htaccessの設定変更でキャッシュを有効

ブラウザキャッシュの設定を設定して、js・css・imgファイルなどの静的ファイルをブラウザ側へキャッシュさせる方法です。
こちらの設定を入れていないとPageSpeedで警告がでます。

こちらのサイトに詳しい使い方が解説されています。
ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法

CSS,HTML,JPを圧縮

これらの静的ファイルを圧縮しても速度は大幅にはかわらないと思うのですが、PageSpeedでは「圧縮した方がいいよ」的な警告もでるので気になる方はやってみてください。

プラグインの設定方法はコチラのサイトが詳しく解説してくれています。
HTML、CSS、JavaScriptを縮小してWordPressブログを高速化する方法（Autoptimizeプラグイン）

不要なCSSを削除

使っていないCSSがあるとPageSpeedが警告をだしてくるので気をつけましょう。といってもこちらも微々たるものだと思います。
私の場合は、テーマ内で使ってもいないのに勝手にGoogle fontsを読込んでいたので削除しました。

function bones_fonts() {
  wp_enqueue_style('googleFonts', 'http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
}

さいごに

表示速度が思った以上に出たので結果としてよかったのですが、対応に半日くらいかかって意外と疲れました。
それにしても今回の速度アップで参考にさせてもらったサイトの記事ってすごく細かく丁寧に書かれていますね。
改めてWordPressの情報量の多さと記事のクオリティの高さはすごないぁと感じました。

次回また時間を作って、スマフォの表示速度ももう少し頑張ってみようと思います！
せめてスマフォも青色へ！
それでは！

Tweet

Pocket