サイト表示速度の遅さは離脱率の上昇、カゴ落ち率も上昇、当然SEOにもよろしくなく、ひいては売上悪化を招きかねませんので、早いうちに手を打っておきたいところです。
弊社でもショップサイトの速度改善（Core Web Vitalsの改善）は承っておりますのでご利用いただけるとありがたいですが、ご自身で対応したいときに何を見直すべきか、いくつかポイントをあげておきます。
画像要素のサイズ指定に漏れはないか
商品画像、ロゴ画像、バナーなど、ショップサイトにはいくつも画像要素（img）があると思います。
最低限、img要素にはwidthとheight属性を指定します。
注意すべき点として、width, height 両方の指定が必須です。片方しか指定していなかったり、整数以外の指定（%指定など）ではいけません。
次のCSSを書き足して、テンプレートプレビューしていただき、赤枠があるものが修正対象です。（そのまま公開しないようにご注意ください）
:is(img:not([width]), img:not([height]), img[width=""], img[height=""]){
border: 10px solid red !important;
}そもそもの画像ファイルが大きすぎないか
結構あるあるのポイントとして、オリジナルの画像ファイルが過度に大きい場合があります。
よくあるのが、200pxほどのバナーを表示させるのに4,000pxぐらいの大きな画像ファイルを指定しているケースなど。
手間を惜しまず、適切なサイズにトリミングした画像ファイルを使用しましょう。
画像の先読み、遅延読み込みは適切か
同じく画像要素について、ファーストビュー（サイトにアクセスしたとき最初に表示されている画面）に表示されない画像には遅延読み込みを指定するのが基本施策です。
<!-- 遅延読み込みしたい画像にはloading="lazy" を追加 -->
<img loading="lazy" />
画像データのロードを遅らせることで画面描画が速くなります。
アプリをやたらと利用していないか
カラーミーには様々なアプリが用意されていますが、便利さと表示速度はトレードオフの関係です。
カラーミーアプリは基本的に外部のソースやデータにアクセスする必要があるので、無計画に導入していると信じられないレベルで激重サイトができあがります。
ご自身のショップには何が必要か、何が不要かをきちんと整理して計画的に利用しましょう。
不要なJavaScriptソースがないか
利用されているテンプレートにもよりますが、少しの工夫で削除可能なJavaScriptソースを読み込んでいる場合もあります。
テンプレートに元々入っていたJavaScriptソースは何を実行しているか確認してみると良いでしょう。
HTMLが魔窟になっていないか
HTMLが複雑に入り組んだ構成になっていると表示にも時間がかかりますし、何よりもメンテナンスが大変です。後任で魔窟を引き継いだりしたらもっと大変です。
パッとみて何がどこに書かれているのかわかる、風通しの良いHTMLコードになるように心がけましょう。
CSSが冗長化していないか
取り組むべき優先度は低いですが、文字数制限ぎりぎりまでCSSが書き込まれているショップ様は結構多いです。
そんなに書くことある？ と思わなくもないのですが、担当者が頻繁に変わるショップ様などでは継ぎ足し方式でどんどん増えていく傾向にあります。
先ほどのHTML同様、CSSが無駄に長いと良いことがありません。
同じCSSスタイルを個別に指定していないか、ある程度まとめられるものはないか、など、HTMLとセットで見直されると良いと思います。
表示速度で悩まれている方はご相談ください（宣伝）
以上、いくつかの見直しポイントを挙げてみました。目新しい内容というわけではないので、あまり参考にはならなかったかもしれません。
表示速度対策は最終的にトライ＆エラーになってくる部分も多く、ご自身ですべて対応なさるとかなり時間がとられますので、よければ一度弊社までご相談ください。ご相談、お見積りだけなら無料です。
