WordPressでPageSpeed Insightsのスコア100を目指す

Speedometer / ajnabeee

WordPressの高速化

WordPressの表示速度についていまいち評判の悪いさくらインターネットですが
今回、重い腰を上げてスコア100を目指してみることにしました。

まず、このサイト表示速度の重要性についてですが、サイトの表示速度が違えば、
滞在率が大きく下がるというのは運営する側にしても、
サイトを閲覧する側にしても当たり前のようにわかること。

SEO的にも少なからず効果があるということなので、ここは改善しておきたいところです。

とりあえず、ルールとしては
・テンプレートは現状のまま
・デザインは変えない
・広告は外さない
・コンテンツも減らさない

つまり現状を維持したまま速度を上げるという方法をとってみようと思います。

スピードテスト

PageSpeed Insightsでスピードテストを行った結果、一番初めのスコアは

モバイル：55
PC：65

ということで、極めて低い状況。
それではここからどれくらい速度を上げられるかやってみましょう。

ブラウザのキャッシュを活用する

まず指摘されたのがコチラ。
「ブラウザキャッシュをさせるようにしろ」とのことでした。

これをApacheサーバ上で設定したいときは、「mod_expires」というモジュールを使う必要があります。
さくらインターネットではやっと「mod_expires」が使えるようになったので早速設定。

wp-content配下の.htaccessに以下の項目を追記しました。

ExpiresActive On
ExpiresByType text/html “access plus 6 hours”
ExpiresByType text/css “access plus 4 weeks”
ExpiresByType image/gif “access plus 4 weeks”
ExpiresByType image/jpeg “access plus 4 weeks”
ExpiresByType image/png “access plus 4 weeks”
ExpiresByType application/x-javascript “access plus 4 weeks”

これで、キャッシュの警告が大幅に減少しました。

画像を最適化する

要するに「画像を縮小しろ」というお話。でも縮小したら画像が荒くなったり…
なんて心配もあるかと思いますが、こちらは「ロスレス圧縮」という方法を使えば
見た目上は画像を荒くすることなく、ファイルサイズのみを小さくすることができます。

ここで役に立つのが「EWWW Image Optimizer」というプラグイン。
こえを使う事で過去にアップした画像や、テンプレート内で使用されている画像など
全て一括で圧縮できます。

方法は簡単。インストールすると、管理メニューの「メディア」の項目に
「Bulk optimize」というメニュがー増えているので、こちらをクリック。
あとは「Start Optimize」のボタンをクリックするだけですべての画像を最適化してくれます。

個別の画像にも「Optimize」のメニューがありますので、
特定の画像のみ最適化したいときはそちらからどうぞ。

その他「外観」の各種テンプレートの部分にも「Optimize」のメニューがあります。
ここをクリックすることでテンプレート内で使用されている画像も最適化できます。

圧縮を有効にする

ここが一番苦戦したところ。これを行うには「mod_deflate」という
モジュールが必要になるのですが、さくらインターネットは対応していません。
「mod_deflate」が使える環境課であれば、.htaccessに

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

という形で記述すれば、gzip形式で圧縮できるようになります。

でも対応していないものは仕方ない。
ということで、回避策。

実はさくらインターネットは「php.ini」をある程度までならいじれるようになっています。
それを利用して「コントロールパネル」から「PHP設定の編集」で

zlib.output_compression=1

を追記します。これで一応コンテンツの圧縮はできます。
ただしPageSpeed Insightsの警告は変わりません。

圧縮できているかを確認する方法としては
http://www.gidnetwork.com/tools/gzip-test.php
ここをつかうことで一応確認できます。

あとは地道にCSSとjsファイルを手動で圧縮したものに置き換えてなるべくファイルサイズを小さくしてみる。
圧縮は
Online YUI Compressor
もしくは
Compressor
という外部ツールを使いました。

ただし、ツールも完ぺきではないので、圧縮してファイルを置き換える場合は
必ずバックアップを取ってから置き換えてください。
特ににjavascriptのファイルは圧縮したときに正常に動作しなくなる場合があります。

スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する

ここもそれなりに苦労しましたが「Head Cleaner」と「BJ Lazy Load」を入れたら解決。
大分警告数が減りました。
「Async JS and CSS」というプラグインも入れてみましたが、こちらは相性が悪いようで断念。

で、大まかに警告が出ていた項目は一通り対応。（まだ警告はでていますが）
「サーバーの応答時間を短縮する」って、これってサクラインターネットにいうしかないもんね。

Head Cleaner

いろいろなサイトで推奨されているHead Cleaner。
これは効果的なのだが、「CSS と JavaScript を、サーバ上にキャッシュする」の項目。
こちらは当サイトでは外している。なぜならば、サーバーにキャッシュすることで
前述のブラウザのキャッシュの設定が反映されないようだから。
どうもHead Cleanerで縮小したり結合したりして出力したCSSなどの情報に対し
有効期限がうまく設定できていない模様。というわけで、今回チェックを入れたのは

・内の JavaScript を、フッタ領域に移動・XML宣言を付与・Google Ajax Libraries を利用する・メタタグ “canonical” を追加

のみ。

Dependency Minification

このプラグインは相性がいいようで、CSSファイルが結合、圧縮され最初はページの高速化が行われたんですが、
2日目に問題が発生。このプラグイン、インストール直後にすべての圧縮、結合されるわけではなく
少しずつ処理が行われるようなのですが、2日目に突然サイトが重い状態に。
FireBugで見てみたら、404が多数発生。

原因は結合されたCSSファイル内のテンプレート用画像参照のURLが
デフォルトのインストール先を指している模様。
ここを変える術がみあたらなかったのでとりあえず止めました。

環境によっては効果があると思われますので、試してみてもいいかも知れません。