Googleのサイトの読み込み速度が測れるPageSpeed InsightsにてTOPページの読み込み速度の改善を行いました。
スマホのスコアが96(先ほど再度測定したら97まで上がりました)、
パソコンがスコアが99。
かなり満足するレベルまであげられました。
色々試して画像の遅延読み込みをしたのですが導入しない方が早かったです。
ウェブフォントの読み込みについてはcssで直に記載してfont-display: swap;を追加するとスコアが上がりました。
一度jsでウェブフォントの遅延読み込みしてみたんですがあまり上がらなかったのでやめました。
一番苦労したのは膨大なcssを縮小したところ。
とにかくデフォルトのstyle.cssとbootstrap.min.cssが重い。
でも結構重要な役目を担ってる。
なのでGoogle Chromeの開発者ツールのCoverageを使い、使用しているcssだけ抜き取って直で記載しました。
これで10近くスコアが上がりました。
他のページに影響が出ないようにブロックを使って<head>の中に記載して下層レイアウトに読み込ませるようにしました。
画像は出来る限りサイズを小さく、更に圧縮ツールで圧縮。
本当は次世代フォーマットを使用した方が良いらしいが調べたところ対応ブラウザなどの問題があるので次世代じゃなくなって来た辺りで導入をしたい。
サーバも今もより早いところはあるしクラウドでnginxオンリーにすればもっと早くなるかもしれないけど今の自分にはこれが上限ですね。
でもスコア自体はこれで満足です。
下層ページについてはまた今度の機会に。
商品詳細は画像遅延読み込みした方が良いのだろうか、試してみたい。
PageSpeed Insights：
PageSpeed Insights
developers.google.com
コメント