PageSpeed Insightsで高評価を得るには

GoogleのPageSpeed Insightsというサービスをご存知でしょうか。

サイトのURLを入力すると、速度計測と該当サイトのパフォーマンスに関する
イケてないところを洗い出してくれるサービスです。

うちのサイト、GoogleのPageSpeed Insightsで92点だよ!と言うと、
「どうせほぼブランクページなんでしょ・・・?」と言われてしまったので
わたしがした施策と経緯を書いてみようと思います。

当サイトはざっくり下記の環境で運用をしています。

  • VPS(お名前.com KVM)
  • WordPress

経緯

かつて、このサイトとは別にドラゴンクエストXのゲーム攻略ブログを運用していました。
全盛期に開設したのでそこそこのアクセス数があり、
サイトの負荷が高くサーバダウン率が上がってしまうことがネックになっていました。

まずはPageSpeed Insightsが言ってきたイケてないところを潰していこうとしました。

PageSpeed Insightsに言われたイケていない箇所

司令1.スクロールせずに見えるコンテンツのレンダリングをブロックしている箇所を排除しろ(未実施)

これは無理だ・・・そんなことをしたらこのWordPressテーマのいいところを潰すことになってしまう・・・
ということで、これは実施していません。

司令2.画像を最適化しろ

可能な範囲で圧縮しました。
が、できない箇所もあるから今でも指摘されています。

司令3.JS・CSSを圧縮しろ(未実施)

そんなに色々書いていないし、大幅な改善が見込めるとは思えない。
しかも、プラグインのJSを圧縮してしまうとアップデートのたびに圧縮をしないといけないので
これも実施していません。

行なった施策

このページにたどり着いた人なら、
デフォルトWordPressがクソ重いCMSだということは既に承知のことでしょう。
まずはオーソドックスに下記の施策を実施しました。

1.WordPress側で行なった施策

  • HTMLを圧縮
  • 画像や静的な箇所をキャッシュ化
  • DB最適化(リビジョンなどのゴミデータを定期的に削除)

残念ながら、この程度の施策ではさほど改善されませんよね。
やる前から分かっていたんですけどね・・・

次にサーバのチューニングを行ないました。

2.Nginxを使用する

本当はNginx + Apacheで必要に応じて使い分けるということをしていたのですが、
結果的に断念しました。

当時、Apacheの知識はほんの少しだけありましたが
Nginxは初めて触ったので、そことの兼ね合いが難しく・・・。

ただApacheに戻しちゃうと結局同じだし、そうなってくると
Apache自体のチューニングをしないといけなくなるけど限界があるし、
次はDBチューニングに手を出さざるを得ない状況になったりして
現実的じゃないかなと思ったので、勉強がてらNginxだけを入れてみたという経緯です。

普通にNginxを入れてちょろっと設定を追加しただけです。

3.KeepAliveを設定

ApacheでもNginxでもKeepAliveを有効にすることができます。
タイムアウト秒ももれなく設定(うちは25秒になっています)。

4.ブラウザキャッシュを有効にする

Nginxで画像やCSS、Webフォントやアイコンに対してブラウザキャッシュを有効にします。

location ~ .*\.(jpg|jpeg|gif|png|css|js|ico|woff)$ {
expires 7d;
}

こんな感じで。設定後はrestartを忘れずに。

5.圧縮を有効にする

実はこれらの施策は2年くらい前に行なったのですが、
どこを触ったのか覚えておらず裏が取れなかったんですが
どうやら圧縮は有効になっているっぽいです。

うちのサイトは無効だったんですが、gzipを有効にする施策はありだと思います。

まとめ

レンタルサーバを利用しているなどの理由で実施不可のものが多いかもしれません。

ノンプログラマー目線で施策をしやすいものをまとめました。
ついでに取り入れやすさを星5つで記載しています。

  • WordPressキャッシュプラグインを導入する ★★★★☆
  • 使用する画像やJS、CSSを圧縮する ★★★☆☆
  • ブラウザキャッシュを有効にする ★★☆☆☆
    ⇒.htaccessでの設定も可能なので、できなくはないかなと思います。
  • アクセス数に見合ったサーバを用意する ★★☆☆☆
  • Nginxに移行してWordPress用にチューニングする ★☆☆☆☆
  • その他、サーバやDBのチューニングを行なう ★☆☆☆☆

他にもちょこちょこチューニングをかけていて今の結果に至るわけですが、
上記だけでも体感結構変わるかと思います。
よっぽどアクセス数の多いサイトはもっと高度な対策が必要だと思いますが。。。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です