これをしたらページスピード改善した～！という内容メモです。
- 小分けにしていたCSS6つを2つまで統合。ページスピードインサイトでいう「クリティカル リクエスト チェーンを回避してください」が該当しそうだったので対応してみた所、微かにページ速度改善したっぽい。javascriptも同様にできそう。
- Total Blocking Time対策。tableタグをめちゃくちゃ多用していたページはTotal Blocking Timeが大幅に増えていたのでdl/dt/ddのタグでtableのような表を作り対応。これは大幅に削減につながったかも。
- 「画像要素で
widthとheightが明示的に指定されている」や「レイアウトが大きく変わらないようにする」の部分に該当。画像の縦横比は良く変更するのでなるべく<img>タグにwidth/heightを入れる手間は減らしたいけどどうにかしたかったので、共通で入るサイズのバナーはaspect-ratioで指定。CLS値改善効果あり。 - javascriptで後回しで良いのはdeferもしくはasync追加とか。コレはアチコチのスピード改善サイトに書いてあったので言わずもがな感。
- flexslider2のCLS値に関して。どう足掻いてもスクリプトで後からサイズ調整・呼び出ししてる動作の都合があるので、CSSのアニメーション使ってスライダー範囲を最初opacity：0にして、ある程度の秒数後にフェードインするようにopacity:1のアニメーション追加調整。CLSが完全に0になる。ヨシ🐈👉