Shopifyの速度最適化を実行するための8つの試行された真の方法

序章

Shopifyの速度の最適化は、Shopifyストアの所有者が考慮すべき最も重要な側面の1つです。 ウェブサイトの読み込みが遅いと、バウンス率が高くなり、ユーザーエンゲージメントが低くなり、トラフィックが少なくなるため、売り上げにさまざまな影響が及びます。 サイトの速度とページのパフォーマンスが適切であれば、サイトのSEOが向上し、ユーザーエクスペリエンス（UX）が向上します。 結局のところ、彼らはあなたの検索エンジンのランキングを進めます。

この記事では、 LitExtension –＃1ショッピングカート移行エキスパートが、Shopifyを高速の読み込みで他のサイトよりも優れたものにする方法について説明します。

Shopifyストアのパフォーマンスを最適化する方法を深く掘り下げる前に、Shopifyレビューに関するこのビデオをチェックして、この素晴らしいプラットフォームについて詳しく知ってください！

トップクイックShopify速度最適化チェックリスト

ここでは、Shopifyストアの読み込み時間と速度を改善できる8つの実証済みの方法を紹介します。 これらの方法は、Shopifyのページ速度を最適化することで、ストアの所有者が顧客を維持し、新しい購入者を引き付けるのに役立ちます。

1.画像とビデオを最適化する

最適化されていない大量の画像や動画が、ウェブサイトの速度低下の最も一般的な理由であることがよくあります。 次のようにShopifyサイトを高速化するために検討する可能性のある4つのソリューションがあります。

1.1。 画像の圧縮とマージ

大きな画像を圧縮することは、Shopifyサイトを高速化するための最も効率的な方法の1つです。 特に、 TinyJPGまたはTinyPNGは、可逆圧縮で品質を低下させることなく画像のサイズを圧縮するための優れたオプションです。

または、サーバーの画像リクエストの負荷を必要とする多くの異なる画像をアップロードする場合は、画像の統合を選択できます。 これは、多くの識別可能なアイコンとサムネイルを「CSSスプライト」または「CSSイメージスプライト」と呼ばれる1つにマージするのに役立ちます。 その後、Shopifyの速度の最適化を適切に実行します。

1.2遅延読み込みイメージを使用する

eコマースのウェブサイトには多数のページが詰め込まれています。 顧客がWebサイトのリンクをクリックすると、ブラウザが動作を開始し、ページで利用可能なすべてのコンテンツをダウンロードして、Webページを閲覧する準備を整える必要があります。 したがって、すべてのコンテンツのロードにはかなり苛立たしい時間がかかります。

遅延読み込みを使用すると、彼女はリンゴになり、問題は巧みに解決されます。 需要と供給の原則に基づいて機能します。 ブラウザは、訪問者が最初に表示するコンテンツ、つまり、フォールド上のコンテンツのみをロードします。 顧客が下にスクロールしない限り、折り目の下のコンテンツは表示されません。

ブラウザはWebサイトのコンテンツ全体を一度にロードする必要がないため、ShopifyWebサイトを高速化する方法に関する質問を解決するのに役立ちます。

1.3遅延ビデオ読み込みを適用する

Shopifyサイトの速度を向上させるためのもう1つのソリューションは、マーチャントが考慮する必要があるビデオです。 この点で、ビデオは画像によく似ています。 遅延ビデオの読み込みは、必要になるまで動画リソースの読み込みを延期することで、サイトの読み込みを高速化できるパフォーマンス手法です。

この手法を使用したShopify速度テストがあります。 2MBのページの重みを節約し、0.75秒速くページの読み込みに貢献しました。

– SpeedBooster、2021

1.4GIFを静止画像に置き換える

Shopifyの速度最適化を実行するときに、GIFを静止画像に置き換えることは言うまでもありません。 GIFは、顧客体験にとって貴重な資産と見なすことができます。 UXとブランディングの面でShopifyの速度を魅惑的に向上させます。

ただし、これらのファイルは特に大きく、 GIF画像には複数のフレームがあることに注意してください。 したがって、期間が長いほど、より多くのフレームが含まれます。 ビデオから2秒以内に、GIFに20以上の画像が含まれる可能性があります。 これらのファイルはサイトの重みに著しく追加されるため、Webサイトの専門家は、可能な場合は静止画像に切り替えることを強くお勧めします。 これを書き留めてください。これは、Shopifyサイトの速度を最適化するための最も簡単で迅速な方法の1つと見なす必要があります。

2.適切なフォントを選択します

Shopifyの速度最適化を実行するために除外できない最も注目すべき要素の1つは、適切なフォントです。 Shopifyのフォントライブラリには、システムフォント、Googleフォント、Monotypeのライセンスフォントなどのフォントのコレクションが含まれています。 これらのフォントはすべて、Shopifyのすべてのオンラインショップで無料で使用できます。

顧客のコンピュータに存在しないフォントを使用する場合、テキストを表示するために顧客が新しいフォントをダウンロードする必要があるのはイライラすることに注意してください。

顧客のコンピューターに新しいフォントをダウンロードしないようにするために、システムフォントの使用を検討することをお勧めします。 システムフォントは、ほとんどのコンピューターにすでに存在するフォントとして知られています。 モノ、セリフ、サンセリフファミリーなど、選択できるオプションがたくさんあります。 これらのファミリの中で、太字や斜体など、任意のフォントスタイルを使用することもできます。

顧客のコンピューターに表示される書体は、顧客が使用しているオペレーティングシステムによって決まります。 システムフォントファミリを選択すると、さまざまな書体から選択してテキストをレンダリングできます。

• モノフォント： Menlo、Consolas、Monaco、Liberation Mono、またはLucidaConsole。
• サンセリフフォント： BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu、またはHelveticaNeue。
• Serifフォント： Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times、またはSourceSerifPro。

3.不要なShopifyアプリを削除します

アプリが便利で便利であることは否定できません。特に、技術に精通しておらず、コーディングの経験がない場合はなおさらです。

ニーズに合ったアプリをインストールすることで、ShopifyWebサイトに機能を追加できます。 たとえば、eコマースストアの所有者は、ライブチャットアプリを最初から作成するのではなく、ダウンロードすることができます。

ただし、これらのアプリを使用していない場合でも、これらのアプリはWebサイトに負荷をかけることに注意してください。 これらのアプリには、バックグラウンドで実行され、Shopifyページの速度に悪影響を与える多くのJSファイルとCSSファイルがあります。

したがって、使用しているすべてのアプリを頻繁に確認することが重要です。 次に、実行できる2つの簡単な手順があります。

• 使用しなくなったアプリ機能を無効にするか、ストアに適用されない機能を削除します。 オンラインストアの機能と速度の最適化を考慮に入れてください。
• アプリを削除する場合は、インストール手順中に追加されたコードを削除することを検討してください。 一部のアプリは、アプリ名を含む{％comment％}タグでコードを囲むことにより、この手順を支援します。

不要なアプリコードを削除すると、使用されていない機能のコードが実行されなくなり、テーマコードが理解しやすくなります。

• アプリ開発者に相談してください
• Shopifyの専門家を雇ってさらに助けを得る

注： Shopify Local Deliveryアプリのような管理者専用アプリは、ストアの速度に影響を与えません。

4.スピーディーでレスポンシブなShopifyテーマを更新/ダウンロードする

Shopifyテーマは、Liquid、HTML、CSS、およびJavaScriptコードで構成されています。 これらのファイルサイズは、テーマを編集またはカスタマイズするにつれて大きくなり、最終的にはShopifyサイトの速度に影響を与え、最終的にはShopifyの最適化に失敗する可能性があります。

新しいテーマをインストールする場合は、常に次のことを確認してください。

• スピーディーで応答性の高いテーマを選択してください。
• テーマの最新バージョンとテーマのライブプレビューを確認してください。 Google PageSpeed Insightでテーマのプレビューページを実行して、サイトの速度を最適化するためにどのような改善を行うことができるかを確認します。

テーマ内でオンラインストアの速度を低下させているものを検出した場合は、次の手順を実行します。

• 使用しなくなったテーマを無効にします。 eコマースWebサイトで機能と速度のバランスをとる方法を検討してください。
• 可能な場合はシステムフォントを使用してください。
• アプリ開発者に相談してください。 Shopifyの無料テーマを使用する場合は、テクニカルサポートチームからサポートを受けることができます。 サードパーティのテーマを使用している場合は、テーマ開発者に連絡するか、Shopifyの専門家を雇うことができます。
• Dawnのように、パフォーマンスが最適化されたテーマをインストールすることは、決して賢い選択肢ではありません。
• Shopifyの専門家を雇ってさらに助けを得る

複雑な操作を繰り返し実行すると、Liquidのレンダリング時間が遅くなり、ストア全体の速度が低下する可能性があります。 コードが最適化されていないことが心配な場合は、次の手順を使用してください。

• Shopifyの専門家を雇って、非効率的または未使用のコードを特定するのを手伝ってください。
• Chrome用のShopifyテーマインスペクターを使用して、オンラインストアのページの速度を低下させているコード行を見つけます。

5.ハーネスAMP

Shopifyの速度を最適化するためのもう1つのソリューションは、モバイルアクセラレーテッドページ（AMP）です。これは、マーチャントがモバイルフレンドリーなウェブページをスピーディーにロードできるようにする標準フレームワークです。

スマートフォンは、今日のペースの速い世界では、贅沢な製品から必需品へと進化してきました。 デジタル技術のこの時代では、人々はもはや通信のためだけに携帯電話を使用するのではなく、オンラインクラスを受講し、支払いを転送し、Webサイトを閲覧し、オンラインショッピングに行きます。

以下の統計（Statistaによって更新）をざっと見て、モバイル訪問者のユーザーエクスペリエンスを改善することがどれほど重要かを確認してください。

• 2021年には、スマートフォンのサブスクリプションは世界中で60億を超え、今後数年間で数億人の増加が見込まれています。
• モバイルコマースは、2017年の58.9％から、2021年にはすべての小売eコマースの72.9％を生み出すと予測されています。

したがって、Shopifyストアの所有者がAMPを検討する時期が来ています。 ウェブサイトがスピーディーに読み込まれるか、モバイルデバイスで適切に機能しない限り、多くの見込み客を失う可能性があります。 このフレームワークのおかげで、顧客はあなたのWebサイトにはるかにすばやくアクセスできるようになります。 Shopify Appストアでは、4つ星評価のFireAMPやRocketAMPなどの多くのアプリを利用して、AMPページの作成を支援しています。 または、ShopifyAPIを構築してこれらのAMPページを開発することを検討できます。 これらのアプリは、ShopifyのWebサイトを高速化する方法についてのあなたの質問を完全に釘付けにします。

6. GoogleTagManagerを使用してすべてのトラッキングコードを整理します

クライアントの行動をより深く理解するには、サイトからデータを収集する必要がありますが、Webサイトの速度が低下する可能性があります。

コンバージョン、目標、リターゲティングを個別に測定すると、これらのトラッキングタグがすべてページ上のリクエスト数に追加され、最終的に全体の速度が低下する可能性があります。 また、非同期で実行されない場合、ページのコンテンツがレンダリングされないようにすることもできます。

Google Tag Managerなどの管理ソリューションを使用して、すべてのトラッキングタグを1つのJavaScriptリクエストにまとめることができます。 1つのコードスニペットでさまざまなストアタグを処理できます。 ShopifyストアでGoogleタグマネージャーを使用する方法の詳細については、このガイドをご覧ください。

7.リダイレクトと壊れたリンクを最小限に抑える

Shopifyの速度の最適化を行うために、サイトで大量のリダイレクトや壊れたリンクが発生する場合があります。 これにより、不当な事態を回避する方法があります。

7.1。 リダイレクトの場合

不要なリダイレクトは、Webサイトのパフォーマンスを抑制し、ページの読み込み時間を遅くします。 これは、次に、 Webサイトの全体的な読み込み時間に影響を与えます。

壊れたリンク404/301リダイレクトは、Girafflyによって開発された、選択するための賢いソリューションです。 それは次のことに役立ちます：

• 404エラーページを特定する
• アプリのダッシュボードに壊れたリンクをすべて目立つように表示します。 さらに、メールでレポートを受け取ることができます。
• 301のURLリダイレクトを簡単に生成します。 リダイレクトパターンを設定するだけで、残りはソフトウェアが処理します。

7.2。 壊れたリンクの場合

ユーザーは確かにこのメッセージによって延期されます。 したがって、ユーザーを苛立たせ、追い払うブランドにならないでください。 不必要なHTTPクエリを作成しないようにするには、Dead Linkチェッカーなどの無料のオンラインツールを使用して、Webサイト上のリンク切れを検出し、それらを更新または削除します。

壊れたリンクはSEOに害を及ぼします。 ユーザーが利用できないページにアクセスした場合、ユーザーはブラウザーの戻るボタンを押します。 これにより、Webサイトのバウンス率が向上します。

8. GooglePagespeedInsightsを使用してストアの速度パフォーマンスを確認します

ソリューションにジャンプする前に、質問に答えましょう：良いShopifyスピードスコアは何ですか？ Shopifyの速度スコアは、ストアがGoogleLighthouseテスト環境でどれだけうまく機能しているかに基づいています。 50以上は立派なShopifyスピードスコアと見なされ、 70以上は優れていると見なされます！

ストアのパフォーマンスを確認するための推奨事項は、 Google PageSpeed Insightsを使用してWebページを評価し、読み込み時間を長くするWebサイトの部分を見つけてから、提供された提案に取り組み、読み込み時間を最小限に抑え、Webサイトの速度とパフォーマンスを向上させることです。

Google PageSpeed Insightsは、モバイルおよびデスクトップWebサイトの次の重要な要素を明らかにします。

• CSSとJavaScriptを最小限に抑える
• 画像を最適化する
• 上記の折り畳みウェブページのコンテンツでレンダリングをブロックするCSSとJSを削除します
• サーバーの応答時間を短縮する
• ブラウザのキャッシュを利用する
• ランディングページへのリダイレクトは絶対に避けてください
• 圧縮

Google PageSpeedを使用してWebサイトのパフォーマンスを分析することは、サイトの速度を低下させる側面を見つけるのに役立つ最高のShopify速度最適化サービスである可能性があります。

Shopifyのページ速度が重要なのはなぜですか？

eコマースの成功はあなたのウェブサイトの速度に依存します。 また、2021年5月のGoogle検索ランキングの変更が差し迫っているため、競争上の優位性としてオンラインパフォーマンスがさらに重要になります。

次の要因を見てみましょう。

• コンバージョンを増やす

バウンス率の低下とコンバージョンの増加は、コンバージョンの速いWebサイトに関連しています。 Googleによると、サイトの速度が1秒上がると、モバイルコンバージョンが最大27％増加する可能性があります。 買い物客の70％がモバイルデバイスで購入しているため、サイトの速度は確かに収益の可能性に大きな影響を与えます。

サイトの速度を1秒上げると、モバイルコンバージョンを27％も増やすことができます。

• 顧客の忠誠心を築く

「新しい顧客を獲得するよりも、現在の消費者に繰り返し購入してもらう方が安い」と聞いたことがあるかもしれません。

ここで、サイトの速度が重要になります。 Skilledによると、顧客の79％は、サイトの速度に「不満」がある場合（つまり、サイトが高速である場合、リピーターを獲得する可能性が高い場合）、オンラインビジネスから買い戻す傾向が少なくなります。

• Google検索ランキングを向上させる

あなたがグーグルのような検索エンジンでより高くランク付けされるならば、より多くの潜在的なクライアントはあなたのビジネスを見つけるでしょう。 最も有名な検索エンジンであるGoogleは、検索結果のランキングコンポーネントとしてサイト速度を使用しています。 より高速なサイトはGoogleで上位にランク付けされ、新しいクライアントがそれらを見つけやすくなります。

Shopifyの速度の最適化–よくある質問

結論

この記事が、Shopifyの速度最適化を実行する方法を理解して学ぶのに役立つことを願っています。 高速パフォーマンスを実現するために適用および従うことができる8つの強力な方法を強調しました。

Shopifyストアは、顧客にとってショッピング体験をより簡単で豊かにすることに重点を置いています。 機能が適切に適用されていない場合、Webサイトの速度が低下する可能性があります。

現在Shopifyまたは他のeコマースプラットフォームを使用していて、速度の問題が発生する可能性がある場合は、LitExtension –＃1ショッピングカート移行サービスが役立ちます！ 私たちのチームは、Shopifyの速度最適化を完璧に実行するのに役立ちます！ お問い合わせください、私たちは常に助けを求めています。

また、私たちのコミュニティに参加して、ますます多くのeコマースニュースを入手することもできます。