Google PageSpeed Insightsで100点とった話


↑やる前


↑やった後

できたこと

  • Google PageSpeed Insightsの評価が60点ぐらいから100点に（100点とか都市伝説だと思ってた）
  • WordPressのページ表示はもちろん、管理画面がサクサク動くようになった
  • WordPressの公式アプリ（ほとんど使ってない）もサクサク動くようになった

やったこと

  • WordPressの運用サーバを「さくらのレンタルサーバ スタンダード」から「エックスサーバーX10プラン」にお引っ越し
  • WordPressのテーマをLuxeritasに変更
  • その他細々といろいろ

所要時間

約半日（ほとんど待機時間なので実働3時間ぐらい）

なんでやろうと思ったのか

  • さくらレンタルサーバが契約更新時期になったので、もともと契約しててリソースが余りがちなエックスサーバーに統合することに
  • WordPressの速度に定評のあるエックスサーバーで思ったより表示速度が上がらなかったので色々やりだしたら止まらなくなった

やったこと1:サーバの移設

手順

WordPress移転(移行)手順 | レンタルサーバー【エックスサーバー】

↑トラブルは色々ありましたが、ほぼこの通りでオッケー。

トラブル1:画面が真っ白でなにも表示されなかった

PHPのバージョンを5.xに下げたら改善。何かのプラグインが原因と思われ。ただしこの後、高速化のためにすぐ7.xにしました。

トラブル2:サブドメインで運用するやり方がよくわからなかった

私はzxm.jpというドメインをお名前.comで取得していて、

  • mail.zxm.jp → メール用
  • blog.zxm.jp → ブログ用

という風にサブドメインを切って使用しています。ネームサーバーもお名前.comのものを利用しているのですが、サブドメインのblog.zxm.jpだけエックスサーバーに向ける正しい方法がよくわかりませんでした。

ググるとAレコードで直接エックスサーバーのIPを指定するやり方が出てきますが、どうも正しい気がしません。とりあえずNSレコードでエックスサーバーのdnsに権限を移譲する感じにしました。これが正しいのかどうかはよくわかりません。DNSの勉強したいけどだるい。

やったこと2:WordPress高速化

無事に引っ越しはできたけどあんまり高速化しなかったので、色々と試しました。

高速化1:無料テーマ「Luxeritas」の導入

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ

これほんとすごい。

導入は、まぁ普通に簡単です。

ダウンロード | Luxeritas Theme

そしたら下記のページの通りにやるだけでグッと高速化しました。設定ページもわかりやすくてしかも日本語で、作者様は神かゴッドに違いないと思いました。

高速化するためには | Luxeritas Theme

高速化2:画像の圧縮

Google PageSpeed Insightsが「画像を圧縮しやがれ」とうるさいので、以下のプラグインを導入。有料かと思ったけど無料で使えました。

EWWW Image Optimizer — WordPress プラグイン

だいたいこれで解決しますが、いくつかの画像ファイルはまだ圧縮が足りねぇと言われたので仕方なく手作業で直しました。

高速化3:PHP7にした

エックスサーバーの管理画面から変更しただけです。めちゃ早くなりました。よく知らないけどセキュリティ的にもよくなったとか。
特にずっとGoogle先生に叱られていた「サーバーの応答時間が遅い」のが解決しました（でも何度も計測すると3割ぐらいの確率で遅いと言われるので、もっとガチりたかったらキャッシュ系のプラグインが必要かもしれない）。

高速化4:Jetpackを削除

Jetpackは無数の便利機能を追加してくれる便利な公式？プラグインですが、なんかGoogle先生に怒られるので削除しました。

よく考えたらMarkdownで記事が書けるようにしたかっただけなので、以下のプラグインで代用。

JP Markdown — WordPress プラグイン

高速化5:その他もろもろ

あとはGoogle先生の指摘とLuxeritasの設定を行ったり来たりしつつ何度もテストしているうちに、あっという間に100点になりました。
正直、点数重視で設定としては微妙な部分もあるので継続的な様子見が必要です（といいつつ絶対にほったらかす自信がある）。

感想

もう何年もGoogle先生に「お前のサイトはクソ遅い」と言われ続けていたので改善できてスッキリしました。
ついでにブログに貼っていた広告もとっぱらいました。これはお金に困ったらまた戻すかもしれませんが、ないとスッキリします。
あと、更新がおっくうになるのは管理画面がクソ遅いのも原因のひとつだと感じました。サクサク動いてくれると気持ちよくて更新する気になります（といいつつ絶対に更新間隔が開く自信がある）。プレビューがパッと表示されると気持ちいい。

じぃーまでした。

テクニック/Tips