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