Shopify用AVIF 2026：ストア3倍高速化 [実装ガイド]

AVIFとShopify

ShopifyはAVIFの恩恵を大きく受けることができるリーディングECプラットフォームです。

Shopifyストアは商品画像に大きく依存しています。

Shopifyは独自のCDNを使用し、いくつかの自動最適化を行います。

実装オプション

ShopifyでAVIFを使用するいくつかのアプローチ。

• ShopifyネイティブCDN: Shopifyは自動最適化しますが、まだネイティブでAVIFを提供していません。
• 外部CDN: オンザフライ変換にCloudflare、imgix、Cloudinaryを使用。
• サードパーティアプリ: いくつかのShopifyアプリがAVIFを含む画像最適化を提供。
• 手動: 事前最適化した画像をアップロード。

CDN設定

AVIFを提供する外部CDNの設定。

Cloudflare Polishは自動的にAVIFを変換して提供できます。

より細かい制御には、imgixやCloudinaryが詳細なURL変換を許可。

<!-- 自動AVIFのCloudinary URL -->
<img src="https://res.cloudinary.com/your-account/image/upload/f_auto,q_auto/product.jpg">

推奨アプリ

画像最適化のためのShopifyアプリ。

高度な最適化

高度なテクニックでさらに進化。

• 遅延読み込み: ファーストビュー以下の画像に遅延読み込みを有効化。
• レスポンシブ画像: デバイスに応じて異なるサイズを提供。
• プリロード: クリティカルな画像をプリロード。
• 適応圧縮: サムネイルは低品質に。

結果の測定

最適化の影響を追跡します。

Google PageSpeed Insightsでパフォーマンス改善を測定。

Shopifyメトリクス（コンバージョン率、ページ滞在時間）を追跡。