読み込みが速く、表示速度が速いウェブサイトは売上を牽引します。
上記の記述をもう少し詳しく見てみましょう。
デジタル環境は急速に変化しており、これに追いついてオンライン電子商取引ストアとして成功するには、Web サイトが良好な状態であることを確認する必要があります。
良い形とは、単に色、フォント、画像、動画を大量に追加してウェブサイトの見栄えを良くすることではありません。上記すべてをバランスよく取り入れることでウェブサイトを魅力的に見せることができますが、読み込みに時間がかかりすぎると、見込み客は次の選択肢に走ってしまいます。また、ウェブサイトの読み込みに 1 秒長くかかるごとに、コンバージョン率は平均 4.42% 低下する可能性があります。これは、顧客体験、検索エンジンのランキング、そして最終的には収益である売上にも影響する可能性があります。
このブログでは、Shopify ストアの速度を向上させるために知っておくべき実用的なヒントやコツについて詳しく説明します。それだけでなく、Shopify の速度最適化によって得られるさまざまなメリットについても紹介し、競合他社に対して大きな優位性を獲得します。それでは、始めましょう。
概要
- Shopify サイトの速度に影響を与えるものは何ですか?
- Shopify スピード最適化で得られる 5 つのメリット
- Shopify ウェブサイトの速度を向上させるために知っておくべき 7 つのヒント
- 結論
Shopify サイトの速度に影響を与えるものは何ですか?
Shopify サイトの速度が遅くなる理由はさまざまですが、重要な要因としては次のようなものがあります。
大きなファイルサイズ
高品質で高解像度の画像や動画を顧客に提供したいという希望から、最適化されていない画像、動画、その他のメディア ファイルを Shopify ストアにアップロードすることがあります。これらの大きなファイルは相当な帯域幅を消費し、最適化されていない場合はダウンロードに時間がかかり、ストアや各ページの全体的なパフォーマンスが低下する可能性があります。大きなファイルを圧縮してサイズを変更すると、サイトがすばやく読み込まれるようになります。
不要なアプリとプラグイン
Shopify では、複数のアプリ (サードパーティのアプリも含む) をストアに統合して全体的な機能性を向上させる機能を販売者に提供しています。アプリには追加のコードと機能が付属しており、全体的な読み込み時間が長くなり、Shopify サイトの速度が低下する可能性があります。使用していないアプリケーションがある場合は、必ず無効にするか、完全に削除してください。特定のアプリがパフォーマンスの問題を引き起こしている場合は、代替アプリを検討してください。
ホスティングリソースが不足している
Shopify ストアに割り当てられたホスティング リソースは、サイトの速度に大きな影響を与える可能性があります。多くの場合、ホスティング プランの帯域幅、処理能力、またはストレージが制限されている場合、読み込み時間が遅くなり、全体的なユーザー エクスペリエンスに影響を及ぼします。これを解決するには、ホスティング プランをアップグレードするか、より信頼性が高く高速なプロバイダーに切り替えることができます。
また、これらの要因は網羅的なものではなく、ネットワークの混雑、外部スクリプト、不適切な設定などの他の問題も速度低下の一因となる可能性があることに留意してください。Google PageSpeed Insightsや Shopify の組み込みパフォーマンス ダッシュボードなどのツールを使用してストアのパフォーマンスを徹底的に分析し、改善が必要な特定の領域を特定してください。
Shopify スピード最適化で得られる 5 つのメリット
冒頭で説明したように、Shopify スピード最適化によって得られるメリットから始めましょう。これらのメリットは最終的に収益の達成に役立ちます。
UXの改善
ユーザー エクスペリエンスまたは顧客エクスペリエンスは、ブランドの成功に不可欠です。ユーザーが Web サイトにアクセスしたが、ホームページの読み込みに 5 秒以上かかったとします。ユーザーは我慢できなくなり、戻るボタンを押して類似のサイトを閲覧し、最終的に競合他社の Web サイトにアクセスして忠実な顧客になります。この顧客の信頼を取り戻す可能性はどれくらいでしょうか? ユーザー エクスペリエンスを妨げているため、ほとんどありません。
ページ読み込み時間の最初の 5 秒は、 コンバージョン率に最も大きな影響を与えるため、Web サイトの成否を左右する状況です。Shopify Web サイトの速度を最適化することで、シームレスでスムーズなユーザー エクスペリエンスを提供できます。つまり、直帰率が低下し、エンゲージメントが高まり、顧客満足度が確実に高まります。ページの読み込みが速いと、顧客は Web サイトを楽々とナビゲートし、読み込みが遅いページによって通常生じるフラストレーションを感じることなく購入を完了できます。
SEOパフォーマンスの向上
SEO または検索エンジン最適化は、キーワードだけの問題ではなく、検索エンジンでランク付けするために適切なキーワードでタイトルを最適化していることを確認するだけのものではありません。Google などの検索エンジンは、アルゴリズムでランク付けするための最優先事項として Web サイトの速度を考慮しています。読み込みが速い Web サイトは SERP で上位にランクされる可能性が高く、ブランドの認知度とオーガニック トラフィックが増加します。
Shopify の速度最適化により、ユーザー エクスペリエンスを優先していることが検索エンジンに伝わり、 SEO の取り組みにプラスの影響が及びます。オンライン ストアのパフォーマンスを最適化するために必要な手順を実行することで、検索結果の最初のページに表示される可能性が高まり、トラフィックと潜在的な売上が増加します。
コンバージョン率の向上
オンライン ショッピングのユーザーは、すぐに満足感を得られることに慣れており、スムーズで素早い購入プロセスを期待しています。Web サイトの読み込みが遅い場合や、ページや製品画像の読み込みに時間がかかりすぎる場合は、潜在的な顧客を失うことになります。また、読み込み時間が長くてイライラするため、訪問者が取引を完了できず、カートが放棄される可能性もあります。
一方、速度が最適化された Shopify ウェブサイトは、購入プロセスにおける摩擦を軽減し、訪問者が有料顧客から忠実な顧客になる可能性を高めます。
カート放棄の減少
電子商取引ストアのオーナーであれば、「カート放棄」という言葉をよくご存知でしょうし、ほとんどのオンライン小売業者が直面しているこの特に一般的な課題に直面したことがあるかもしれません。この問題を詳しく調べると、Web サイトやページの読み込みが遅いと、この問題が悪化する可能性があることがわかります。
チェックアウト プロセスに大幅な遅延があると、実質的に顧客に購入の決定を迷わせる時間を与えてしまうことになり、あなたのビジネスからの購入に対する興味を完全に失わせることにもつながりかねません。Web サイトと Shopify ページの速度を向上させることで、カートの放棄の可能性を減らし、完了率と収益を増やすことができます。
モバイルフレンドリーなエクスペリエンスの向上
モバイル ショッパーは日々増加しており、小売業者にとってモバイル フレンドリーでモバイルに最適化された Web サイトの必要性が高まっています。同時に、モバイル ユーザーはショッピング時にページの読み込みが速く、高速であることを期待しています。Shopify Web サイトがこうした期待に応えられない場合、潜在的な顧客を失うリスクがあります。Shopify の速度最適化により、モバイル ファーストのエクスペリエンスが向上し、顧客に提供できます。レスポンシブ デザイン、最適化された画像とビデオ、合理化されたコードにより、モバイル ショッパーにとってより高速でスムーズなショッピング エクスペリエンスを実現できます。
Shopify ウェブサイトの速度を向上させるために知っておくべき 7 つのヒント
読み込みが速く、レスポンシブなテーマを選択する
高速なテーマを使用すると、顧客はウェブサイトを閲覧し、情報に基づいた意思決定を簡単に行うことができます。同時に、ウェブサイトの速度の最適化にも重要な役割を果たします。
Shopify テーマは、Liquid、HTML、CSS、そして最後に JavaScript コードの 4 つの主要コンポーネントで構成されています。Shopify テーマを編集してカスタマイズすると、ファイル サイズが変化する可能性があり、これがストアの速度にプラスまたはマイナスの影響を与える可能性があります。
したがって、ストアに新しいテーマを選択する場合は、Web サイトの速度が最適であり、テーマが速度に悪影響を及ぼしていないことを確認するために実行できる操作がいくつかあります。
- 高速でレスポンシブなテーマを探しましょう。たとえば、 Shopify テーマ ストアのBlum テーマは、読み込みが速いテーマであることが明確に示されています。Shopify には、ストアに合わせて選択できる高速テーマが他にもたくさんあります。
- 希望するテーマが実際に高速に読み込まれることを確認するには、そのテーマのデモ/プレビューを確認し、Google Pagespeed Insights で実行します。
- テーマ ページの下部には、このテーマをストアに利用しているストアもいくつかあります。パフォーマンスを把握するために、ぜひチェックしてください。また、ページ スピード インサイトで実行して、さらに詳しい情報を入手してください。決定を下す前に、複数のストアのインサイトを比較して確認してください。
既存のテーマがウェブサイトの速度を低下させていると思われる場合は、次の手順に従ってください。
- テーマには、テーマ コード、機能、画像、アプリなど、数多くの機能が備わっています。しかし、実際には、すべてを使いたくないかもしれません。そのため、使用していない機能やストアに不要な機能を無効にします。どの機能を削除するかまだ決めかねている場合は、ストアでの顧客の全体的なショッピング エクスペリエンスを考慮することができます。顧客が望むエクスペリエンス、好むホームページの種類などを理解して、決定を下してください。
- システムフォントまたはほとんどのユーザーのデバイスに既にインストールされているフォントの使用を検討できます。
- 特にサードパーティのテーマを使用している場合は、経験豊富な Shopify 開発者を関与させるか、Shopify エキスパートを雇うことを検討して、テーマが Shopify サイトの速度を妨げていないことを確認してください。無料のテーマを使用している場合は、サポートに連絡して詳細なガイダンスを受けることができます。
ストアに必要なアプリを選択する
Shopify アプリは、e コマースの旅をはるかに簡単にし、いくつかの日常的なタスクを自動化して、時間とお金を節約します。これらのアプリをストアに統合すると、ストアの機能や外観が変更されます。つまり、これらのアプリは、スムーズに実行できるようにテーマにコードを追加します。
これらのコードを変更してストアのパフォーマンスを向上させることはできますが、Web サイトのパフォーマンスを低下させる可能性のあるアプリは削除するか、使用を避けることが不可欠です。
この場合、次の操作を実行できます。
- 使用しなくなったアプリを無効にします。
- アプリを削除する場合は、このアプリの一部として追加されたコードも忘れずに削除してください。場合によっては、これらのコードは{% comment %}タグで囲まれます。
それでもやり方がわからない場合は、アプリ開発者に相談するか、専門家を雇ってください。アプリにはバックグラウンドで実行される JS ファイルと CSS ファイルがあり、これらのアプリを使用していない場合でも Web サイトの速度が低下することに注意してください。そのため、ストアを常にシームレスに高速に保つために、これらの必要な対策を講じてください。
HTTPリクエストを最小限に抑える
電子商取引の世界に初めて足を踏み入れるのであれば、HTTP リクエストについて知っておく必要があります。HTTP リクエストは、クライアント (インターネット ブラウザー) とサーバー間の通信であり、クライアントはサーバーに Web サイトを読み込むための情報を要求します。
ウェブサイトにリダイレクトが多数ある場合、HTTP リクエストが多くなり、データ転送が遅れる可能性があります。この問題を解決するには、不要なリダイレクトを削除します。方法は次のとおりです。
- CSS と JavaScript を組み合わせてインライン化します。
- デザインやその他の機能的な画像の使用を減らします。
- 画像を Base64 コードに変換することを検討してください。
- ソーシャルボタンの数を減らします。
- 壊れたリンクは追加の HTTP リクエストをトリガーする可能性があるため、減らしてください。監査ツールを使用して壊れたリンクをチェックし、修正してください。Ahrefs など、監査ツールが組み込まれた SEO ツールも利用できます。
- 誤って間違った URL からアクセスした訪問者をリダイレクトするためのカスタム 404 ページを作成します。
画像と動画を最適化して圧縮する
購入プロセスを支援するには、顧客が商品をはっきりと見ることができるようにする必要があります。そのため、高品質で高解像度の画像やビデオを追加することになりますが、ほとんどの場合、読み込みに時間がかかりすぎる特大の画像になる可能性があります。訪問者が画像の読み込みに時間がかかりすぎると、ストアが遅いと感じる可能性があります。オンラインストアに過負荷をかけないようにするために、Shopify では次の対策を講じています。
- コレクション ページには 50 個を超える製品を表示できません。
- ホームページでは最大 25 のセクションのみ可能です。
- 遅延読み込みのテーマ。
- 多くのテーマでは、表示される画面のサイズに基づいて特定のサイズの画像も読み込まれます。
これらの手順は必須ですが、Web サイトの速度が本当に影響を受けないようにするために、さらに一歩進んだ対策を講じる必要があるかもしれません。
- 画像最適化ガイドを確認してください。
- 圧縮と最適化には、Shopify の画像リサイズツールやtinypng.comなどのツールを使用します。
- 注目の画像スライドショーは 2 ～ 3 枚の画像に制限します。
- 視覚要素を最適化する最善の方法については、テーマ開発者に相談してください。
適切なフォントを選択する
前に述べたように、ウェブサイトではシステム フォントを使用するのが理想的です。そうすれば、訪問者や顧客はフォントのダウンロードと表示に長い時間待たなくて済みます。しかし、顧客を引き付けるために、ウェブサイトにファンキーでキャッチーなフォントを使いたいと思うのは当然です。システム フォントには多くのオプションがあります。これにより、ストアの速度に影響を与えないフォントを簡単に選択できます。
モノ、セリフ、サンセリフのフォント ファミリから選択でき、太字と斜体の両方のスタイルでも使用できます。これらのフォント ファミリの例をいくつか示します。
- Mono: Menlo、Consolas、Monaco、Liberation Mono、または Lucida Console
- サンセリフ: BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu、または Helvetica Neue
- セリフ: Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times、または Source Serif Pro
注: 顧客のコンピュータに表示されるフォントは、そのオペレーティング システムによって完全に異なります。上記のフォントを使用すると、システムでのページの読み込みが速くなる可能性が高くなります。
スライドショーの代わりにヒーローバナーを活用する
多くのウェブサイト（おそらく競合他社のウェブサイトも）のホームページやコレクション ページで、特集スライドショーをご覧になったことがあるかもしれません。このデザイン手法は魅力的であるだけでなく、お客様がストアで提供しているものをすぐに確認する機会を提供します。
しかし、それらがウェブサイトの速度に影響を与える可能性があることをご存知ですか?
スライダーやカルーセルは製品画像を表示する優れた方法ですが、Web サイトの重量が増加し、速度が低下します。
さらに、複数の高品質の画像を使用すると、読み込みに時間がかかります。すべての画像が読み込まれる前に訪問者が離脱する可能性があるため、直帰率が上昇する可能性があります。解決策は？ヒーローレイアウトを使用することです。
ヒーロー レイアウトは基本的に、ホームページの上部に魅力的なテキストを配置した大きな画像で、訪問者の注目をほぼ瞬時に集めます。この画像は高品質である必要がありますが、スライダーとして複数の画像を使用することをなくすことで、読み込み時間を大幅に短縮できます。また、スライダーやカルーセルはモバイル デバイスではうまく機能しないようです。顧客が操作する頻度が低いためです。ヒーロー レイアウトは、顧客の購入行動にも影響を与えます。
モバイル アクセラレーション ページ (AMP) を活用する
優れたモバイル エクスペリエンスは重要であり、モバイルの使用が増えるにつれて、モバイル デバイス ユーザー向けに Shopify ストアを最適化することが理にかなっています。これを実現するには、Accelerated Mobile Pages (AMP) を使用できます。
AMP は、HTML および CSS コードを簡素化することで、モバイル デバイスで高速に実行される Web ページの作成を支援するオープンソース フレームワークです。同時に、使用される JavaScript が削減されるため、Shopify マーチャントは読み込み時間が短いモバイル フレンドリーなページを作成できます。
これにより、ユーザーの全体的なエクスペリエンスが向上し、購入を促します。Shopify App Storeには、 AMP by Shop Sheriffなど、AMP ページの作成に使用できるアプリが多数あります。
結論
Shopify の速度最適化にはさまざまな戦略やコツがありますが、これらの 7 つのヒントは、ストアの速度を効果的に上げ、ユーザー エクスペリエンスを改善し、結果として検索エンジンのランキングを向上させることができます。この簡潔で包括的なガイドは、あなたのような Shopify マーチャントが、読み込みの速い Web サイトの重要性と、Web サイトがいかなる時点でも遅くならないようにする方法を理解できるようにすることを目的としています。
ストアのパフォーマンスを高めるために私たちが実施する他の多くの手順や戦略とは異なり、これらのヒントはほぼ即座に効果を発揮します。今すぐストアの最適化を始めましょう。
