これをしたらページスピード改善した~!という内容メモです。
- 小分けにしていたCSS6つを2つまで統合。ページスピードインサイトでいう「クリティカル リクエスト チェーンを回避してください」が該当しそうだったので対応してみた所、微かにページ速度改善したっぽい。javascriptも同様にできそう。
- Total Blocking Time対策。tableタグをめちゃくちゃ多用していたページはTotal Blocking Timeが大幅に増えていたのでdl/dt/ddのタグでtableのような表を作り対応。これは大幅に削減につながった。
- 「画像要素で
width
とheight
が明示的に指定されている」や「レイアウトが大きく変わらないようにする」の部分に該当。画像の縦横比は良く変更するのでなるべく<img>タグにwidth/heightを入れる手間は減らしたいけどどうにかしたかったので、共通で入るサイズのバナーはaspect-ratioで指定。これもページスピード改善につながった。 - javascriptで後回しで良いのはdeferもしくはasync追加とか。コレはアチコチのスピード改善サイトに書いてあったので言わずもがな感。