商品ページの改善策は、どれも同じことを言います。もっと足しなさい、と。寸法を足す、素材を足す、お手入れを足す、レビューを足す、サイズ表を足す。私たち自身、そう書いてきました。
ほとんど書かれないのが、その文の後半です。足したものは1つずつ、ブラウザがダウンロードし、解釈し、配置しなければならないものとして届きます。すべての疑問に答えているが表示に6秒かかる商品ページは、何にも答えていません。答えが描画される前に、お客様は離れています。
いま「遅い」とは何を指すのか
これはすでに主観の問題ではありません。Google が3つの数値を公開していて、ページはその内側にあるか、ないか、のどちらかです。
- Largest Contentful Paint が2.5秒未満 — 画面上でいちばん大きい要素が描画されるまでの時間。商品ページではたいていメイン写真です。
- Interaction to Next Paint が200ミリ秒未満 — タップに対してページが目に見えて反応するまでの時間。サイズ表のタブを押しても何も起きない、はこの数値が落ちている状態です。
- Cumulative Layout Shift が0.1未満 — 読み込み中にページがどれだけ動くか。ブロックが遅れて読み込まれ、カートに入れるボタンが押そうとした瞬間に下へずれる、はこの数値です。
見落とされがちなのが、その判定方法です。実際の読み込みの75パーセンタイルで判断されます。平均ではありません。オフィスのWi-Fiにつないだご自身のパソコンでもありません。4回に3回が良好である必要があり、つまりいちばん遅い4分の1の訪問者——古いスマートフォン、電波の悪いモバイル回線——がスコアを決めます。
重さの原因は、たいてい文章ではありません
商品ページに足す文章は、ほぼ無料です。寸法とお手入れを1,000語書いても数キロバイトにしかなりません。ページが遅くなる原因はそこではありません。
遅くなる原因は、それを表示するために持ち込まれる仕組みのほうです。Shopify 自身がヘルプで明言しています。アプリは機能を足すが、ストアを遅くすることもある。ストアフロントで資産を読み込むアプリが多すぎるとパフォーマンスが落ちる、と。そして許容できるコストに数字も置いています——アプリは Lighthouse のパフォーマンススコアを10ポイント以上下げてはならない。しかもトップページ・商品ページ・コレクションページの加重平均で測られ、商品ページの比重が40%です。
1アプリあたり10ポイント。その上限ぎりぎりのアプリを6つ入れたら、という計算はもう安心できるものではありません。Shopify のテーマストアは、アプリを1つも入れていない状態で平均60以上をテーマに求めています。
入れる前に確認する4つのこと
パフォーマンスの専門家になる必要はありません。4つ聞いて、答えを書き留めておけば十分です。
- 全ページで読み込まれるのか、置いた場所だけか。これが最大の差でありながら、アプリの掲載ページからは見えません。テーマアプリ拡張として作られたアプリは、ブロックを置いたページでだけ資産を読み込みます。テーマにスクリプトを差し込むアプリは、その機能を使わないページ——トップ、規約、購入までの導線——でも動きます。
- テーマのコードを編集するのか。Shopify の資料は明確です。テーマアプリ拡張はテーマのコードを編集しないため、テーマを壊すリスクが下がります。テーマにコードを貼り込むアプリは、アンインストールしてもそのコードを残します。後からそれを探すのはご自身の仕事になります。
- 読み込む前に場所を確保するか。最後に現れてページを押し下げるブロックは、レイアウトのずれとして跳ね返り、押し間違いという形で体感されます。目で確認できます——スマートフォンで商品ページを開き、何かが飛び跳ねないか見るだけです。
- 結局いくらかかったのか。ここで、議論に決着をつける唯一の手順に進みます。
前後で測る。10分で終わります
PageSpeed Insights を、インストール前に商品ページ1枚で実行し、インストール後にもう一度実行します。トップページではありません。商品ページは Shopify 自身の計算で比重がいちばん大きく、そして情報が載っている場所です。
結果を読む前に、知っておくとよい注意が2つあります。スコアは実行ごとに動くので、Shopify は1回を信じるのではなく連続した複数回を平均するよう案内しています。またラボのスコアは実際の訪問者の体験そのものではありません。レポートに十分なデータがある場合、実際の端末と回線を反映しているのはフィールドデータのほうです。
これをアプリごとに行ってください。年に一度、慌てて測るのではなく。10ポイントの低下は、何と引き換えたのかが見えていれば受け入れられますし、見えていなければ断れます。
今週やること
- Wi-Fiを切り、モバイル回線のスマートフォンで商品ページを1枚開く。シミュレーションではなく実機で。2分で済み、どんなスコアより説得力があります。
- 入れているアプリを書き出し、使っていないものに印をつける。Shopify の案内も、必要でないものは外すこと、です。使っていないのに資産を読み込むアプリは、コストだけが残ります。
- 何も必要としないページで何が読み込まれているか見る。プライバシーポリシーのページに商品もレビューもサイズ表もありません。それでも何かが読み込まれているなら、全体で動いている必要のないものを見つけたということです。
- そのうえで、情報は足し続ける。この記事は、商品情報を充実させることへの反対ではありません。足すたびに「これはいくらかかるのか」を聞こうという話です。その答えが、ストア全体で動くもう1本のスクリプトではなく、数キロバイトの文章であるように。
ページに負担をかけずに情報を足せること。それが Mitasu for Apparel の設計の出発点です。ブロックは1つ、置いたページだけで動き、ストア全体で走るスクリプトはありません。
出典: web.dev — Web Vitals／web.dev — How the Core Web Vitals metrics thresholds were defined／Shopify — Best practices for apps in the Shopify App Store／Shopify ヘルプセンター — オンラインストアのパフォーマンス改善／Shopify — テーマのパフォーマンスに関するベストプラクティス。
