こん＊＊は、1年4ヶ月ぶりの更新となりましたが、皆様お元気でしょうか。@hirok-kことhirok-kです。
何かと色々とありまして、長らく更新が滞っておりましたが、また更新をゆるゆると再開していきますので、またよろしくお付き合いください。
さて、さくらのレンタルサーバでWordPressを運用している方はかなりいらっしゃるかと思いますが、どこまで高速化できるのかというと今ひとつわからないというのが現状かと思います。
2011年5月に前ブログ「俺のメモ」の記事で紹介した時は、あるサイトのロードに約5.5秒前後、それから様々な手法を試した結果、2015年8月現在では約3.5秒と約150%の速度アップ、GTmetrixでPageSpeed97%、YSlow81%を記録することにに成功しましたので、その方法をご紹介したいと思います。
目 次
プラグインでの高速化
現在メインサイトであるこちらで使用している高速化用のプラグインは、以下の6つです。
- 001 Prime Strategy Translate Accelerator
- DB Cache Reloaded Fix
- a3 Lazy Load
- EWWW Image Optimizer
- SNS Count Cache
- WP Fastest Cache Premium（フリー版はこちら）
いずれも様々なブログで紹介されているとおりで、非常に効果的です。この中でも特にWP Fastest Cacheの効果が高く、有料版のPremiumへアップグレードして使用しています。
WP Fastest Cache
有名なプラグインHead Cleanerのように、JSとCSSの一括移動などはできませんが、代わりにトラブルも発生しにくいのもありがたいです。
※WP Fastest CacheとHead Cleanerの併用はできませんのでご注意ください
参考までに現在の設定をご紹介します。こちらの通りです。
使用しているテーマがレスポンシブ対応していて、iPhoneなどのスマホでもその表示を使用している場合とWPtouchなどを使用している場合では、設定が若干異なります。
レスポンシブ対応の場合は先の画像通りの設定でOKかと思いますが、WPtouchなどスマホ対応プラグインを別途利用している場合は、以下のように変更するのが良いでしょう。
- 「モバイルユーザーに対してキャッシュを表示しない」にチェックを入れる
- 「モバイルテーマのキャッシュを作成する」のチェックを外す
使用する画像サイズを生成
使用するテーマやプラグインなどによっても異なりますが、様々なサイズの画像をしようするテーマやプラグインでは、デフォルトで生成されるサイズの画像だけでは読み込みサイズが大きくなってしまいがちです。
特にYARPP (Yet Another Related Posts Plugin)などでは、デザインに応じて必要となる画像サイズが異なりますよね。
そこで画像アップロード時に各種サイズの画像を生成するように、使用テーマのfunctions.phpへ次のようなコードを追加します。
|
1 2 |
//my_thumbnailと名づけた100x100の画像を生成させる add_image_size( 'my_thumbnail', 100, 100, true ); |
これにより大きすぎる画像を無理矢理小さくして使用したりせずに、出来る限り最適なサイズを使用できるようになります。
この時、先に上げた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から読み込むようにしています。
ブラウザキャッシュの利用
当然ながら、ブラウザキャッシュの利用も高速化のためには必須の方策の１つです。
こちらも様々なブログで触れられているのと同様にhtaccessファイルに次のコードを挿入するだけでOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 2 weeks" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType image/jpg "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType text/html "access plus 1 seconds" ExpiresByType text/css "access plus 2 weeks" ExpiresByType text/javascript "access plus 2 weekss" ExpiresByType application/x-javascript "access plus 2 weeks" ExpiresByType font/opentype "access plus 2 weeks" ExpiresByType font/ttf "access plus 2 weeks" ExpiresByType font/eot "access plus 2 weeks" ExpiresByType font/otf "access plus 2 weeks" </IfModule> |
CDNにはないwebフォントをテーマ内で使用しているため12行目〜15行目でそのキャッシュ設定をしていますが、テーマから読み込むwebフォントがない場合は、該当箇所を削除してもOKです。
GZIP圧縮
さくらのレンタルサーバでも昨年からmod_deflateが利用できるようになりましたので、こちらも設定します。
htaccessに以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf </IfModule> |
mod_deflateというのは、サーバからコンテンツを転送する際にGZIP圧縮をして転送する仕組みと考えてください。
このmod_deflateが使用できなかった頃のさくらではphpでの圧縮を行うのが主流でしたが、これによりその方法を利用する必要はありませんので、もしphp.iniに以下のような設定がされている方は該当箇所を削除するか、コメントアウトしておきましょう。
|
1 2 |
zlib.output_compression=on zlib.output_compression_level=1 |
広告用JSの遅延読み込み
高速化の際にどうしても障害となりがちなのが、広告の読み込みです。
広告配信会社のサーバ上にある広告用JSを読み込んで、そこから様々な種類のJSをさらに読み込むことが多いため、ウィジェットエリアや本文エリアに直接貼りこむとロード時間が長くなってしまいがちです。
また広告用JSは、ほとんどの場合、遅延読み込みなどには対応していないため、他の策を考えることとなります。
そこでiframeを利用して、半強制的に遅延読み込みさせます。iframe内のソースは半ば強制的に遅延読み込みとなるため、結果的にそのなかに貼られているJSも遅延読み込みとなります。
では具体的にどのように読み込ませるかについてご説明します。
まずは以下のHTMLに各社の広告用JSを貼り付けて、任意のファイル名で保存します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="noindex,nofollow"> <title></title> </head> <body style="margin:0;padding:0;"> <!-- ここに広告用JSをコピペ --> </body> </html> |
次にこれを読み込むためのHTMLとJSを用意し、使用しているテーマの該当箇所に貼り付けます。
|
1 2 |
<!-- 広告を貼り付けたい場所にこちらをコピペ --> <div id="ad-contents"></div> |
|
1 2 3 4 5 6 7 |
<!-- テーマのfooter.phpの</body>前に貼り付けるとよいでしょう --> <script type="text/javascript"> $(window).load(function(){ $('#ad-contents').html('<iframe width="728" height="90" src="広告用JSを貼り付けたHTMLファイルを指定" scrolling="no" frameborder="0" style="border:none;"></iframe>'); }); </script> <!-- 広告サイズにあわせてiframeのサイズを適宜変更してください --> |
最後に先に用意した広告用HTMLファイルをアップロードします。これで完了です。
これにより広告配信会社のサーバが重く、広告の読み込みが遅い場合などに効果を発揮するかと思われます。
なおコンテンツ判別型のJSでは、コンテンツが反映されない恐れがあります。さらにAmazonのJSでは最初からiframeが実装されているものがありますので予めご承知おき下さい。
高速化は一日にしてならず
たとえ0.1秒でも早く読み込みができればそれにこしたことはないので、日々様々な方法でテストを繰り返していますが、なかなかこれが決定版！とはいかないのがこの高速化です。
日々進化し続けるWordPressの世界ですので、また数カ月後には新たな方策が生まれているかもしれません。
少しでも効果があるものが見つかれば、またご紹介させていただきます。
