WEBマスターの手帳 > WEBサイト作成 > WordPress > [保存版]WordPressの表示速度を高速化させる為にやった5つのこと

WordPress

2015年1月9日

[保存版]WordPressの表示速度を高速化させる為にやった5つのこと

Twitter 1 Facebook 1 Google+ はてブ 38 Pocket チャットワーク Eight Feedly

今まで、やらなきゃいけないと思いつつもプラグインでちょこちょこ対応していた程度だった「表示速度の高速化」ちゃんと取組もうと思い、いろいろとやりました。

表示速度を改善する為には、キャッシュをいじるので下手するとWEBサイトが表示されなくなったり、WordPressが壊れたりするのでドキドキでした。

スポンサードリンク

なぜ高速化が必要なのか?

WEBサイトを訪問して最長3秒で閲覧するかを判断されるようなシビアな世界で、表示速度に4秒も5秒もかかっていたのでは、それだけでダメなのが分かると思います。

GoogleもWEBページの表示速度は評価ポイントとして見ているので、速ければ速い方がいいわけです。

ブログの表示速度をチェックする

PageSpeed Insights(Google Developers)

PageSpeed Insights

GTmetrix

GTmetrix | Website Speed and Performance Optimization

ダメダメなWEBマスターの手帳

表示速度をチェックしたら、全然ダメダメでした。

PageSpeed Insightsでのチェック結果
高速化対策前のPageSpeed Insightsチェック

GTmetrixでのチェック結果
高速化対策前のGTmetrixチェック

高速化対策した結果

Javascriptやソースコードの整理がまだできていないですが、かなり評価は上がりました。YSlow Gradeはyahooだからほっといてもいいかな。ちゃんとやらなきゃダメだろうな…

PageSpeed Insightsでのチェック結果
高速化対策後のPageSpeed Insightsチェック

GTmetrixでのチェック結果
高速化対策後のGTmetrixチェック

①WordPressの高速化に使えるプラグインの有効化

いくつかは以前から使っていましたが、今回の作業で新たに追加したものもあるので全て載せておきます。

尚、キャッシュ系のプラグインはトラブルが起こり易いですので、適当にやってしまうとブログが表示されなくなったり、壊れたりしますので、慎重に慎重を期して自己責任で使ってください。

W3 Total Cache

ブラウザやサーバーのキャッシュを使うことで表示速度を上げるためのプラグイン。多機能で「CloudFlare(CDNサーバー)」との互換性もあるので便利。

参考記事:W3 Total Cache のおすすめの設定方法

キャッシュとは

キャッシュと言われても、なんだかよく分からないという方もいるかもしれないので、一応載せておきます。

「キャッシュ」とは、Internet Explorerなどのブラウザが、表示したWebページの情報を一時的にコンピュータに保存しておく機能です。
再度同じWebページにアクセスしたときに、インターネット上のデータではなく、キャッシュに保存されたデータを参照することで、Webページを素早く表示することができます。/引用元:キャッシュとCookieの削除 | 早稲田大学ITサービスナビ

MO Cache

WordPressの翻訳ファイルをキャッシュすることで高速化できるプラグイン。「.moファイル」というWordPressを日本語化するために使われているファイルをキャッシュします。

EWWW Image Optimizer

画像ファイルを圧縮することができるプラグイン。ただでさえ量が増えると表示速度が遅くなるのが画像ファイル。画像ファイルのファイルサイズを気にせずにアップロードしてブログ内で使ったりすると、どんどん表示速度は遅くなる。

参考記事:EWWW Image Optimizer の設定方法と使い方

Lazy Load

ブラウザの画面で表示されていないスペースにある画像(スクロールすると見えてくる画像)をスクロールに合わせて画像を読み込むようにするプラグイン。

これが無いと、WEBページにアクセスした時に、スクロールしないと表示されない部分の画像も全て読み込んでしまうので表示速度が遅くなる。

DB Cache Reloaded Fix

データーベースのクエリをキャッシュするプラグイン。

参考記事:【WordPress】ブログ高速化AA達成!6つのW3TotalとCloudFlare併用設定 – ゆめぴょんの知恵

②エックスサーバーで「mod_pagespeed設定」をオンにした

Googleが提供しているWEBサイトを高速化させるためのツール「mod_pagespeed」を使う設定をしました。設定と言っても「エックスサーバー」が実装してくれているので、エックスサーバーにログインして設定をオンにするだけ。楽だ。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。/引用元:エックスサーバー マニュアル | レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

参考記事:レンタルサーバーの速度向上!エックスサーバーのWordPress表示速度高速化!
インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 編集長ブログ―安田英久 | Web担当者Forum

③エックスサーバーのPHP高速化設定(FastCGI)を有効にした

こちらもエックスサーバーが実装してくれているので、設定をオンにするだけ。マジで楽です。

CPU負荷を軽減し実行を高速化できる仕組みである「FastCGI」をPHPプログラムに適用することができます。多数のアクセスが見込まれるドメインでは有効(On)にすることでCPU負荷軽減および高速化を図ることができます。/引用元:エックスサーバー管理画面内

エックスサーバーは高性能で動作も速くいのですが、さらに高速化する機能が充実しているので、選んで正解でした。今回はエックスサーバー様様でした。
ブログのロリポップからXサーバーへの移行を1日で終わらせた方法。 | WEBマスターの手帳

参考記事:エックスサーバー(Xserver)で「PHP高速化設定(FastCGI化)」をする方法 | WordPress & Lifelog

④CloudFlareを使い始めた

CloudFlareという「CDN(コンテンツ・デリバリー・ネットワーク)」の1つを使い始めてみました。CDNはコンテンツの一部を複数のサーバーに分散し、1つのサーバーにかかる負荷を分散する仕組みです。

転送量に応じて使用料が発生するAmazon Web Serviceが提供するCDNもありますが、CloudFlareは無料プランがあるので助かります。

ウェブサイトにある画像や動画などの高容量コンテンツをウェブサービスが提供されているサーバーとは別のサーバーにキャッシュし、代わりに配信して負荷分散するという仕組み。/引用元:表示速度を劇的に向上する、無料のCDNサーバー「CloudFlare」は導入必須だ!! | gori.me(ゴリミー)

参考記事:すぐできる!CloudFlare の設定方法
CDN「CloudFlare」は効果絶大!WordPressブログの表示を2.94秒短縮! | トネリコBLOG

⑤必要のないプラグイン、テーマの削除、ウィジェットの整理

必要のない(使っていない)プラグインとテーマを削除しました。テーマは削除する必要は無かったかもしれませんが、断捨離ということで。

ウィジェットについても人気記事や最新記事など、本来はプラグインを使わずにウィジェットも使わずにphpを直書きしたほうがいいので、おいおいやっていきます。

様子を見ながら改善していきます

ひとまず、いろいろと修繕を施しました。まだ完璧に反映されていない部分もあると思うので定点観測しながら、改善を進めていきたいと思います。

大きなトラブルも無く無事に済んで良かった。それにしても「YSlow Grade」がD判定なのは、やっぱりよろしくない。ちゃんとやろう。
※後日、ちゃんとやりました→MinifyしたらGTmetrixのYSlow Gradeの評価がDからBに大幅ランクアップしたよ。

今回の作業で参考にした記事

今後、エラーが発生した時のためのメモ

この記事が良いと思ったらシェアしてください

Pocket

御社のターゲット像を明確にする!ペルソナ作成シート

ペルソナ作成シート

WEBマーケティングで重要なのが「相手は誰?」というターゲット像を明確にすることです。

そこでWEBサイトを訪問する人は誰?企業ブログを訪問する人は誰?SNSで繋がりたい人は誰?これらターゲット像を明確にするための「ペルソナ作成シート」を【無料】で配布しています。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

この記事に「いいね」と思ったらフォローしてね!


この記事を読んだ方におすすめの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

あなたにオススメの記事

ピックアップ記事一覧

カテゴリー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事