Top画面の表示速度が直帰率と関係が深いらしく、以下のサイト(ほとんどGoogle提供・方針)で現在会社で担当している開店ポータルのチェックを行ったところが思ったより点数及び速度がイマイチでした。
https://testmysite.withgoogle.com/intl/ja-jp
https://developers.google.com/speed/pagespeed/insights/
大きく対応するべき内容は以下の物
- 画像の適切なサイズ、Format
- レンダリングを妨げるリソースの除外
- 使用していない CSS の遅延読み込み
- テキスト圧縮の有効化
- その他
一旦会社の運営しているサーバーは勝手に試すのも出来ないし、テストサーバーはIP等の制限で確認出来ないので、以前から運営している個人サイトで試してみました。経験もない上家に帰って少しずつ進んだので相当時間がかかりましたが、insightsサイトで40位の点数が90位になりました。対応内容は以下の通りです。
画像の適切なサイズ、Format
・個人のサイトは画像はあまり使用してないので対応なし
レンダリングを妨げるリソースの除外
・Critical CSSの分割
・CSSのpreload化(「https://github.com/filamentgroup/loadCSS」を利用)
使用していない CSS の遅延読み込み
・ChromeのCoverageで分析
・Chromeの拡張機能:CSS used(https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff)を利用
テキスト圧縮の有効化
・ApacheのGzip
・Cloudflareの利用(Apacheの対応は要らなかった。CDN上でBrotliで圧縮されていた)
※ 「レンダリングを妨げるリソースの除外」部分が専門分野でもないので一番難しいかった。
※ 違う分野で面白く、やりがいがあった。