🥇

【Shopify.dev和訳】Themes/Best practices/Peformance/Overview

2021/09/18に公開

この記事について

この記事は、Themes/Best practices/Peformance/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Shopify テーマのパフォーマンスに関するベスト・プラクティス

パフォーマンスは、マーチャントがオンラインストアのテーマを選択する際の重要な要素です。テーマを構築またはカスタマイズする際には、パフォーマンスを考慮して構築する必要があります。パフォーマンスのためにテーマを最適化することは、あなたがサポートするマーチャントの成功と、その顧客の体験にとって重要です。パフォーマンスは、コンバージョン率、リピート率、検索エンジンのランキングに直接影響します。

テーマがShopify テーマストアに提出されると、テーマはベンチマークショップでテストされ、そのパフォーマンススコアが決定されます。Shopify Theme Store に登録されるためには、テーマはホームページ、商品ページ、コレクションページの平均 Lighthouse パフォーマンススコアが 60 以上でなければなりません。開発ストアを使って、テーマに対して同様のテストを行うことができます。

Shopify Theme Store でのテーマのパフォーマンステストについてはこちらをご覧ください。

パフォーマンスの最適化

テーマのパフォーマンスを最適化するために、以下のベストプラクティスを考慮してください。

JavaScript の最適化

以下の原則に基づいて、テーマの JavaScript を最適化します。

JavaScript の使用を減らす
テーマの構築には、主に HTML と CSS を使用することを検討してください。商品の検索や購入など、テーマの基本的な機能には JavaScript を必要としないようにします。その代わり、JavaScript はプログレッシブ・エンハンスメントとして、HTML や CSS では解決できない場合にのみ使用するようにしてください。

CSS は JavaScript よりもはるかに高速に解析・レンダリングを行うことができますので、可能な限り CSS の機能を使ってインタラクティブな機能を構築することをお勧めします。インターネットで「JavaScript の代わりに CSS を使う」と検索すると、より詳しい情報が得られます。例えば、Juan Martín García 氏のブログ「5 things you can do with CSS instead of JavaScript」などがあります。

最小化された JavaScript のバンドルサイズは、16KB 以下でなければなりません。Shopify では、ストアフロントで JavaScript が要求されると自動的に最小化します。

外部のフレームワークやライブラリへの依存度を下げる
JavaScript を使用する必要がある場合は、サードパーティ製のフレームワークやライブラリ、依存関係の導入を避けることを検討してください。代わりに、可能な限りネイティブブラウザの機能と最新の DOM API を使用してください。JavaScript ライブラリをパッケージに含めると、バンドルサイズが大きくなり、ロードタイムが遅くなり、お客様の体験が悪くなります。React、Angular、Vue などのフレームワークや、jQuery などの大規模なユーティリティー・ライブラリは、大きなパフォーマンス・コストがかかります。非常に古いブラウザ(async/awaitをサポートしていないもの)用のポリフィルライブラリの導入は避けましょう。browserslistを使えば、マーケットシェアが 1%以上のブラウザを対象にすることができます。

パーサーブロッキング スクリプトを避ける
パーサーブロッキング スクリプトは、スクリプトが読み込まれ、解析され、実行されるまで、DOM の構築とレンダリングをブロックします。また、ネットワークの混雑を招き、ページのレンダリングを大幅に遅らせます。これは、First Contentful Paint Largest Contentful Paint などの指標に影響を与えます。このような事態を避けるために、スクリプトタグにdeferまたはasync属性を使用してください。

主要なリソースをプリロードし、その他のリソースのロードを延期または回避する

リソースのプリロードは、リソースが発見される前にブラウザがリソースをダウンロードすることを可能にします。一部のリソースを後から読み込むことを選択し、システムリソースを使用すると、お客様がページを有意義に操作する前にダウンロードする必要のあるリソースの最初のパッケージのサイズを小さくすることができます。

リソースヒントを使って主要なリソースを事前に読み込む
リキッドフィルターpreloadキーワード引数を使用することで、テンプレートごとに最大 2 つのリソースヒントをコードに追加することができます。現在は、stylesheet_tagフィルターのみがpreloadキーワード引数を受け付けます。

Shopify はプリロードの指示があるページをレンダリングすると、それ以降のリクエストの Link ヘッダーとしてプリロードのリソースヒントを送信します。

リソースヒントの使用は控えめにしてください。例えば、ページの初期機能に必要なレンダーブロッキングスタイルシートのみをプリロードすることを検討してください(折り返しのコンテンツなど)。

フォールド下の画像のレイジーロード
画像はページ内で必要なときにのみロードし、お客様がページをスクロールするまではプレースホルダーを使用することを検討します。これは、実際よりも早くページが読み込まれているように見えるため、知覚的なパフォーマンスの向上にもつながります。ライブラリを使用するのではなく、imgsrcsetloading attributeslazyに設定してください。

<img src="{{ product | img_url: '550x550' }}" loading="lazy">

フォールドの上に表示されるものは、レイジーロードにしてはいけません。折り返しコンテンツとは、視聴者がページをスクロールする前にページロード時に目にするコンテンツのことです。フォールドの上に表示されるリソースは重要な資産とみなされるべきであり、通常通りロードされるべきです。

クリティカルでないリソースはインタラクションで読み込む
ページには、常に使用されるわけではないコンポーネントやリソースのコードが含まれている場合があります。このようなリソースは、import on interactionパターンで読み込むことで、不要なコードの読み込み、解析、実行を避けることができます。

システムフォントの使用を検討する
システムフォントを使用することで、オンラインストアのテキストがレンダリングされる前に、クライアントが別のリソースをダウンロードする必要がなくなります。

Shopify のサーバーにアセットを置く

Shopify のコンテンツ・デリバリー・ネットワーク(CDN)から可能な限り配信しましょう。アセットに同じホストを使用することで、不要な HTTP 接続を回避し、サーバーが HTTP/2 の優先順位付けを使用してブロックリソースの配信を優先することができます。

Shopify のコンテキストでは、GitHub 統合を使用して手動で、または AssetREST Admin API リソースを使用して、テーマの /assets フォルダにアセットを追加することでこれを行うことができます。これらのアセットへのリンクは、URL フィルタを使って作成できます。Shopify CDN についての詳細はこちら。

レスポンシブ画像を使う

小さなデバイスで大きな画像を見ると、イライラしたり、ページの読み込み速度が遅くなったりします。レスポンシブイメージを使用すると、お客様が使用しているデバイスの画面に合わせて自動的にリサイズされます。

画像サイズを指定することで、品質を落とさずに最小の画像をダウンロードすることができます。ストアフロントが表示される画像サイズを要求し、CDN からダウンロードするファイルサイズを削減します。これにより、ブラウザ側のスケーリングへの依存度が低減されます。

レスポンシブ画像をテーマに追加するには、imgタグやpictureタグにsrcsetsizesなどの HTML 属性を組み合わせます。タグの中では、サイズパラメータを定義したimg_urlアセット URL フィルタを使って画像を参照できます。また、loading="lazy"を使って、画像を遅延ロードすることもできます。

<img
  srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
          {% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
          {% if media.preview_image.width >= 550 %}{{ media.preview_image | img_url: '550x' }} 550w,{% endif %}
          {% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w{% endif %}"
  src="{{ media | img_url: '550x' }}"
  sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
  width="{{ media.preview_image.width }}"
  height="{{ media.preview_image.height }}"
  alt="{{ media.preview_image.alt | escape }}"
>

Liquid コードの最適化

ストアのレンダリングに使われている Liquid は、ほとんどすべて編集することができます。Liquid のコードには効率的な書き方と非効率的な書き方があります。複雑な操作を繰り返し行うと、Liquid のレンダリング時間が長くなり、ストア全体のスピードに影響します。

例えば、コレクション内の商品を価格順に並べたい場合は、ループコードの一部ではなく、コレクション内の商品をループする前に行うべきです。これは、商品の順番が商品ごとに変わらず、商品の順番を計算するとリクエストに処理時間がかかるためです。

Shopify Theme Inspector for Chrome を実行して、オンラインストアのページの処理速度を低下させているコードの行を特定します。このツールを使用したリキッドの分析については、Shopify Engineering ブログのウォークスルーをご覧ください。

テーマチェックを使ってパフォーマンスの問題を特定する

テーマチェックを使用して、大きな CSS や JS のバンドル、リモートアセットへの参照、パーサーをブロックする JavaScript など、テーマコードに含まれる可能性のあるパフォーマンス上の問題を特定することができます。テーマチェックのパフォーマンスチェックについては、こちらをご覧ください。

パフォーマンスのテスト

Shopify は、ストアのパフォーマンスを理解するのに役立つスピードレポートをマーチャントに提供しています。このレポートは、特定のページのLighthouse パフォーマンススコアを加重平均したものです。手動または CI を使って Lighthouse 監査を実行したり、管理しているストアのスピードスコアを確認したりすることができます。

Shopify のデータを使って Lighthouse 監査を実行する

Shopify がオンラインストアのスピードスコアを決定するために実行するテストをエミュレートするには、次のプロセスを使用します。Shopify は、テーマがShopify Theme Storeに登録される前に、テーマに対して同様のテストを行います。あなたのテーマに対しても同様のテストを行い、そのパフォーマンスを理解することができます。

  1. 開発ストアを作成する。

  2. テスト商品の csvをストアにインポートします。このストアには、他のコレクション、製品、バリアントはありません。

  3. 開発ストアの「オンラインストア」の横にある目のアイコンをクリックして、ストアをプレビューします。

  4. プレビュー URL から、_btパラメータの値をコピーします。
    プレビュー URL に_btパラメータがない場合は、開発ストアが 2020 年 8 月以前に作成された可能性があります。これらのストアのプレビュー URL を見つける方法については、「2020 年 8 月以前に作成された開発ストア」を参照してください。

  5. 監査したいページの URL を取得します。ホームページ(h)、商品ページ(p)、コレクションページ(c)をテストする必要があります。

  6. 各 URL の末尾に、テーマの_bt値を追加します。
    例えば、URL https://my-dev-shop.myshopify.com/products/sunglasses https://my-dev-shop.myshopify.com/products/sunglasses?_bt=value-you-copied になります。

  7. Google PageSpeed Insightsにアクセスし、URL を入力して「分析」をクリックして各ページを分析します。各ページのスコアを記録します。

  8. その結果に次の式を適用します。[(p * 31) + (c * 33) + (h * 13)] / 77. この結果が、あなたのテーマのスピードスコアです。

2020 年 8 月以前に作成された開発ストア
開発ストアが 2020 年 8 月以前に作成されている場合は、以下の手順でテスト用のプレビューリンクを取得してください。

  1. 開発ストアの「テーマ」ページで、テストしたいテーマを選択します。
  2. [アクション]>[プレビュー]をクリックします。テーマのプレビューが開きます。
  3. ページの右下にあるプレビューバーで、「プレビューを共有」をクリックします。プレビューの URL が表示されたモーダルが開きます。
  4. モーダルの中で「リンクをコピー」をクリックします。
  5. テストしたい各ページで、ベース URL をプレビュー URL に置き換えます。

例えば、サングラスをテストする場合は、URL を https://my-dev-store.myshopify.com/products/sunglasses から https://12345678.shopifypreview.com/products/sunglasses に変更します。

Lighthouse CI を使ってパフォーマンスの問題を早期に発見する

開発中のテーマに継続的インテグレーション(CI)プロセスを使用している場合は、CI チェックを追加して、テーマコードの変更がパフォーマンススコアに大きなマイナスの影響を与えないようにすることができます。これは Shopify が開発した GitHub アクションであるShopify Lighthouse CI GitHub アクションを使って行うことができます。このアクションは、テーマのコードをベンチマークショップにアップロードし、スピードスコアを測定して計算します。

管理している店舗のパフォーマンスを確認する

自分が管理している店舗のパフォーマンスは、Shopify ダッシュボードの「ストアパフォーマンス」ページで確認できます。このページにアクセスするには、Partner Dashboard にログインして、「ストア」ページに移動し、「ストアのパフォーマンスを見る」をクリックします。ストアパフォーマンスページの詳細については、こちらをご覧ください。

次のステップ

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます