Shopifyのパフォーマンスとモバイルエクスペリエンス
速い店は充電が速いだけではない 顧客の意向により早く反応する。
目標は、孤立した満点を達成することではなく、実際に使用されているページの読み込み、応答性、安定性を向上させることです。まず測定し、責任者を特定し、その後、ビジネスへの影響に応じて修正します。
ShopifyをShopifyに追加されたものと混同しないでください
このプラットフォームは、ホスティング、CDN、およびいくつかの最適化を提供します。スローダウンは、テーマ、アプリ、マーケティング スクリプト、メディア、カスタマイズによって発生することがよくあります。
1 つのスコアがすべてを物語っているわけではありません
実際のユーザーデータ、複数のページタイプ、ラボテストを比較する 高速なホームページは、遅い製品シートを補うことはできません。
注意すべき3つの次元
目に見えるメイン コンテンツ (多くの場合、大きな画像やタイトル) が利用可能になったときの測定。
インタラクション後の応答速度を観察します: メニュー、バリアント、フィルター、バスケット、またはボタン。
ロード中の予期しないコンテンツの動きを測定します.
Shopifyは、十分な量が利用可能な場合、これらの指標を実際のデータからWebパフォーマンスレポートに集約します。
6ステップの診断方法
重要なページを選ぶ
少なくともウェルカム、主要なコレクション、代表的な製品シート、バスケット、編集ページをテストしてください。
モバイルから始めましょう
接続、プロセッサ、画面サイズにより問題がより目立つようになります。ツールを補完するために実際の電話を使用してください。
Shopifyレポートを読む
コア Web バイタル、影響を受けるページ タイプ、インストールまたは変更に対応するイベントを観察します。
PageSpeed Insights と比較してください
ラボテストは、ブロッキングリソース、重い画像、スクリプト、過剰なブラウザ作業を見つけるのに役立ちます。
原因を分離します
テーマのコピーをテストし、アプリケーション ブロックまたはスクリプトを一時的に無効にしてから、前後で比較します。
公開後の測定
実際のデータは変更を反映するのに時間がかかります 日付を文書化し、変換も監視します。
最もコスト効率の高い最適化
アプリケーションを監査します
十分な値のない関数を削除し、アンインストール後に残るスクリプトをチェックします。
メインイメージを明るくします
適切なサイズで提供し、有用な品質を維持し、メインコンテンツを構成する画像を遅らせないようにします。
レスポンシブ画像を使う
ブラウザは、モバイル上の巨大なデスクトップ ファイルではなく、画面に優しいバージョンをダウンロードする必要があります。
JavaScriptを減らす
可能な場合はHTMLとCSSを好みます 必要なページでのみ関数を読み込みます。
非必須スクリプトを延期します
すべてのチャット、レビュー、地図、ビデオ、マーケティング ツールが最初の表示をブロックするわけではありません。
マスターフォント
ファミリとファットを制限したり、必須ファイルのみをプリロードしたり、システム フォントを検討したりできます。
埋蔵量
コンテンツのジャンプを避けるために、画像、ビデオ、ウィジェットの幅と高さを設定します。
大きなコレクションを漕ぎましょう
ページ分割や制御されたロードで十分な場合は、一度に何百もの製品をロードしないでください。
マーケティング追跡をクリーンアップします
未使用のタグを削除し、タグ マネージャーを介してロードされた各ツールの値を確認します。
影響による優先順位付け
| アクション | いつもの優先度 | なぜ |
|---|---|---|
| 重くて役に立たないアプリケーションを削除します | 高い | 複数のページにわたる JavaScript、クエリ、ブラウザの動作を削減できます |
| モバイルヒーローを最適化します | 高い | 最大の可視要素は、知覚される負荷に影響を与えることがよくあります |
| 喫水線の下でビデオを遅らせます | 高い | 目に見えないメディアをすぐに読み込まないようにしてください |
| フォントと脂肪を制限します | 平均 | ダウンロードを減らし、テキスト表示を高速化します |
| 繰り返しの液体コードをクリーニングします | 平均 | 複雑なモデルのレンダリング時間を改善できます |
| 小さなアイコンで数キロバイトを獲得します | 弱い | 主要なスクリプトとメディアが引き続き重い場合、影響は限定的です |
画像: 本当に重要な設定
する ため
- 複数の幅を持つShopifyイメージフィルターを使用します
- スペースを予約する寸法を入力します
- 画面下にメディアを遅延読み込み中
- Shopify CDNでリソースをホストします
- モバイルトリミングをテストします
避けるため
- 同じ 3000 px 画像をすべての画面に送信します
- 理由なしにメインビジュアルに遅延負荷をかけます
- 複数の重いスライダーを使用します
- 高精細で自動ビデオをロードします
- カルーセル内の目に見えない画像を乗算します
サードパーティのアプリケーションとスクリプト: 値で決定します
関数を特定します
それは実際に何を生み出します: 販売、信頼、サポート、データ、または単純な装飾?
範囲を測定します
スクリプトは、製品またはカートでのみ役立つ場合にすべてのページに読み込まれますか?
ネイティブ関数を検索します
テーマまたはShopifyはすでに軽量なソリューションを提供している可能性があります。
前/後にテスト
ブロックありとなしのテーマのコピーを比較し、データと売上が正しいかどうかを確認します。
きれいに削除する
アンインストール後、アクティブなままになる可能性のあるコード スニペット、タグ、ファイルがないか確認します。
文書
各外部スクリプトの所有者、目的、および改訂日を保持します。
テーマの技術的な最適化
プログレッシブ JavaScript
製品の発見や購入などの重要な機能は堅牢なままである必要があります。ページ全体を依存させるのではなく、JavaScript を使用して改善します。
ノンブロッキングスクリプト
適応された属性と条件付きロードにより、ファイルが最初のページ構築を遅らせるのを防ぎます。
有効な液体
ループ内で複雑な計算を繰り返さないようにし、Shopifyツールで遅いセクションを分析します。
ターゲットcss
全体的な依存関係を減らし、ページにないコンポーネント スタイルの読み込みを回避します。
重要なリソース
最初の画面で必須リソースのみをプリロードします プリロードが多すぎると新しい競争が生まれます。
制御ツール
Theme Check は、大きなバンドル、リモート リソース、ブロッキング JavaScript、および一部の CSS 依存関係を見つけることができます。
してはいけないこと
何としても100点を追求してください
収益性の高い機能をいくつかのポイントで削除しないでください。技術的なコストと商業的価値を比較してください。
受信のみを最適化します
訪問者は多くの場合、製品シート、コレクション、またはアイテムに直接到着します。
診断なしでスピードアプリをインストールします
追加のレイヤーは必ずしも原因を修正するとは限らず、JavaScript を追加する可能性があります。
すべてのコンテンツを遅延ロードします
最初の重要なビジュアルはすぐに表示されるはずです 遅延ロードは、可視領域の下で特に便利です。
必須の追跡を削除します
注文、割り当て、コンプライアンスに必要なツールを保存し、そのロードを最適化します。
アクティブなテーマをコピーせずに編集します
重複して作業し、コースをテストし、回復可能なバージョンを保持します。
7日間の行動計画
よくある質問
どのようなPageSpeedスコアを目指すべきですか?
良い経験を保証する単一のスコアはありません 何よりも、有用な関数を削除することなく、メトリクス、重要なページ、実際のデータを改善するように見てください。
Shopifyは自然に遅くなりますか?
Shopify は最適化されたインフラストラクチャと CDN を提供します。最終的なパフォーマンスは、追加されたテーマ、メディア、アプリケーション、スクリプトに大きく依存します。
すべてのアプリがストアの速度を低下させていますか?
いいえ それらの影響は、コード、ページの読み込み、機能によって異なります。それぞれを個別に評価します。
すべての画像を手動で圧縮する必要がありますか?
Shopifyは変換を行い、CDNを介して画像を提供しますが、常に適切な寸法を要求し、不必要に大きなソースファイルを避ける必要があります。
改善が見られるまでどれくらいかかりますか?
ラボテストはすぐに応答しますが、実際のユーザーに基づくレポートにはさらにアクセスする必要があり、遅延が発生する可能性があります。
適切な最適化は、値を削除せずにブレーキを削除します
Shopifyストアをモバイルでより速く、より安定して、より楽しくします
変更を加える前に、テーマ、アプリ、スクリプト、メディアを監査してもらいます。
