WordPressサイトのPageSpeed Insightsスコア改善 高速化チューニングの方法【wpX サーバー】

おはようございます^ – ^

ナカジ(@cp_nakajun)です。

先日、このブログの「https対応」と「高速化」を目論んで
サーバーをwpXにしました。

作業は順調に終わりhttps対応もでき、体感的には高速化も計れたと感じていたのですが
この際なので、きちんとGoogleのPageSpeed Insightsのスコアも改善しておきたいと思い立ち

チューニングすることにしました。

結果から言うと

• モバイル：59 → 73
• PC：69 → 86

それぞれ、10ポイント以上の改善になりました。

欲を言えば今後特に重要なのでモバイルのポイントをもっとあげたいですね。
それは継続的に対策していくつもりです。

WordPressの高速化チューニング

それでは僕がサーバーをwpXに移転してから行ったチューニングを紹介していきます。

大まかなポイントは

• キャッシュ系はサーバー（wpX）
• 画像・CSS・JSの最適化や圧縮はプラグイン

という方法です。

サーバー（wpX）の高速化設定

wpXの管理画面からWordPressの設定の「高速化設定」の項目ですが

プラグインの組み合わせなどと色々試した結果
僕は「キャッシュ設定」も「mod_pagespeed設定」もONにしました。

ですが…

画像・CSS・JSについてはGoogleがキャッシュ期限を７日以上と推奨してる的な記事をどこかで見た記憶があった為

htaccessに以下のように記述することにしました。

  # BEGIN WordPress catch
  <IfModule mod_rewrite.c>
  RewriteEngine on

  RewriteRule \.(css|js)$ - [L,E=X_CACHE_PATTERN1:]
  RewriteRule \.(gif|jpe?g|png)$ - [L,E=X_CACHE_PATTERN2:]

  # For CSS,JavaScript files
  Header set Cache-Control "max-age=604800" env=X_CACHE_PATTERN1

  # For Image files
  Header set Cache-Control "max-age=604800" env=X_CACHE_PATTERN2
  </IfModule>
  # END WordPress catch

ちなみになんでこんなことをしているかというと

wpXの管理画面から設定する「キャッシュ設定」では７日という期間が設定できなかったからです。

なので、画像・CSS・JSについては「キャッシュ設定」の対象からは除外してます。

高速化に利用したプラグイン

WordPressの高速化用に利用しているプラグインはこの４つです。

1. Autoptimize
2. EWWW Image Optimizer
3. Lazy Load
4. Scripts-To-Footer

それぞれの役割ですが

Autoptimize
ウェブサイトを最適化し、CSS コードと JavaScript コードを連結し圧縮

EWWW Image Optimizer
画像のファイルサイズを縮小

Lazy Load
画像の読み込み遅延

Scripts-To-Footer
JavaScriptの読み込みをフッターで行う

この中で特段設定が必要なプラグインはAutoptimizeなので
参考までに僕の設定を載せておきます。

約１ヶ月ほど、色々設定を変えたりしながら試してみましたが今のところこんな感じです。

ただ、先にも書きましたがモバイルのスコアはもう少し改善したいところです。

おすすめのワードプレスサーバー「wpX」