速度最適化をShopifyするためのガイド

公開: 2020-03-17

Shopifyストアの所有者にとって重要な考慮事項の1つは、サイトのパフォーマンスです。 Webサイトのパフォーマンスは、ユーザーを変換するWebサイトの機能に直接影響します。 サイトの速度が速いほど、コンバージョンにつながる可能性のあるユーザーが多くなります。 同様に、ShopifyストアのSEOを改善しようとしている場合、パフォーマンスはGoogleのアルゴリズムの小さなランキング要素です。

さらに、サイトのパフォーマンスは、他のすべてのデジタルマーケティングイニシアチブに影響を与えます。 有料、電子メール、ソーシャルマーケティングのいずれであっても、Webサイトの速度は、これらのさまざまなチャネルすべてのユーザーに影響を与えます。 サイトがこれらのチャネルからかなりの量のトラフィックを受信して​​いる場合は、パフォーマンスがわずかに向上しただけでも、顕著な収益の向上につながる可能性があります。

RevenueImpactOnSiteSpeed

サイトの速度が1秒向上すると、このサイトの収益は+8,000ドルになります。

これが、Shopifyサイトのパフォーマンスを確保することがストアの成功に不可欠である理由です。 Shopifyサイトを高速化すると、ユーザーエクスペリエンスが向上するだけでなく、収益に直接影響を与える可能性があります。

Shopifyにはすでにどのようなサイト速度の最適化がありますか？

Shopifyの優れた点の1つは、ストアにすぐに使用できる速度の最適化が用意されていることです。 一般的に、Shopifyサイトは他のソリューションと比較してかなり高速です。 プラットフォームは一般的にMagentoなどのプラットフォームよりも高速であるため、これはShopifyストアの所有者にとって素晴らしいニュースです。

新しいShopifyサイトを作成すると、次のパフォーマンス機能がすでに実装されていることがわかります。

  • ブラウザのキャッシュを活用する：Shopifyは、デフォルトでサイトの内部リソースをすでにキャッシュしているはずです。 キャッシュを使用すると、画像、JavaScript、CSSなどのコンテンツの一部をユーザーのブラウザ内にローカルに保存できます。 これは、同じリソースを2回表示するときに、コンテンツを再ダウンロードする必要がないことを意味します。 これにより、ユーザーはサイトのコンテンツの一部を以前よりもはるかに速く表示できるようになるため、ストアの速度を上げることができます。 サードパーティのリソースにキャッシュの問題のフラグが立てられている場合は、キャッシュを直接調整するためにできることは何もありません。
  • CDNを利用する：ShopifyはFastlyCDNを利用します。 CDN（Content Delivery Network）を使用すると、サイトのコンテンツの一部を世界中のサーバーに保存できます。 これにより、ユーザーとサイトのコンテンツ間の物理的な距離が短くなります。 物理的な距離を短くすると、サイトのパフォーマンスが向上します。

Shopifyサイトの速度を最適化する方法：

次の手順に従うことで、Shopifyサイトを大幅に高速化できます。

  • 軽量のShopifyテーマを選択してください
  • 大きな画像サイズを縮小する
  • 画像を圧縮する
  • GIFを静止画像に置き換える
  • 遅延読み込み画像
  • サードパーティのJavaScriptとShopifyアプリを制限する
  • トラッキングコードをGoogleタグマネージャーに移行する
  • Google PageSpeedInsightsを介してストアを実行する

1.軽量のShopifyテーマを選択します（元のデータ）

高速なShopifyテーマを選択すると、パフォーマンスの観点からWebサイトをすぐに優れた位置に置くことができます。 一部のテーマには、箱から出して不要な肥大化が発生し、サイトのパフォーマンスが低下する場合があります。 逆に、より軽量なテーマを使用すると、サイトは強力なパフォーマンスを発揮できるようになります。

パフォーマンスの高いテーマのいくつかを理解するために、Shopifyテーマストアで入手できる200以上のテンプレートをテストし、Google PageSpeedInsightsからベンチマークのFirstContentful Paint（FCP）とTime To Interactive（TTI）をログに記録しました。 以下に、テストで特定されたパフォーマンスの高いテーマを示します。

  1. テーマの作成（1.1 FCP、7.8 TTI）
  2. おもちゃのテーマ（1.1 FCP、7.7 TTI）
  3. 暖かいテーマ（1.9 FCP、7.8 TTI）
  4. ライトテーマ（1.1 FCP、7.8 TTI）
  5. アウトドアテーマ（1.1 FCP、8.1 TTI）

もちろん、これは、パフォーマンスの高いテーマを遅くすることができない、またはこれらがサイトに最適なオプションであると言っているわけではありません。 ただし、速度の最適化が最優先事項である場合は、これらを選択することを検討してください。

2.大きな画像サイズを縮小します

大きな画像アセットのサイズを変更することは、Shopifyサイトを高速化するための最良の方法の1つです。 多くのShopifyサイトを評価すると、多くの企業が多数の画像を使用する傾向があることに気づきました。 画像はeコマースストアの定番であるため、これは理にかなっています。 これは、商品を強調するために画像が必要な小売店などの業種ではさらに当てはまります。

画像はストアのUXとブランディングを改善する素晴らしい方法ですが、多くの場合、パフォーマンスのトレードオフが伴います。 画像ファイルは通常、標準のHTMLやCSSよりもはるかにサイズが大きくなります。 ページ上で多数の画像を使用すると、ページの重みが非常に大きくなり、画像をあまり使用しないページよりもダウンロードに時間がかかる可能性があります。

このページでは、画像アセットの合計サイズが14MBの173の画像リクエストを使用しています

また、最適化されていない画像を使用すると、サイトのページがさらに重くなる可能性があります。 多くの場合、画像は「レンダリングサイズ」よりもはるかに大きいサイズでアップロードされます。 これは、ユーザーが実際にブラウザに表示するサイズです。

このページには、レンダリングサイズのほぼ2倍の実際のサイズが含まれています

画像がレンダリングサイズよりもはるかに大きいサイズでアップロードされると、これにより不要なパフォーマンスの問題が発生します。 つまり、ユーザーは、レンダリングに実際に必要な画像よりも大きな画像をダウンロードする必要があります。 その結果、ユーザーは実際にコンテンツを表示するために余分なブラウザリソースとデータを浪費する必要があります。

Chrome DevToolsを使用すると、特定のページでより大きな画像を見つけることができます。 右クリックして「検査」を選択するだけです。 [ネットワーク]タブに移動して、ページを更新します。 これにより、ページの読み込みに使用されたすべてのリソースが表示されます。 次に、「サイズ」で並べ替えて、最大のアセットを見つけることができます。

大きな画像（100 KB以上）が表示された場合は、ページでその画像を見つけて、もう一度右クリックして[検査]を選択します。 画像リンクにカーソルを合わせると、実際の（固有の）サイズと比較したレンダリングサイズが表示されます。

3.画像を圧縮する

画像が圧縮されていない場合、画像が最適化されないこともあります。 アップロードされた画像に圧縮が適用されていないShopifyストアを見るのは非常に一般的であり、必要以上に大きな画像サイズになります。

圧縮を使用することで、画像アセットのファイルサイズを元の画像よりもはるかに小さくすることができます。 ファイルサイズが小さいほど、ブラウザはWebサイトのコンテンツをより速くロードできます。

画像圧縮に関しては、次の2つの方法を組み合わせて使用​​することをお勧めします。

  • Shopifyアプリ：一部のアプリは、アップロード時に画像を自動的に圧縮します。 私たちはCrush.picsで良い経験をしました。
  • Optimizilla：これにより、サイトにアップロードする前に大きな画像アセットを手動で圧縮できます。

4.GIFを静止画像に置き換えます

遅いShopifyストアで見られた否定できない傾向はGIFの利用です。 GIFは、ユーザーによりインタラクティブなエクスペリエンスを提供するため、非常に価値があります。 繰り返しになりますが、これはUXとブランドの観点からサイトを改善するのに役立ちます。

ただし、GIFアセットは非常に大きいです。 ページ上でGIFを1つだけ使用すると、そのサイズが大幅に増加する可能性があります。

この単一のGIFアセットは2.8MBを占めます

2つまたは3つのGIFを使用するだけで、1ページの10MB以上を占める場合があります。 これらのファイルはページの重みを大幅に増加させるため、可能な場合は静止画像に置き換えることをお勧めします。 これにより、リソースが大幅に節約され、Shopifyの速度の最適化が向上します。

5.遅延読み込み画像

PageSpeed Insightsを介してShopifyサイトのリストを実行するときに、私たちが見つけた最も一般的な推奨事項の1つは、「オフスクリーン画像を延期する」でした。 これは、サイトのすべての画像アセットが一度に読み込まれていることを示しています。

多くのShopifyサイトは多くの画像を使用しているため、多くの場合、遅延読み込みを調べることは理にかなっています。 これにより、ユーザーがページを下にスクロールしたときにのみ、サイトのすべての画像が一度に読み込まれるわけではないため、ShopifyWebサイトの速度を上げることができます。

遅延読み込みの実装に興味がある場合は、Shopifyにこれに関する非常に優れたヘルプドキュメントがあります。 開発者と協力してlazysizesライブラリを実装することで、クライアントにとって最高の成功を収めてきました。

6.サードパーティのJavaScriptとShopifyアプリを制限する

Shopifyストアは、膨大な数のアプリとサードパーティのリソースを使用しています。 これにより、ブラウザが行う必要のある大量のリクエストが発生します

WordPressプラグインと同様に、Shopifyには、開発者のバックグラウンドを必要とせずにサイト所有者がWebサイトに機能を簡単に追加できる「アプリ」があります。 アプリは、サイトの機能を強化するための素晴らしい方法です。 追加のサードパーティスクリプトについても同じことが言えます。

ただし、これらの追加にはパフォーマンスが犠牲になることに注意してください。

ウェブサイトにアプリやスクリプトを追加するたびに、サイトが行っているリクエストの総数が増えます。 さらに、これらのスクリプトのサイズを考慮する必要があります。 アプリやサードパーティのコードが多すぎると、Shopifyストアのパフォーマンスが低下する可能性があります。

多数のサードパーティのトラッキングコードを利用するShopifyストアの例

これらのリソースはサイトのパフォーマンスに悪影響を与える可能性があるため、すべてのトラッキングコード、Shopifyアプリ、および使用しているその他のサードパーティリソースを定期的に確認することが重要です。 マーケティングおよび開発チームと正直に話し合うことが役立つと思います。 各リソースについて次の5つの質問をすることは、リソースに関する決定を下すのに役立ちます。

  1. この機能を実際に使用する頻度はどれくらいですか？
  2. これは「なくてはならない」ですか、それとも「持っていていい」ですか？
  3. 使用できる軽量のオプションはありますか？
  4. これから得られるメリットは、パフォーマンスのトレードオフの価値がありますか？
  5. この機能がユーザーによって使用される頻度を確認するために参照できるメトリックはありますか？

もちろん、これらの質問に対する答えは、店舗やビジネスモデルによって確かに異なります。 たとえば、チャット機能は一部の店舗にとっては重要ですが、他の店舗にとっては必須ではない場合があります。 これらの質問に答えた後、開発チームと協力して、安全に削除できる要素を見つけることをお勧めします。

どこから始めればいいのかわからない？ パフォーマンスに大きな影響を与える傾向があるShopifyストアが利用していることがわかったサードパーティのコードは次のとおりです。

  • ラッキーオレンジ
  • 相撲
  • 衛兵
  • ZenDesk
  • ドリフト
  • PayPal
  • クラビヨ
  • Privy
  • ヨッポ

もちろん、私たちはこれらのテクノロジーのいずれにも反対しているわけではありません。 ただし、それらの1つを使用していることがわかっている場合は、Shopifyストアのパフォーマンスに影響を与える可能性があることに注意してください。 テストの結果、これらが問題を引き起こしている可能性があることが判明した場合は、Shopifyサイトを高速化するために、それらを削除または交換することを検討してください。

7.トラッキングコードをGoogleタグマネージャーに移行します

Google Tag Managerは、コードに触れることなく、ウェブサイトにタグを簡単に追加したり、ウェブサイトからタグを削除したりできるソリューションです。 これは、Webサイトのすべての追跡コードを1か所で管理するための素晴らしい方法です。 また、Google Tag Managerの優れた点の1つは、すべてのコードが非同期で読み込まれることです。 これは、Google Tag Managerを介して読み込まれたコードが、サイトのコンテンツのレンダリングをブロックしないことを意味します。 これは、「タグの移行」を行って、トラッキングコードの一部をGoogleタグマネージャーに移動することを検討できることを意味します。 これを行うには、次の手順を実行します。

  1. ShopifyストアにGoogleタグマネージャーを追加します
  2. [タグ]> [新規]に移動し、Shopifyで使用している「タグタイプ」で組み込みのタグを探します。
  3. これらのタグをGoogleタグマネージャーに実装します
  4. 組み込みのタグが見つからなかった場合は、「カスタムHTML」を選択してタグを追加できます
  5. トリガーを適切に設定します。 多くの場合、これは「すべてのページ」に設定されます
  6. Googleタグマネージャーの変更を公開する
  7. Shopifyに戻り、Googleタグマネージャーで追加したアプリをすべて削除します
  8. ストアに移動して、新しいタグが正しく機能していることをテストします。 これは、Googleタグマネージャーの「プレビュー」モードを使用して行うことができます

Google Analytics、Hotjar、Facebook、その他のサードパーティコードなどのトラッキングピクセルをGoogle TagManagerに移動することを検討してください。

8. Google PageSpeedInsightsを介してストアを実行します

Google PageSpeed Insightsは、Googleのサイト速度テストツールです。 サイトを分析し、サイトのパフォーマンスに関するメトリックと、サイトの速度を向上させる方法に関する推奨事項の両方を提供します。 テストを実行するには、ツールに移動して、パフォーマンスデータを表示するページを入力するだけです。 次のスクリーンショットのようなものが表示されます。

PageSpeedInsights

かなりの量のデータを取り戻すことができ、それはかなり圧倒される可能性があります。 私たちが見ている主要なデータポイントについて説明しましょう。

  • First Contentful Paint：コンテンツの最初のビットがレンダリングされるのにかかる時間。 これは、コンテンツが読み込まれ始めていることをユーザーに示すために重要です。
  • インタラクティブになるまでの時間：ページが最初にユーザーに対してインタラクティブになるまでにかかる時間。

通常、最初にこれら2つの指標を調べて、特定のページがどのように読み込まれているかを把握します。 これにより、優れたベンチマークデータが提供され、サイトの速度の向上が影響を及ぼしているかどうかを確認するために戻って再測定できます。

Shopifyストアのパフォーマンステスト（元のデータ）

あなたが知りたいかもしれない1つのことはあなたの店が他のShopifyサイトとどのように比較されるかです。 基準点を提供するために、最も有名なShopifyストアのいくつかで分析を実行してパフォーマンスのベンチマークを行いました。

方法論：

このデータを収集するために、400以上のShopifyサイトのホームページのパフォーマンスを測定しました。 First Contentful Paint、Time to Interactive、Page Size、Image Size、TotalRequestsなどのデータポイントを収集しました。 すべてのパフォーマンスデータは、モバイル版のサイトのものです。 次に、Google PageSpeedスコアに基づいてページの上位20％と下位20％を比較しました。

上位20％：

  • 最初の満足のいくペイント：2.78秒
  • インタラクティブまでの時間：8.98秒
  • 合計ページサイズ：2.01 MB
  • 総画像アセット：1.11 MB
  • リクエスト：72

平均：

  • 最初の満足のいくペイント：3.8秒
  • インタラクティブまでの時間：22.1秒
  • 合計ページサイズ：4.41 MB
  • 総画像アセット：2.1 MB
  • リクエスト：171

下位20％：

  • 最初の満足のいくペイント：5.89秒
  • インタラクティブまでの時間：30.37秒
  • 合計ページサイズ：5.54 MB
  • 総画像アセット：2.59 MB
  • リクエスト：235

追加リソース

同様に、Shopifyサイトのパフォーマンスを向上させることができるいくつかの追加の方法を探している場合は、以下のリソースが役立つはずです。 Shopifyサイトや他のコンテンツ管理システムを備えたサイトのパフォーマンスを向上させるために使用できるお気に入りのサイトスピードツールとリソースを集約しました。

ページ速度テストツール：

  1. Pingdom
  2. Google Pagespeed Insights
  3. WebPageTest.org
  4. Chrome DevTools
  5. Google灯台
  6. Googleで考える

画像の最適化：

  • オプティマイザ
  • Crush.pics

続きを読む：

  • Chromeデベロッパーツールを使用したサイト速度の最適化
  • サイト速度の究極のガイド

Shopifyストアの速度を最適化する場合は、これらを調整することをお勧めします。 画像の最適化を改善し、リクエストを減らし、遅延読み込みを実装することは、サイトの読み込みを高速化するための優れた方法です。 うまくいけば、結果としてパフォーマンスが向上し、すべてのデジタルチャネルのユーザーエクスペリエンスが向上します。 ShopifyストアのサイトパフォーマンスまたはSEOを改善したい場合は、ShopifySEOサービスの詳細をご覧ください。