サイトの読み込み速度を上げる時にレンダリングブロックを起こすECCUBE4にあるstyle.cssとbootstrap.min.cssからTOPページに必要なcssだけ抜き出した時に参考にした記事です。
参考リンク(1)：https://thesaibase.com/html/unused-css
参考リンク(2)：https://blog.cybozu.io/entry/2019/08/20/170000
具体的にはChromenの開発者ツールにあるCoverageを使い使用しているセレクタ(緑色)だけをコピーしてブロックに記載し、
TOPページのレイアウトから呼び出し<head>に直接表示させることでかなり速度があがりました。
時間がある時に画像を使う商品一覧と商品詳細ページにも同じようにしようと思ってます。
Coverageを使う時にメニューを開いたりアラートを出したりしてからセレクタをコピーしないとメニュー等に使用しているセレクタが緑色(使用中)にならないので注意です。
コメント