【Shopify.dev和訳】Themes/Best practices/Performance/Platform
この記事について
この記事は、Themes/Best practices/Performance/Platformの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify のプラットフォーム
オンラインストアとあなたのテーマをより速くするために、Shopify が提供するインフラについて学びましょう。
Shopify CDN
Shopify はFastlyとCloudflareによって運営されているワールドクラスのコンテンツデリバリーネットワーク(CDN)を販売者に提供しています。CDN を使用することで、Shopify のサーバーが北米にあるにもかかわらず、あなたのオンラインストアは世界中で素早くロードされます。
Shopify CDN を介して配信されるファイルは、Brotli、Zopfli、gzipを用いて自動的にミニマイズ、圧縮され、ブラウザがダウンロードしなければならないファイルのサイズを小さくします。リクエストにはHTTP/3とTLS 1.3を使用し、リクエストのパフォーマンスとセキュリティをさらに強化しています。
ストア内の画像の遅延が短い
CDN を利用すると、オンラインストアのすべての画像が、世界中の何千ものサーバーにキャッシュされます。お客様が画像に変更を加えると、Shopify は画像が変更されたことを CDN に通知します。これを行うために、Shopify はasset_urlフィルターを使用し、生成するすべての URL にバージョン番号を自動的に付加します。例えば、URL の最後に付加されたバージョン番号は以下のようになります。?v=1384022871.
asset_urlフィルターを使用せずに画像にリンクし、同じ画像の新しいバージョンをアップロードした場合、オンラインストアの画像が 1 日以上も新しいバージョンに変更されない可能性があります。
自動更新のための CSS 構文
CSS で画像を直接参照している場合、URL は静的なものとなり、Shopify が自動的に更新するアセットのバージョンを伝えることはできません。
画像が自動的に更新されるようにするには、asset_urlフィルターを含むように CSS の構文を変更してください。
例えば、あなたの CSS が次のようなものであれば、次のようになります。
background: url(bg.gif);
このように変更してください。
background: url({{ 'bg.gif' | asset_url }});
サーバーサイドレンダリング
Storefront Renderer（SFR）は、ストアフロントの要求を処理するサーバーサイドのレンダラーです。SFR は、ストアフロントの要求を可能な限り高速に処理することに特化しています。
SFR のストアフロントレンダラーは、キャッシュミス（要求されたページやデータがキャッシュメモリに見つからず、他のキャッシュレベルやメインメモリから取得しなければならない場合）のパフォーマンスを大幅に向上させます。
最小化
Shopify は、テーマの JavaScript と CSS がストアフロントから要求されると、自動的にそれを最小化します。最小化された JavaScript と CSS のファイルは、次にファイルが更新されるまでキャッシュされます。ブラウザはより少ないデータをダウンロードし、結果としてロード時間が短縮されます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion