【wordpress】ワードプレス高速化まとめ

2015年6月9日WEB制作, wordpress

過去2回wordpressの高速化で色々思索し、試した結果、TOPページ1秒前後、記事ページで平均で2秒前後の表示速度を出していましたが、今回テーマをSimplicityに変更したので、また高速化の手法を色々と試してみました。

結果的には、キャッシュ無し状態でTOPページ及びカテゴリーページ等の、記事ページ以外は平均して1秒以内の表示速度。キャッシュありでの表示速度では、10ミリ秒から200.300秒ほど。

記事ページでは、文字数や画像を良く使っている記事とかにもより変動がありますが、平均するとキャッシュ無しだと1.5秒前後、キャッシュありで、1秒前後の表示速度を達成しました。

今までの高速表示において試した事をまとめてご紹介します。
wordpressの高速化対策のご参考になれば幸いです。

各種速度測定サイトの評価

高速化で実践した内容をご紹介する前に、各種計測サイトでの計測結果をご参考までに。

実際の体感速度も感じたかったので、計測に使ったのは、Web担当者Forum版 ページ速度分析ツールです。また冒頭で述べていた表示速度もこちらのものを使い計測しました。

計測の環境・条件
拡張機能のJS読み込み速度等も、このツールでは影響されてしまうのでプライベートブラウジングで計測
キャッシュ無し状態、キャッシュ無し状態での計測
その他の表示速度計測サイトは以下のサービスを使用
PageSpeed Insights
Website speed test – Pingdom
GTmetrix

記事冒頭のアイキャッチ画像が、キャッシュあり状態の記事ページ以外の表示速度です。
最高速度で69ミリ秒、爆速ですね。

次にキャッシュ無しの記事ページ以外、表示記事数は20件表示です。
表示速度は932ミリ秒、なんとか1秒以内達成です。

記事ページ以外のキャッシュ無し表示速度
記事ページ以外のキャッシュ無し表示速度

次に肝心の記事ページの表示速度。ブログは記事が命なのでここの表示速度が肝心です。
計測した記事ページは、画像数と文字数が当ブログでの平均値辺りのページを使い計測しています。

キャッシュ無しで計測、1.27秒。1秒以内は達成出来ませんでした。

記事ページ表示速度
記事ページ表示速度

キャッシュありでの計測、
0.88秒、なんとか1秒以内での表示達成です。

記事ページキャッシュあり表示速度
記事ページキャッシュあり表示速度

各種ページ表示速度測定サイトです。

測定ページはTOPページです。

PageSpeed Insightsの測定結果

PageSpeed Insights測定結果PC
PageSpeed Insights測定結果PC
PageSpeed Insights測定結果モバイル
PageSpeed Insights測定結果モバイル

Pingdom Website speed testでの測定結果

採点結果は96点、中々満足いく結果になりました。
ロードタイムが、2.40秒なのが、ちょっと残念、海外サーバーからだから遅いのかな?

Pingdom測定結果
Pingdom測定結果

GTmetrix | Website Speedでの計測結果

ダブルAスコアで、ロードタイムも1.59秒と満足。

GTmetrixの計測結果
GTmetrixの計測結果

【高速化対策】テーマの変更

今までFullbyという無料のワードプレステーマを使っていたのですが、最近話題のSimplicityに変えました。こちらはSEOにも最適化された内部構造の上、ページ表示速度も速くなるともっぱら噂だったので変更しました。

SEOにも強い!簡単にカスタマイズが出来るwordpressの無料テーマ【Simplicity】が凄すぎたので乗り換えてみた。

Simplicityのカスタマイズ

Simplicityはそのまま導入した状態でも十分早いのですが(記事ページ平均2~3秒ほど)、少しでも早くしたいので以下の点をカスタマイズしました。

style.cssで@importを使っているものを一つにまとめた
使わないスタイル指定を排除
style.cssの圧縮
javascript.jsの圧縮
SNSボタンをオリジナルボタンに変更

Simplicityではオプションで選べる項目のCSSが何種類か、style.css内から@importを使い呼び出しています。HTTPリクエスト数が多いとそれだけ表示速度も遅くなるので、リクエスト数を減らす目的で使わないCSSファイルは呼び出さず、使うものはstyle.css内にまとめました。

下記ページでは、HTMLリクエストについて詳しい解説がされています。

HTTPリクエストを減らすために【序章】HTTPリクエストは甘え — MOL

CSSやjavascriptファイルの圧縮は、sublimeTextを使いました。

Simplicity標準搭載機能のSNSボタンですが、こちらもajax等を使い十分高速化対策は出来ているのですが、wordpressの場合はSNS Count Cacheを使用したほうが早いので、こちらを使いカスタマイズ。

SNS Count CacheでSNS共有数を高速表示+オリジナルSNSボタンでwordpressを高速化

【高速化対策】高速化に役立つwordpress pluginを使用

無料で提供されているwordpress pluginを数種類使用しています。

EWWW Image Optimizer
画像UP時に自動で圧縮してくれるplugin
過去の画像や、テーマファイルに同梱されている画像も圧縮できる。
圧縮率が高く処理速度も速いので、オススメ。
MO Cache
翻訳ファイル.mo ファイルを読み込んだオブジェクトをキャッシュするplugin
WP-DBManager
データベースの自動バックアップや管理が出来るプラグイン
データベースのOptimize(最適化)も出来るので、高速化対策にもなる。
WP Minify
HTML・CSS・JSコードを軽量化するプラグイン
Minifyエンジンが更新がされていないので、使用するのであればMinifyエンジンの差し替えが必要。
Youtube SpeedLoad
記事に埋め込んでいるyoutube動画の読み込みを最適化するプラグイン
複数のyoutube動画を埋め込んでいるページには絶大な効果。

youtubeの埋め込み動画を軽くするwordpress plugin 【Youtube SpeedLoad】

【高速化対策】nginxのリバースプロキシを使用

上記ページを参考にnginxの設定を見直し。
結果ほぼコピペ状態になりました(笑

【高速化対策】nginxでgzipを使う

nginxでgzipを使いたかったので、/etc/nginx/内にある、httpd.confを以下の様にした。
(サーバー側の知識は不安なので、おかしな記述があったりするかもしれないです^^;)

【高速化対策】.htaccessでブラウザキャッシュの設定

ユーザー側のローカルデータでキャッシュを使用してもらい、高速化する。
.htaccessの設定内容は以下のようにしました。

【高速化対策】インメモリデータベースのRedisを使用

上記ページ手順に従い、Redisをインストール、連携させました。

Redisを導入できない環境の方は、下記プラグインを導入すると幸せになれると思います。

【高速化対策】まとめ

高速化対策について行った事は以上です。
少し補足を書いておきます。

有名どころのキャッシュ系プラグインは導入していないのは何故?
(WP Super Cache等・・・)

Redisやnginxのリバースプロキシを使用している状態だと、逆に遅くなったから。

共用サーバーを使っている人は、nginx等の設定は出来ない所が多いと思いますが、最後に紹介したプラグインを使用するだけでも大きな効果が出ます。ただ、出来ればRedisを使えるならばそちらを使用した方が高速化出来るかな?と思います。

wordpressは記事数が増えると、レスポンスが悪くなるらしいので、定期的に表示速度の計測とメンテナンスを行ったほうがいいと思います。(更新の無いpluginの脆弱性とかも結構あるので調べたほうがいい)

この記事が気に入ったら
『いいね』しよう!