ShopifyのLCPを改善する方法｜管理画面の「悪い」を直す3つの手順（食品通販10店の実測）

Shopifyで食品を売る10店のトップページを測ったところ、10店ともLCPが4秒を超えていました。

LCPは、ページを開いてから、画面の中で一番大きい写真や見出しが表示されるまでの時間です。10店のうち7店は、写真そのものを読む時間より、ブラウザが写真を読み始めるまでに時間を使っていました。

自分の店が当てはまるかは、PageSpeed Insights（Googleの無料の計測ツール）に店のURLを入れて、スマホの結果の「LCP の内訳」と「LCP リクエストの検出」を見ると分かります。見方は、このあと直し方ごとに書きます。

管理画面の「LCP・INP・CLS」の見方

Shopifyの管理画面の「ウェブパフォーマンス」には、3つの数字が並びます。どれも、実際にお店を見に来たお客さんのスマホやパソコンで測った数字です（Shopify ヘルプ）。

基準はGoogleが決めたものです（web.dev）。間の値は「改善が必要」になります。

3つの数字が悪いと起きること

• LCP：商品の写真が出るまで待たされると、中身を見る前にページを閉じる人が出ます
• INP：「カートに入れる」を押しても反応がないと、押せていないと思って何度も押したり、あきらめたりします
• CLS：押そうとしたボタンが、後から出てきた画像に押されて下にずれ、別のボタンを押してしまいます

Googleが依頼してDeloitteが行った調査（2019年、37ブランド）では、表示の速さを示す指標がそろって0.1秒短くなると、小売サイトの購入率が8.4%上がりました（web.dev の事例）。また、Googleは、この3つが良いページは、検索の評価で重視している考え方とも合うと説明しています（Google 検索セントラル）。数字を良くしただけで、検索の順位が上がるわけではありません。

「P75」の意味と、数字の見比べ方

P75は、ページが表示された回を速い順に並べたとき、75%がこの時間以内だった、という数字です。表示が遅かったほうの4分の1で決まるので、速い回が多くても、遅い回線のお客さんが4人に1人を超えると数字が悪くなります。数字はトップページだけでなく、お店の全ページの集計です。広告やSNSから商品ページに直接来るお客さんが多い店は、商品ページの1枚目の写真にも、このあとの3つの直し方が当てはまります。

PageSpeed Insightsでは、上の欄に実際のお客さんの数字（管理画面に近いもの）、下の「診断」に計測ツールの数字が出ます。「診断」は遅い回線を想定して1回測った結果で、管理画面より長く出ることがよくあります。原因を探すときは「診断」、効果を確かめるときは管理画面の数字を見ます。

Lighthouseで測ると、食品通販10店すべてでLCPが4秒を超えました

2026年10月4日に、Shopifyで食品を売る10店のトップページを測りました。分野は、洋菓子・和菓子・麺類・飲料・お酒などです。GoogleのLighthouse（PageSpeed Insightsの「診断」と同じ計測ツール）を、スマホの条件で各店3回動かし、真ん中の値をとりました。

同じ条件で当社サイトのトップを測ると、LCPは2.1秒、重さは約2.9MBでした。当社サイトは商品を売る店ではないため、カートや定期購買のアプリが無く、そのぶん軽くなっています。

時間を一番使っていたのは「写真を読み始めるまで」

PageSpeed Insightsの「LCP の内訳」は、LCPの時間を4つに分けて見せてくれます。10店で、どこに一番時間を使っていたかを数えました。

写真そのものを読む時間が一番長かった1店は、トップに動画を置いていました。（）の中は、PageSpeed Insightsの画面に出る名前です。

直し方① 見つけさせる：最初の1枚をページに直接置く

ブラウザは、最初に届いたページの文書（HTML。PageSpeed Insightsでは「ドキュメント」）を上から読み、書かれている写真を順に読み始めます。ところが、10店中6店では、トップの一番大きい写真がその文書に直接書かれていませんでした。6店のトップには、次のような作りが使われていました。

• 季節のキャンペーン画像を切り替えるスライダー
• 写真を背景として敷いた見出しの帯
• スクロールに合わせて後から写真を差し込む仕組み

こうした作りでは、ブラウザはデザインの指定やプログラムを読んでからでないと、どの写真を出すかが分かりません。スライダーでも、作りによっては1枚目が文書に直接書かれているものもあります。自分の店がどちらかは、PageSpeed Insightsの「LCP リクエストの検出」で、次の3つの項目を見ると分かります。

1. 「リクエストは最初のドキュメントで検出可能です」：満たされていなければ、写真が文書に直接書かれていません。10店中6店が当てはまりました
2. 「LCP リソースで loading=lazy を使用しないでください」：満たされていなければ、最初の写真に「後で読む」の指定が付いています。10店中1店が当てはまりました
3. 「「fetchpriority=high」を適用する必要があります」：満たされていなければ、最初の写真に「最優先で読む」の指定がありません。10店中9店が当てはまりました

直し方は、最初に見える1枚だけをスライダーから外し、テーマの画像のセクションで単独で置くことです。切り替えたいキャンペーン画像は、その下のスライダーに並べます。ここまではテーマエディタの操作で自分でできます。2と3の指定はテーマのコードを直す作業なので、制作会社に頼む部分です。

直し方② 軽くする：日本語フォントを減らす

最初の写真を見つけやすくしても、同じ時間にほかの大きなファイルを読み込むと、写真の表示が遅れます。10店で目立ったのは日本語フォントです。日本語の書体は文字の数が多く、1ファイルが大きくなります。

10店中3店が、1ファイル約2MBの日本語フォント（Shopifyの書体の一覧にある「Noto Sans Japanese」など）を、太さの数だけ2〜5ファイル読み込んでいました。日本語フォントの合計は4〜10.5MBです。「読んだあと表示されるまで」が一番長かった2店は、どちらもこの3店に入っていました。

同じ日本語フォントでも、使う文字の分だけ小分けに届ける形（Google Fonts）にしている店は、日本語フォントの合計が約0.3〜1.2MBで済んでいました。

自分の店の書体は、管理画面の「オンラインストア」→「テーマを編集」→「テーマ設定」（歯車のアイコン）→「タイポグラフィ」で確かめられます（Shopify ヘルプ）。見出しや本文に日本語の書体を選んでいたら、次のどれかを検討します。

1. 太さの数を減らす：見出し・本文・太字で別の太さを使うほど、ファイルが増えます。自分でできます
2. 本文はシステムフォントにする：お客さんの端末にもともと入っている書体で、ダウンロードが起きません。見出しだけブランドの書体にするやり方もあります。自分でできます
3. 小分けに届く形で読み込む：テーマのコードを直す作業なので、制作会社に頼みます。当社サイトはこの方法で、トップページの重さが8.7MBから3.6MBになりました（日本語フォントだけで6.5MBから1.5MB）

直し方③ 止めない：表示を待たせる演出を外す

写真を読み終えていても、表示を待たされることがあります。当社サイトでは、ここも大きな原因でした。外したのは次の2つです。

• 最初の画面を透明から始める演出：ふわっと浮かび上がるアニメーションを最初の画面にも付けていたため、プログラムが動くまで見出しが見えませんでした。演出は、画面の下にあるセクションだけに付けます
• ページ切り替えのアニメーション：ページを移るときの演出がオンになっていると、本文が届くまで最初の表示が止まります。Shopifyの標準テーマ「Horizon」では、「テーマ設定」→「アニメーション」→「ページ切り替え」でオフにできます

どちらも、テーマエディタでオフにできるものは自分で、テーマのコードに書かれた演出は制作会社に頼みます。

アプリは、INPとCLSの側で見直す

10店が読み込んでいた外部サービス（アプリや計測のタグ）は、中央値で約14、多い店で30ありました。定期購買・ギフト・配送日時の指定・レビューなど、食品通販は入れるアプリが多くなりがちです。当社サイトでアプリを止めて比べたときは、画面が固まる時間は減ったものの、LCPへの効きめは見えませんでした。アプリは、ボタンを押したときの反応（INP）の側で見直します。使っていないアプリでも、テーマの「アプリ埋め込み」がオンのままだと読み込まれます。見直し方は「Shopifyの表示速度改善｜アプリ整理の5手順と当社の実測結果」にまとめています。

CLSが悪いときは、後から読み込まれる画像やバナーに、場所が取られていない状態です。画像の縦と横の比率をテーマで決めておくと、読み込む前から高さが確保されて、ずれなくなります。

当社サイトでやったことと結果

当社サイト（encarance.com）は、2026年8月から9月にかけて次のことを直しました。最初の画面の演出を外したほかは、文言と配置は変えていません。

2026年10月4日の時点で、管理画面のLCP P75は1,940ミリ秒で、前の期間と比べて74%短くなりました。INPは56ミリ秒、CLSは0.01で、3つとも「良い」です。

よくある質問

ShopifyのLCPとは何ですか？

LCP（Largest Contentful Paint）は、ページを開いてから、画面の中で一番大きい写真や見出しが表示されるまでの時間です。Shopifyの管理画面の「ウェブパフォーマンス」では、実際に訪れたお客さんの数字をもとに、2.5秒以内なら「良い」、4秒を超えると「悪い」と判定されます。

PageSpeed Insightsと管理画面で、数字が違うのはなぜですか？

PageSpeed Insightsの「診断」は遅い回線を想定して1回測った数字で、管理画面は実際のお客さんの数字です。条件が違うので一致しません。PageSpeed Insightsの上の欄に出る実際のお客さんの数字は、管理画面に近くなります。

トップのスライダーは、やめないといけませんか？

最初に見える1枚だけをスライダーの外に置けば、スライダーそのものは残せます。スライダーは、最初の1枚の下に置きます。

直してから管理画面の数字が変わるまで、どれくらいかかりますか？

管理画面の数字は、選んだ期間の訪問をまとめたものです。30日の期間で見ると、直した後の訪問に入れ替わるまで約1か月かかります。期間を短くして見ると、変化が早く分かります。

どこから直すかは、PageSpeed Insightsの「LCP の内訳」で、どの部分が一番長いかを見ると決められます。当社のENCOMMERCEでは、食品のShopifyストアの表示速度の調査と修正も、月商の規模にかかわらずお受けしています。