PageSpeed Insightsのパフォーマンス改善のためにやったこと
PageSpeed Insightsのパフォーマンス改善のためにやったことのまとめです。
サイトの表示速度は検索順位に影響する。高速化することでSEO対策として有効となるのは、Webサイトを運営しているユーザーなら知っていることと思う。
ところが当サイトでは、PageSpeed Insightsでパフォーマンス診断をしてみたら、思ったよりスコアがよくない。
一般的には50点未満であれば改善しないといけないといわれているけど、できれば高得点をとりたいと思うのはITエンジニアだからだろうか。
結論からいえば、いろいろ試したことで99点まで改善できた。
ここでは PageSpeed Insightsのパフォーマンス改善のためにやったこと を紹介します。
JavaScript/CSSを圧縮する
当たり前のことだけど、読み込み量が少なくなればなるほど、表示速度を速くすることができる。
自前のCSSやJSがあれば最小化（minify）して使用することをおすすめする。また、jQueryなどのライブラリについてもminifyバージョンを使うようにしよう。
| 通常バージョン | https://code.jquery.com/jquery-3.4.1.js |
|---|---|
| minifyバージョン | https://code.jquery.com/jquery-3.4.1.min.js |
可能であれば、CDN経由での読み込みはやめてローカルに配置するようにしよう。
Webフォントはローカルに配置する
Webフォントは、表示速度を遅くさせてしまう要因になりがち。必要以上に多くのWebフォント使用は避けた方が良い。
とはいえ、デザインの観点から使用が避けられない場合もあると思う。その場合は、CDN経由での読み込みはやめてローカルに配置するようにしよう。
よく利用されるFont AwesomeとGoogleフォントをローカルに配置して使う方法をまとめてあるので、参考にしてもらえればうれしい。
画像を圧縮する
画像は、枚数が多かったり容量が重いと表示速度に影響する。不必要に大きいサイズの画像はやめて、適切なサイズにリサイズすることで画像の容量を低くできる。
必要最低限の画像を使うように心がけることも重要だ。WordPressではプラグインで圧縮することもできるので、その当たりをチェックしてみてほしい。
キャッシュツールを導入する
当サイトはWordPressを利用しているので、WP Super Cacheプラグインを使ってキャッシュをしている。
WP Super Cacheとは、静的なHTMLファイルを自動生成し、それを表示することによってサイトの表示速度を改善してくれるキャッシュプラグインだ。記事を開く度にHTMLファイルを動的に読み込むわけではないので、かなりの高速化が見込める。
まとめ
PageSpeed Insightsのパフォーマンス改善のためにやったことを紹介しました。
当然のことなんだけど、表示速度が遅いまま改善をおこなわないと、デメリットが大きい。なんといっても検索順位に影響するんだからね。とはいえ、あんまり点数にこだわりすぎていると疲れてしまう。適切な改善で、適度なスコアを継続的に得られるようにWebサイトを運用していくことが大切じゃないかなと思いました。
おつかれさまでした。