PageSpeed Insightsで100点が取りたい！ 総まとめ編
公開日: 2023.09.27
最終更新日: 2023.09.26
こんにちは！にょろです。
前回、前々回とPageSpeed Insightsのパフォーマンスの点数を上げるためにできることとして、
次世代画像フォーマットのwebpとWebフォントについての記事を書かせていただきました。
まだ読まれていない方はぜひ読んでみてくださいね。
さて、今回は上記以外にも細々と試してみたことがあったので、それらを「総まとめ編」としてお伝えできればと思います。
画像の圧縮
webpにするのはちょっと大変…でも画像は軽くしたい。という方はとりあえず画像の圧縮から始めてみましょう！
おすすめのツールはこちら→TinyPNG
画像の遅延読み込み
レポートに「オフスクリーン画像の遅延読み込み」と記載があった方にはLazy loadingを有効にするのがおすすめです。
<img src="assets/img/img01.png" loading="lazy">こちらを記述するだけで遅延読み込みをしてくれます。
ただ、ファーストビューで使用されている画像に設定するとパフォーマンスが下がるのでそれだけは注意です。
レイアウトシフトの防止
レイアウトシフトに対する指摘があった場合にはimgタグに「width」と「height」の記述がされているか確認してみましょう。
指定しなくても画像は表示されるのでついつい忘れがちですが、画像が読み込まれる前と後でレイアウトのズレが生じてしまうので忘れずに記述しましょう。
<img src="assets/img/img01.png" width="300" height="200">Javascriptの読み込み位置の変更
古いサイトなんかは<head>内に記載されていることが多いかと思いますが、読み込み後すぐに動かしたい動作がない限りは</body>の直前で読み込むのが吉です。
また、画像同様に「defer」「async」で遅延読み込みができるので記述するとより良いと思います。
jQueryなどの外部ライブラリを使っている場合はDOMの生成が終わったタイミングで実行される「defer」で指定します。
<script src="assets/js/main.js" defer></script>
</body>
</html>CSS/JavaScriptの圧縮
圧縮をすることでソースコード中のコメントや改行を削除し、ファイル自体がコンパクトになり処理を高速に行えるようになります。
ただ、予期せぬ不具合が起きたりもするので圧縮前に必ずバックアップを取っておくようにしましょう。
おすすめのツールはこちら→Syncer
キャッシュの設定
レポートにキャッシュに関しての記述があった場合は、キャッシュの期限を延ばす記述を.htaccessへ追加してあげるのが良いと思います。
Google Developersによると”キャッシュ期間は少なくとも 1 週間、静的アセットや更新頻度の低いアセットについては最大で 1 年間とすることをおすすめします。”とのことなので、
ご自身の環境に合わせて適宜設定していくといいと思います。
ただし、.htaccessは1文字間違えただけでサイトが真っ白になったりアクセスできなくなります。取り返しのつかないことにならないように、バックアップは必ず取っておきましょう！
下記は記述例です。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
</IfModule>まとめ
いかがでしたか？ここまでやればパフォーマンス最悪！状態からは脱却できると思います。
わたしも今後、新規で制作する際には今回学んだ点をしっかり反映させてやっていきたいと思います。
皆さんも是非参考にしてみてくださいね！
では、また～
