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

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

対策前

gtmetrix-01

対策後

gtmetrix-02

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

目次

  • キャッシュ有効化
  • Gzip圧縮
  • 画像圧縮
  • HTML,CSSやJavascriptの圧縮

1.キャッシュ有効化

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

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

2.Gzip圧縮

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

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

3.画像圧縮

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

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

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

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

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

使い方

1.プラグインインストール
2.設定変更(下記画像を参考にしてください)
スクリーンショット 2016-02-20 午後3.16.07
スクリーンショット 2016-02-20 午後3.16.18
スクリーンショット 2016-02-20 午後3.20.08
スクリーンショット 2016-02-20 午後3.20.16
スクリーンショット 2016-02-20 午後3.19.10
基本的にデフォルトからいじることはありませんが、Conversion SettingのHide Conversion Linkにチェックを入れるのを忘れずに。

3.画像圧縮
設定が終わりましたらWordpress管理画面の左サイドメニューの「メディア」の中の「Bulk Optimize」をクリックしてください。
スクリーンショット 2016-02-20 午後3.28.28

・Optimize Media Library
メディアライブラリーの中の画像を最適化してくれます。「Start Optimizing」のボタンを押せば自動で全てのメディアファイルを最適化することができます。
・Optimize Everything Else
メディアライブラリー以外のテーマファイルの画像などを最適化してくれます。「Scan and Optimize」のボタンを押せば最適化が開始します。

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

4.HTML,CSSやJavascriptの圧縮

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

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

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

まとめ

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

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。