【WordPress】 僕がページスピード評価EランクからBランクにするためにやったこと

どうも、久しく記事を書いてない僕です。
今回はWebサイトにはいつもついて回る問題「ページスピード」の改善について書いていきます。恥ずかしながら対策前はGTmetrixでE評価だったのですが、色々試したところなんとかB評価にあがることができたのでその方法をシェアしていきたいと思います。

ページスピードスコアは29%アップ、YSlowスコアは6%アップ（少なっ）、ページ読み込みスピード6.5秒速くなった、ページ容量407KB軽量化という感じで結果がでましたが読み込みスピードが格段に速くなったので（というか前が遅すぎたということはありますが）めちゃくちゃ嬉しいです。これでビール美味しく飲めます。みなさんもまだページ読み込みスピードの対策をしてないのであれば是非取り組んでみましょう。
 

1.キャッシュ有効化

これはページスピード改善では必須になってくるのではないでしょうか。僕が調べて読んだ記事の中でキャッシュ系のことを言ってない記事はなかったです。ただキャッシュ系プラグインでやると他のプラグインとコンフリクトを起こして不具合もあるみたいだったので、自分でhtaccessファイルに書き込むことにしました。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType text/js "access plus 216000 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"

ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

上記のコードを.htaccessファイルの「# END WordPress」の後にコピペしていただければ、キャッシュが有効になります。
各項目を見ていただければだいたい分かると思いますが、gifやjpegなどのファイルタイプを指定し、その後にキャッシュを保持する期間を指定という形になっています。
実際このコードを追加してみて、体感ではそれほど変わりませんでしたがGTmetrixの評価は4%ほど上昇しましたのでやる価値はあると思います。

2.Gzip圧縮

こちらもプラグインを使用してか.htaccessファイルに直接書くかでできるのですが個人的にプラグインをあまり信用していないので上記のキャッシュ同様.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>

上記のコードを先ほど追加したキャッシュのコードの下にまるっとコピペしていただければ完了です。体感的にはさほど読み込みスピードの変化は感じませんでしたが、こちらも4~5%ほど上昇したのでやる価値はあると思います。

3.画像圧縮

ページの読み込みが遅い原因のひとつに画像ファイルの読み込みがあげられます。もちろん画像がない方が早いのですがデザインやユーザビリティを考えて画像を抜くことができない場合はよくあると思います。そこで各画像を圧縮してサイズを小さくすることでページの読み込みを速くすることができます。こちらはプラグインを使う方法とそうでない方法があります。

・プラグインなしでの画像圧縮

tinypngなどの画像圧縮サイトで画像を圧縮し、それをFTPまたはWordpressのメディアファイルにアップロードします。僕はいつもtinypngを使用しているのですが圧縮前と後では全然サイズが違いますので、もし画像圧縮せずに使用している方はこれをやるだけでもずいぶんと読み込みが速くなるはずです。

・プラグインありでの画像圧縮

「Ewww Image Optimizer」というプラグインを使用しての画像圧縮になります。このプラグインは優れもので過去にアップロードしたメディアファイル、テーマで使用している画像、新規にアップロードした画像を圧縮できます。

使い方

1.プラグインインストール
2.設定変更（下記画像を参考にしてください）





基本的にデフォルトからいじることはありませんが、Conversion SettingのHide Conversion Linkにチェックを入れるのを忘れずに。

3.画像圧縮
設定が終わりましたらWordpress管理画面の左サイドメニューの「メディア」の中の「Bulk Optimize」をクリックしてください。

上記の二つ両方でも片方だけでもいいですが、過去にアップロードしたメディアファイルは最適化しておいた方がいいので、Optimize Media Libraryはやっときましょう。難しい設定もする必要がなく手軽に画像圧縮ができるプラグインですのでぜひ使用してみてください。

4.HTML,CSSやJavascriptの圧縮

Autoptimizeというプラグインを使用してHTML,CSS,JSを圧縮しましたがこれが体感的にもスコア的にも一番変化があったと思います。

使い方
1.プラグインインストール
2.設定変更（下記画像を参考にしてください）

上記のような設定にしていただければ問題ないかと思います。ただ他のプラグインとコンフリクトを起こしてうまく動かない場合もあるのでご使用は慎重に行ってください。（検証環境あるなら検証環境で試してからにしてくださいね。）

まとめ

以上紹介した4つの対策をしたところGTmetrixでE評価だったのがB評価までなんとかあげることができました。体感速度的にも速くなりましたがAまであと少しなので、使用プラグインの見直しやもうちょっとできるところをやっていこうと思います。まぁあとは安いレンタルサーバーでなくちゃんとしたサーバーに変更すれば、速くなるんでしょうけどしばらくは安いサーバーで頑張っていこうと思います。

では。