2015年版 さくらレンタルサーバ上のWordPress高速化対策(広告対応あり) 1


所要時間: 8

2015年版 さくらレンタルサーバ上のWordPress高速化対策(広告対応あり)
こん**は、1年4ヶ月ぶりの更新となりましたが、皆様お元気でしょうか。@hirok-kことhirok-kです。
何かと色々とありまして、長らく更新が滞っておりましたが、また更新をゆるゆると再開していきますので、またよろしくお付き合いください。

さて、さくらのレンタルサーバでWordPressを運用している方はかなりいらっしゃるかと思いますが、どこまで高速化できるのかというと今ひとつわからないというのが現状かと思います。

2011年5月に前ブログ「俺のメモ」の記事で紹介した時は、あるサイトのロードに約5.5秒前後、それから様々な手法を試した結果、2015年8月現在では約3.5秒と約150%の速度アップ、GTmetrixでPageSpeed97%、YSlow81%を記録することにに成功しましたので、その方法をご紹介したいと思います。

gtmetrix

プラグインでの高速化

現在メインサイトであるこちらで使用している高速化用のプラグインは、以下の6つです。

  1. 001 Prime Strategy Translate Accelerator
  2. DB Cache Reloaded Fix
  3. a3 Lazy Load
  4. EWWW Image Optimizer
  5. SNS Count Cache
  6. WP Fastest Cache Premium(フリー版はこちら

いずれも様々なブログで紹介されているとおりで、非常に効果的です。この中でも特にWP Fastest Cacheの効果が高く、有料版のPremiumへアップグレードして使用しています。

WP Fastest Cache

WP Fastest Cacheは日本語化されているおかげで初心者にも設定が簡単な上に、キャッシュの定期削除やHTML/JavaScript/CSSの圧縮も行ってくれます

有名なプラグインHead Cleanerのように、JSとCSSの一括移動などはできませんが、代わりにトラブルも発生しにくいのもありがたいです。
※WP Fastest CacheとHead Cleanerの併用はできませんのでご注意ください

参考までに現在の設定をご紹介します。こちらの通りです。
WP Fastest Cache Premiumの設定

使用しているテーマがレスポンシブ対応していて、iPhoneなどのスマホでもその表示を使用している場合とWPtouchなどを使用している場合では、設定が若干異なります。

レスポンシブ対応の場合は先の画像通りの設定でOKかと思いますが、WPtouchなどスマホ対応プラグインを別途利用している場合は、以下のように変更するのが良いでしょう

  • 「モバイルユーザーに対してキャッシュを表示しない」にチェックを入れる
  • 「モバイルテーマのキャッシュを作成する」のチェックを外す

使用する画像サイズを生成

使用するテーマやプラグインなどによっても異なりますが、様々なサイズの画像をしようするテーマやプラグインでは、デフォルトで生成されるサイズの画像だけでは読み込みサイズが大きくなってしまいがちです。

特にYARPP (Yet Another Related Posts Plugin)などでは、デザインに応じて必要となる画像サイズが異なりますよね。

そこで画像アップロード時に各種サイズの画像を生成するように、使用テーマのfunctions.phpへ次のようなコードを追加します。

これにより大きすぎる画像を無理矢理小さくして使用したりせずに、出来る限り最適なサイズを使用できるようになります。

この時、先に上げたEWWW Image Optimizerをインストールしてあると、生成される画像も自動的に圧縮されます。

CDNの使用

さくらのスタンダードでは月間の転送量に一応の上限はある(とされています)とはいえ、やはり高速化のためには外部サーバも活用したいところです。

CDNとは、Contents Delivery Networkの略で、メインサーバ以外の外部サーバから使用しているコンテンツデータを読み込ませることを指しています。

JS/CSSは先に挙げたWP Fastest Cacheで圧縮されているためCDNの利用はしていませんが、画像についてはCDNから配信することとしました。

CDNではCloudFlareが有名ですが、登録が必要など若干面倒なことからJetpackに標準でついているCDN機能であるPhotonを利用しています。

使い方は至って簡単。Jetpack > 設定へ行き、その設定画面からPhotonをONにするだけです。

ここで注意が必要なのは、「使用する画像サイズを生成」で生成した画像ですが、Photonを使用すると生成した画像が反映されずにPhotonからの配信時に最適な画像サイズとなりますので、「使用する画像サイズを生成」と「CDN(Jetpack Photon)の使用」の同時併用はできませんので注意が必要です。

なおwebフォントもCDNを使用していますが、こちらはGoogle Fontsから読み込むようにしています。

ブラウザキャッシュの利用

当然ながら、ブラウザキャッシュの利用も高速化のためには必須の方策の1つです。

こちらも様々なブログで触れられているのと同様にhtaccessファイルに次のコードを挿入するだけでOKです。

CDNにはないwebフォントをテーマ内で使用しているため12行目〜15行目でそのキャッシュ設定をしていますが、テーマから読み込むwebフォントがない場合は、該当箇所を削除してもOKです。

GZIP圧縮

さくらのレンタルサーバでも昨年からmod_deflateが利用できるようになりましたので、こちらも設定します

htaccessに以下のコードを追加します。

mod_deflateというのは、サーバからコンテンツを転送する際にGZIP圧縮をして転送する仕組みと考えてください。

このmod_deflateが使用できなかった頃のさくらではphpでの圧縮を行うのが主流でしたが、これによりその方法を利用する必要はありませんので、もしphp.iniに以下のような設定がされている方は該当箇所を削除するか、コメントアウトしておきましょう。

広告用JSの遅延読み込み

高速化の際にどうしても障害となりがちなのが、広告の読み込みです。

広告配信会社のサーバ上にある広告用JSを読み込んで、そこから様々な種類のJSをさらに読み込むことが多いため、ウィジェットエリアや本文エリアに直接貼りこむとロード時間が長くなってしまいがちです。

また広告用JSは、ほとんどの場合、遅延読み込みなどには対応していないため、他の策を考えることとなります。

そこでiframeを利用して、半強制的に遅延読み込みさせます。iframe内のソースは半ば強制的に遅延読み込みとなるため、結果的にそのなかに貼られているJSも遅延読み込みとなります。

では具体的にどのように読み込ませるかについてご説明します。

まずは以下のHTMLに各社の広告用JSを貼り付けて、任意のファイル名で保存します。

次にこれを読み込むためのHTMLとJSを用意し、使用しているテーマの該当箇所に貼り付けます。

最後に先に用意した広告用HTMLファイルをアップロードします。これで完了です。

これにより広告配信会社のサーバが重く、広告の読み込みが遅い場合などに効果を発揮するかと思われます。

なおコンテンツ判別型のJSでは、コンテンツが反映されない恐れがあります。さらにAmazonのJSでは最初からiframeが実装されているものがありますので予めご承知おき下さい。

高速化は一日にしてならず

たとえ0.1秒でも早く読み込みができればそれにこしたことはないので、日々様々な方法でテストを繰り返していますが、なかなかこれが決定版!とはいかないのがこの高速化です。

日々進化し続けるWordPressの世界ですので、また数カ月後には新たな方策が生まれているかもしれません。
少しでも効果があるものが見つかれば、またご紹介させていただきます。

コメントを書いてみませんか?