【WordPress高速化】キャッシュ系プラグインの導入などわたしが行った対策をご紹介

 2015/02/25

走る犬

速度のことなど何も考えずにWordPressのテーマを自作したところ、記事を全く入れていない状態なのにPageSpeed Insightsでモバイル30、PC50、GTmetrixではDとEという散々な結果をたたき出しました。

まずい、これはまずい(・:゚д゚:・)

ようやく重い腰を上げサイトの高速化に取り組んだわたしの手順をご紹介します。このブログはSSLを導入しHTTPSで運営していますので、ほとんど同じ設定のHTTPで運営している別ブログでの説明していきます。

スポンサーリンク

まずはテーマの見直し

「テーマを作る」ことをゴールにしていたのでサイトの読み込みなど深く考えていませんでした。とりあえずはテーマに無駄なコードなどがないか見直し作業です。基本的にはhead内で読み込ませていたJSをfooterへ移動。Jqueryやスタイルシートは一つにまとめました。その他にCSSの記述方法も修正。参考にしたのはこちらのサイトです。

CSSの記述の仕方などを工夫してページの読み込みを高速化する方法 | delaymania

プラグインの導入

以下はわたしの環境下で試したプラグインです。同じ設定にしたとしてもうまくいかない場合があります。プラグインを導入する際には必ずローカル環境下でテスト後にバックアップを行ってから試してください。また、バックアップをとったとしてもそれを復元(リストア)できるスキルがない場合は行わない方が賢明かと思います。

Head Cleaner

Head Cleanerはhead内のJavaScript、CSSの整理・統合・フッターへの移動ができたり、JavaScriptとCSSをサーバー上にキャッシュすることができます。

また、Head Cleanerを導入後はFontAwesomeやgoogle webフォントにlink rel=”dns-prefetch”が設定されました。調べてみるとDNSプリフェッチというのはサイトの高速化に一役買いそうな感じです。

DNSプリフェッチでウェブページの読み込み速度をスピードアップ | 海外SEO情報ブログ

プラグインの設定はバズ部の記事の設定をそのまま参考に。

Head Cleaner の最も理想的な設定方法

バズ部のサイトでの説明にもありますが、わたしの環境下ではJQueryをフッターで読み込ませたらJQueryが機能しなくなりました。「wp_print_head_scripts」を対象外にしてみたらそれは解消されました。

なお、HTTPSページのDNSプリフェッチはできないということなのでこのサイトではHead Cleanerは入れていません。

001 Prime Strategy Translate Accelerator

001 Prime Strategy Translate Acceleratorは翻訳系のキャッシュプラグインです。オブジェクトキャッシュといわれるもになります。導入したからといって特に早くなった実感はありませんでしたが取りあえず入れました。

WP Hyper Response

WP Hyper ResponseはPHPで表示するものを先に出して高速化を図るプラグインです。管理画面も高速化します。

WordPressを高速化するプラグインを作りました | Stocker.jp / diary

WP-HTML-Compression

WP-HTML-CompressionはHTMLを圧縮してくれるプラグインです。効果の程はちょっと実感できなかったのですが、PageSpeed Insightsで推進している「HTML を縮小する」は合格になりました。

こちらのプラグインは2年ほど更新がない状態なのでやめたほうがいいかも。追記:やめましたw

Unveil Lazy Load

こちらはSNSのカウント数を表示するプラグインSNS Count Cacheを作られた作者のまるぼん(marubon)さんが作られたプラグインです。画像遅延読み込みすることができスピードアップを感じることができます。

[試] 速いは正義!WordPressプラグイン Unveil Lazy Load | 表示速度改善のためのこだわり施策を適用 | 試行錯誤ライフハック

W3 Total Cache

はい、キャッシュ系プラグインの横綱来ました。これ入れました。使用したのは以下の3つの機能のみです。

  • ページ・キャッシュ
  • データベース・キャッシュ
  • ブラウザ・キャッシュ

設定方法についてはまたバズ部を参考にしました。すごく丁寧な解説です。

W3 Total Cache のおすすめの設定方法

ソースの最適化はHead Cleanerで行いましたし、オブジェクトキャッシュについてはゆめぴょんさんの下記の記事にて特に効果がなかったとありましたので導入を見送りました。

キャッシュ系プラグインは基本的にゆめぴょんさんの記事を参考に導入していきました。いつも勉強させていただいています。ありがとうございます!

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

CDNは導入を見送った

プラグインW3 Total CacheはCDN(コンテンツデリバリネットワーク)のCloudFlareと連携できるのですが、何ポイントもスピードが上がることはありませんでした。当サイトは画像を多用している訳でもないし、アクセスもそんなにないので別にいらなそう。JetpackのPhotonも逆に速度が落ちるという結果となりました。

手軽に使えるCDN、Wordpress「Photon」プラグインを使ってブログを高速化

CloudFlareを使わない理由の一つにエックスサーバーの「WordPressの管理者ツール(ダッシュボード)に対する国外IPアドレスからの接続を制限」というセキュリティ設定が機能しなくなるというデメリットもありました。ブルートフォースアタックの対策にはプラグインを使うこともできますが、「エックスサーバーに任せておけば安心」という考えなので安全第一を優先することに。

サーバーのスペックが一番大事

プラグインを入れたり、細かな設定を見直すよりはサーバーのスペックをいいものにする方が手っ取り早く高速化することができます。わたしのおすすめはエックスサーバーです。多くのブロガーさんも推進していますよね。

エックスサーバーに新しく搭載された「mod_pagespeed」という拡張機能はサーバーの管理パネルでONにするだけでだいぶ高速化されました。

http://www.xserver.ne.jp/

で、いろいろやった結果

PageSpeed Insights

最初の段階のモバイル30、PC50から大きく飛躍(笑)

speedupその1

GTmetrix

3秒切りました!

GTmetrix結果

日中の測定でしたので速度は早い方で、夜に計測するともう少し結果は悪くなります。しかし最初に比べるとだいぶ良くなりました~!

まとめ

ユーザーがページ表示に待てるのは2秒。3秒以上かかると40%以上のユーザーは離脱。なんて話があるくらいですからまだまだ課題はありますね。少しずつ、少しずつ改善していきたいと思います。目指せ!1秒台!!

何度も申し上げますが、キャッシュ系プラグインを導入する際にはバックアップは忘れずに!!

それではちゅんこ@shufulifeがお送りしましたー

WordPress

Please comment!

  

Leave a Reply




現在トラックバックはありません。