Cloudinaryを使用してShopifyのストアの読み込み時間を改善する方法
こんにちは。TCAディビジョンの森田です。
今回はこちらの記事について解説していきます。ほとんど翻訳(意訳)そのままですが、一部わかりやすいように編集して記述します。
まず最初に、何がよいか？をざっくりご紹介！
ねこちゃんにモザイクを自動でかけてみました。
・Cloudinaryで画像サイズ変換、対象物をセンターに持ってきて切り抜き、顔を認識してモザイクかける、容量縮小のため画像品質を落とすetcといったことを「すべて自動で」行い、画像表示してくれるサービス
・Shopifyにこのあと解説するコードを記載すると、Shopifyで登録した画像を「自動的に」Cloudinaryに複製し画像最適化できる
一度設定してしまえば、驚くほどの楽さで画像自動処理ができる・・・！
詳細を以下に記載していきます。
Shopifyとは？
まずは、2つのサービスを使うので、各サービスの解説です。
Shopifyについては、弊社記事をご覧ください。
https://note.fracta.co.jp/n/nb484d4951c69
https://note.fracta.co.jp/n/n57bbcd8c2b15
Cloudinaryとは？
Cloudinaryは、画像を管理するクラウドサービスで、画像の保存、変換、配信がとても簡単にできます。Akamaiと連携しているようでワールドワイドで画像配信ができます。
いくつかプランがありますが、無料のアカウントで30万ファイル、10ギガのストレージ、月間2万回まで画像の変換ができます。
参考：Cloudinaryを使って画像の変換をやってみる
Cloudinaryを使用してShopifyのストアの読み込み時間を改善する方法
ShopifyにCloudinaryを経由する記述を追加し、最終的にCloudinaryに複製した商品画像を読み込むことで、Cloudinaryの速度・画像変換等の機能を利用できるようになります。
後で必要になるフェッチURLを取得するには、無料のCloudinaryアカウントにサインアップしておく必要があります。
Cloudinaryサインアップできたら、Shopifyで次の4ステップを実行します
ステップ 1 ：「settings_schema.json」ファイルを編集します
ステップ 2 ：新しい「スニペット」を追加する
ステップ 3 ：Cloudinary設定を構成する
ステップ 4 ：セクションのテーマを更新する
Shopify用語解説
スニペット：Shopifyのテーマで細かく分けたパーツのファイル
セクション：Shopifyのテーマで大きく分けたブロックのファイル
Layout>Templates>Sections>Snippetsの関係
ステップ 1 ：「settings_schema.json」ファイルを編集します
・ [オンラインストア]> [テーマ]> [アクション]> [コードの編集]> [Config]に移動します。
・settings_schema.jsonファイル(テーマの設定値を定義しているファイル)を開きます。
・最初の「[」と「{」の間に、次のコードを挿入します。次に、次の行に移動して、次の開始「{」の開始直前にコンマ「,」を挿入し保存します
{
"name": "Cloudinary",
"settings": [
{
"type": "paragraph",
"content": "Load all your images leveraging Cloudinary's remote image Fetch for best page load performance."
},
{
"type": "checkbox",
"id": "enableCloudinary",
"label": "Enable Cloudinary"
},
{
"type": "text",
"id": "cloudinaryUrl",
"label": "Cloudinary Fetch URL",
"info": "Note- Your Cloudinary Fetch url containing your domain, cloud name, and global transformations to apply to all images"
}
]
}ステップ 2 ：新しい「スニペット」を追加する
・[オンラインストア]> [テーマ]> [アクション]> [コードの編集]> [Snippets]に移動します。
・新しいスニペットを追加して名前を付けます cloudinary.liquid
・次のコードをcloudinary.liquidに挿入し、保存します
{%if settings.enableCloudinary and settings.cloudinaryUrl != blank %}
{% assign baseUrl = settings.cloudinaryUrl %}
{%if img contains "?" %}
{% assign imgUrl = img | split: "?" %}
{% assign fetchQuery = "?" | append: imgUrl.last | url_encode %}
{% assign fetchUrl = imgUrl.first | append: fetchQuery %}
{% else %}
{% assign fetchUrl = img %}
{% endif %}
{%if transformation and transformation !=blank %}
{% assign baseUrl = baseUrl | append: '/|' | append: transformation | replace:'fetch//', 'fetch/' %}
{% endif %}
{% assign cloudinaryURL = baseUrl | append: '/https:' | append: fetchUrl | replace: 'https:http','http' | replace:'/|/','/' | replace:'//|','/' |
replace:'/|','/' %}
{% else %}
{% assign cloudinaryURL = img %}
{% endif %}ステップ 3 ：Cloudinary設定を構成する
・[オンラインストア]> [テーマ]> [カスタマイズ]> [テーマ設定]に移動します。
・Cloudinaryセクションをクリックしてください
・「Enable Cloudinary」にチェックをいれる
・下記URLを「Cloudinary Fetch URL」に入力します。demoの部分は、あなたのCloudinaryクラウド名に置き換えてください。
※クラウド名はCloudinaryサインアップ時にランダムに振られその場で変更もできますが、登録後も変更できるそうです
//res.cloudinary.com/demo/image/fetch/q_auto,f_auto,fl_lossyステップ 4 ：セクションのテーマを更新する
・[オンラインストア]> [テーマ]> [アクション]> [コードの編集]> [Sections]に移動します。
・表示したいセクションにコードを埋め込みます
・ここでは、商品画像がCloudinaryによる配信用に最適化されるように、product-template.liquidで試してみます。
下記のコードはおそらくDebutテーマと思われるコードに、Cloudinaryの記述を追加したものになります。ちょっとわかりづらいので色付けしたコードで図解します。
<!-- from product-template.liquid -->
<div class="grid product-single">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
{% for image in product.images %}
{% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_class %}product-featured-img{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
{% assign img=image | img_url: product_image_zoom_size, scale: product_image_scale %}
{% include 'cloudinary', img:img %}
<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
<div id="{{ zoom_img_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}" data-image-id="{{ image.id }}"{% if enable_zoom %} data-zoom="{{ cloudinaryURL }}"{% endif %}>
{% assign img = image | img_url: 'large' %}
{% include 'cloudinary', img:img, transformation: 'w_300,h_300,c_fill,g_auto' %}
<img id="{{ img_id }}"
class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
src="{{ cloudinaryURL }}"
data-src="{{ cloudinaryURL }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>
{% endfor %}
. . .
こちらのスクリーンショットの①②③の箇所が、cloudinary用に追記されているコードです。
①ズームしたときの商品画像を定義し、cloudinaryで最適化しています。
②通常時の商品画像を定義し、cloudinaryで最適化しています。w_300,h_300,c_fill,g_autoの部分はcloudinaryの変換用パラメータをここで指定しています。縦横300pxで規定サイズ外は切り抜きし(c_fill)対象物を判定し見切れないよう自動調整してくれる指定(g_auto)。
③cloudinaryで最適化された画像URLをセット
g_auto指定はかなり高度な自動コンテンツ認識クロッピング機能のようで、図のようにねこちゃんがいい感じに表示されるようになるそうです。すごい！
その他
機能の解説
・[カスタマイズ]> [テーマ設定]の「Enable Cloudinary」のチェックで有効/無効にできるので、パフォーマンステストが可能です。
・Cloudinaryのサードパーティプロキシ「フェッチ」プロトコルを使用するため、Shopifyメディアライブラリをそのまま使用でき、Cloudinaryを介してすべての画像を自動的にインポート、操作、配信します。
左Shopify、右Cloudinary。Shopifyでは普通に商品画像を設定しておくと、Cloudinaryのメディアとして保存され、そちらを参照するようになる模様
Cloudinary設定を調整する（既存のアカウント用）
Cloudinaryの[セキュリティ設定]ページ（https://cloudinary.com/console/settings/security）に移動し、[Fetched URL(取得したURL)]のチェックボックスがオフになっていることを確認します。必要に応じてチェックを外します。
このページのさらに下の[Allowed fetch domains:(ドメインの取得を許可)]チェックボックスで、ボックスが空であること、または "https://cdn.shopify.com"が指定されていることを確認します。ボックスにリストされているドメインがあり、Shopifyが指定されていない場合は、「https://cdn.shopify.com」を追加します。ボックスが空白の場合は、空白のままにします。
結論
ウェブサイトでの画像の最適化は、見逃せない非常に重要な機能です。オンラインストアでも同じことが言えます。
コンテンツを可能な限り最良の方法で表示し、すぐに表示するストアを持つことは、ブランドの評判を高めるだけでなく、長期的に販売量やその他の重要な要因を決定する上で大きな役割を果たします。
これらの要因には、顧客獲得率、コンバージョン率、最初の数回の体験後にサイトにアクセスし続けるかどうかなどが含まれます。
運用業務改善、パフォーマンス向上が見込めるため、是非試してみることをおすすめします！無理しないWebへの一手！
この記事を書いた人：FRACTA TCAディビジョン森田(@lingling_yas)
直近の記事 ▽
・【2Plus Shopify アプリ検証】Shopify Plus専用データインポートアプリ「Transporter」検証まとめ
・Webサイト制作＆運用経験者が見た、Shopifyテーマの具体的な良いところ
FRACTAでは、ブランディングやEコマースに関する情報を発信しています。ぜひフォロー、スキをお願いいたします！