カラーミーショップのCore Web Vital改善

ショップサイト改善のご依頼で、最も多くご相談いただくのが表示速度の改善。端的にいうと「Core Web Vitalのスコアを改善したい」というご依頼です。

先ほど某カラーミーサイトのCore Web Vital改善が終わったところですので、具体的に何をしたのか書いてみようと思います。

サイト改善の結果

前提商品数が万単位のメガショップ。カテゴリーも200近く。バナー画像数点。

欲を言えば90ぐらいまでいきたかったのですが、これ以上踏み込むと利便性の低下 & ご依頼主様の今後の使い勝手が悪くなる　ことが予想されたのでここで終了しました。

では具体的に何をしたのかという話にすすみます。

Core Web Vitalとは、、の話は割愛します。ご存知ない方はGoogleのドキュメントをお読みください。 -> 「Core Web Vitals と Google 検索の検索結果について」

まずは画像の属性が適切に指定されているか確認します。

ショップによって出力するサイズがまちまちなこともあり、テンプレートをそのまま使用しているとwidth、height属性すらありません。

今回もalt属性以外はまったく指定されていませんでした。

aspect-ratioプロパティ（css）を使えばwidth heightは不要　という意見もありますが、私はきちんと指定しておくことを推奨します。

次いで、loading属性とdecoding属性を適切に指定します。

闇雲にloading=”lazy”やdecoding=”async” を書いておけば良いという話ではありませんので、ファーストビューを確認しながら指定します。

１つの画像にloading=”lazy”とdecoding=”async”を併記しているサイトに遭遇することがありますが、併記されている場合、loading=lazyが優先されるそうです。

併記したら表示速度が改悪されそうな気がするので私はやりません。

DOMサイズとは、分かりやすさを最優先して言うとHTML要素の量です。

あまりにもDOMサイズが大きすぎたり、階層が深くなりすぎているとレイアウト計算に時間がかかる為、表示速度も遅くなります。

今回は、カテゴリー一覧をサイドバーとナビゲーションバーに表示させていることもあって、推奨値の4倍近いDOMサイズになっていました。

削除して差し支えないものは削除し、小さくまとめられるものは整理整頓し、最終的には元の３分の１以下まで減らすことができました。

カラーミーショップに限らず、ECサイトサービスには最初から数多くのJavaScriptが読み込まれているので概してスコアは下がりがちです。

さらに独自で機能を追加したりすると、ロード時の処理に時間がかかってしまいどんどん表示速度は落ちていきます。

必要なJSはもちろん削除するわけにいきませんが、そうでないものもあります。

テンプレート制作当時はJSでしかできなかったことが現在はCSSで置換え可能だったり、自社では使用していない機能なので削除しても差し支えなかったり、そんなこんなで不要なJSを削減します。

デフォルトのJSソースの半分以上を消し去り、最終的に、Core Web Vitalのスコアも80台になりました。

実際のCore Web Vitalの改善作業は各サイトの状況ごとに違いますが、今回は一例として作業内容をご紹介しました。

激重な上、他の読み込みまで止めてしまう外部機能を読み込んでいる　など、こちらからどうしようも無いケースもあるのですが、多くの場合は上の手順である程度まで改善可能です。

カラーミーショップの表示速度にお悩みでしたら、ぜひ一度お尋ねください。

今回は諸々の理由で行っていませんが、

この辺りも対処すれば、もう少しスコアはあがったと予想します。