✨

【Shopify.dev和訳】Apps/Best practice/Performance

2021/09/04に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Best practice/Performanceの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

Shopify アプリのパフォーマンスのベストプラクティス

販売者がオンラインストア用のアプリを選択するとき、パフォーマンスは重要な要素です。アプリを作成するときは、パフォーマンスを念頭に置いて作成する必要があります。

アプリのパフォーマンスを最適化することは、サポートする販売者の成功と顧客体験の鍵となります。パフォーマンスは、コンバージョン率、リピートビジネス、検索エンジンのランキングに直接影響します。

パフォーマンスの最適化

アプリのパフォーマンスを最適化するには、次のベストプラクティスを検討してください。

テーマアプリの拡張機能を使用する

テーマアプリの拡張機能を使用すると、開発者はテーマコードの整合性を保護し、アプリの開発と販売者体験を向上させる方法でテーマを拡張できます。

テーマアプリ拡張フレームワークに組み込まれているアプリはテーマコードを編集しないため、テーマに重大な変更が加えられるリスクが軽減され、統合のコンテンツの反復が容易になり、より優れた販売者体験が提供されます。

assets/フォルダー内のすべてのファイルは、Shopify's CDNから自動的に提供されるため、高速で信頼性の高いアセット配信が可能です。 javascriptおよびstylesheetのスキーマ属性を使用するか、asset_urlおよびasset_img_url の Liquid URL フィルターを使用して、アセットを参照します。

アプリ埋め込みブロックの場合、特定のページにのみスクリプトをロードする機能を利用します。

パーサーブロッキングスクリプトを避ける

パーサーブロックスクリプトは、スクリプトが読み込まれ、解析され、実行されるまで、DOM の構築とレンダリングをブロックします。また、ネットワークにアクセスが集中し、ページのレンダリングが大幅に遅れます。これは、FirstContentfulPaintやLargestContentfulPaintなどの指標に影響を与えます。これを回避するには、スクリプトタグでdefer属性またはasync属性を使用する必要があります。

スクリプトタグの実行順序が重要な場合は、deferを使用します。

1 <script src="https://cdn.shopify.com/app-code.js" defer></script>
2 <script src="app-code.js" defer></script>

実行の順序が重要でない場合は、asyncを使用します。

1 <script src="https://cdn.shopify.com/app-code.js" async></script>
2 <script src="app-code.js" async></script>

Shopify サーバー上のホストアセット

Shopify コンテンツ配信ネットワーク（CDN）からできるだけ多くを配信します。アセットに同じホストを使用すると、不要な HTTP 接続が回避され、サーバーは HTTP/2 優先順位付けを使用してブロッキングリソースの配信に優先順位を付けることができます。

Shopify のコンテキストでは、AssetREST Admin API resourceを使用して静的ファイルを Shopify のサーバーでホストし、グローバルに利用可能な CDN で配信することでこれを行うことができます。

CDN は、キャッシュ、圧縮、高速パフォーマンス、グローバル配信が組み込まれた高速化された Web サーバーです。 Shopify の CDN を使用すると、ネットワークのアクセス集中も軽減されます。

外部フレームワークとライブラリへの依存を減らす

JavaScript を使用する必要がある場合は、サードパーティのフレームワーク、ライブラリ、および依存関係の導入を避けることを検討してください。代わりに、可能な限りネイティブブラウザ機能と最新の DOMAPI を使用してください。パッケージに JavaScript ライブラリを含めると、バンドルサイズが大きくなり、読み込み時間が遅くなり、顧客体験が低下する可能性があります。

React、Angular、Vue などのフレームワーク、および jQuery などの大規模なユーティリティライブラリには、かなりのパフォーマンスコストがかかります。複数のアプリが同じフレームワークを同じストアに複数回インストールしようとすると、ストアの読み込み時間がさらに低下します。

非常に古いブラウザ（async / awaitをサポートしないもの）にポリフィルライブラリを導入することは避けてください。ブラウザリストを使用する場合は、1％を超える市場シェアを持つブラウザをターゲットにできます。

JavaScript の使用を減らす

CSS は JavaScript よりもはるかに高速に解析およびレンダリングするため、可能な限り、対話性を構築するために CSS 機能を使用する必要があります。「JavaScript の代わりに CSS を使用する」というフレーズを検索すると、インターネットで詳細情報を見つけることができます。一例は、JuanMartínGarcía によるJavaScript の代わりに CSS でできる 5 つのブログです。

縮小された JavaScript バンドルサイズは、理想的には 16KB 以下である必要があります。

相互作用時に重要ではないリソースをロードする

ページには、常に使用されるとは限らないコンポーネントまたはリソースのコードが含まれている場合があります。インタラクションパターンのインポートを使用してこれらのリソースをロードし、不要なコードのロード、解析、および実行を回避できます。

ユーザーがバンドルを必要とするアプリの部分を操作するまで、JavaScript バンドルの読み込みを完全に延期します。

バンドルサイズを最小化する

パフォーマンスを最適化するには、アプリのエントリポイントが 1 ページで JavaScript が 10KB 未満、CSS が 50KB 未満であり、インタラクション時に読み込まれる必要があります。コードを最小化して、バンドルサイズを最適化してください。

ストアのテーマは、ユーザーの対話性に責任があります。アプリはテーマを少しだけ変更する必要があります。さらに JavaScript を挿入する必要がある場合は、ブラウザーをブロックせずに JavaScript が読み込まれることを確認してください。

インライン JavaScript タグの後にリモートスタイルシートを含める

ブラウザは、スタイルシートがダウンロードされ、解析され、適用されるまでページをレンダリングできません。インラインスクリプトタグは、スタイルシートがロードされた後にのみ実行されます。インラインスクリプトタグの前にリモートスタイルシートが含まれている場合、スタイルシートはスクリプトタグの実行をブロックします。

次の例のように、スタイルシートの前に常にインラインスクリプトタグを含めます。

1 <script>console.log('hello world')</script>
2 <link href="//example.com/app-css.css" rel="stylesheet">

パフォーマンスのテスト

Shopify がアプリのパフォーマンスをテストするために使用するツールはLighthouseです。 Lighthouse は、Web ページの品質を向上させるためのオープンソースの自動化ツールです。 Google Chrome のデベロッパーツールパネルで利用できるため、ブラウザで直接アプリをテストできます。

アプリをShopify App Storeに送信すると、アプリはベンチマークショップでテストされ、パフォーマンススコアが決定されます。 Shopify App Store で公開するには、アプリがLighthouse のパフォーマンススコアを 10％以上低下させてはなりません。

GoogleChrome でアプリをテストする

アプリや他のアプリをインストールせずに、Express などのサポートされている Shopify テーマのクリーンインストールから始めます。
テストストアのホームページから、Chrome で開発者ツールを開きます（View> Developer> Developer Tools）。
開発ツールで、Lighthouseタブをクリックします。
デバイスリストからMobileを選択し、Generate Reportをクリックします。

100 点満点のパフォーマンススコアを書き留めます。これが開始スコアです。
アプリをテストストアにインストールし、正しく読み込まれることを確認します。
Lighthouseタブに移動し、Generate Reportボタンをクリックします。
新しいパフォーマンススコアを書き留めます。これがあなたの終了スコアです。
終了スコアを開始スコアで割ります。結果がアプリのパフォーマンス比です。

たとえば、開始スコアが 84 で、終了スコアが 72 の場合、72/84 を計算して、アプリのパフォーマンス比が 0.85 であることを確認します。

次のステップ

ShopifyAppStore にアプリを送信する方法を学びます。

Shopify アプリのご紹介

Discussion

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