Shopifyサイトの速度を最適化するための9つのヒント

公開: 2020-06-29

Shopifyは非常にアクセスしやすいプラットフォームであり、Lindtのような大企業はわずか5日でeコマースストアを作成して開くことができます。店舗を立ち上げてすぐに取引を開始するのは簡単で、このプロセスを簡単にするための多くの機能が組み込まれています。

ただし、店舗を最大限に活用するために販売者が知っておく必要のあることがいくつかあります。サイトの速度は、依然としてこれらの重要な要素の1つです。読み込みが遅いサイトには多くの欠点があります。エンゲージメントが低くバウンス率が高いことから、トラフィックが少なく、売り上げが少なく、検索エンジンランキングが破損していることまで（Googleは読み込み時間が短いページが大好きです）、できることをして自分のサイトを作るのは理にかなっています。できるだけ早くサイト。

この記事では、現在のサイトの速度を評価する方法を検討し、速度を上げるためにできることをすべて実行していることを確認するためのヒントを紹介します。

Shopifyサイトの現在の速度を確認する方法

PageSpeed Insightsを使用すると、速度スコアと改善のための推奨事項が得られます。デスクトップとモバイルの結果を分離し、次のような推奨事項を作成します。

画像を最適化する
JavaScriptとCSSを縮小する
レンダリングをブロックするJavaScriptとCSSを排除する
ブラウザのキャッシュを活用し、サーバーの応答時間を短縮します
リダイレクトを避ける
Gzip圧縮

ホームページでテストを実行するだけでは十分ではありません。サイトで最も訪問されたページの上位10ページをテストする価値があります。ここで、速度の向上が最大の影響を及ぼします。 webiste速度監査の実行と解釈に関するガイドを確認してください。

ただし、Insightsツールにはいくつかの注意点があります。それは便利ですが、いくつかのことを覚えておく価値があります。これは、（ほとんどのShopifyサイトがそうであるように）Javascriptに大きく依存しているサイトをマークダウンし、いくつかの実用的な考慮事項を考慮していない技術チェックリストに照らしてサイトを判断します。また、テストが実行された時点で使用可能な帯域幅によっても異なる場合があります。

別の代理店のクライアントが、サイトの変更後にスコアが98から96に下がり、他の変更を加えてスコアを元に戻すことに固執したことを覚えています。彼らが理解していなかったことは、そうすることでサイトの他の領域を壊したり弱体化させたりする可能性があり、重要な要素はスコアの数値ではなく、サイト自体の実際のユーザビリティと速度でした。

要約すると、サイトの速度でどこにいるのかを知るのは良いガイドですが、すべてを網羅しているわけではありません。

PingdomまたはGTmetrixを使用して、ページの速度を評価することもできます。いくつかの異なるツールを試してみると、速度のパフォーマンス、問題、および修正アクションの概要がわかります。

サイトの速度を上げる方法

サイトのパフォーマンスがわかったら、ページを実行したツールの裏側にある推奨アクションがいくつかあるかもしれません。もしそうなら、それらを補完するために、ここにあなたがあなたのサイトの速度を上げるためにあなたが取ることができる私たちのトップ10の行動があります。

1 AMPを使用して、ページを高速化します

AMP（Accelerated Mobile Pages）は、モバイルデバイスでのページの読み込み速度を向上させるのに役立ちます。前提は、ページサイズと読み込み時間を短縮するために標準形式（Googleによって定義された）でWebページを提供することです。たとえば、ページのすべてのコンテンツが一度に読み込まれ、ブラウザはAMPページのレイアウトを事前に知っています。

ShopifyはストアのAMPバージョンを標準で提供していませんが、アプリストアで利用可能なRocketAmpのようなアプリがあり、ユーザーに代わってストアのページのAMPバージョンを作成します。このルートをたどり、後でアプリの使用を停止すると、ページエラーの問題が発生する可能性があることに注意してください。

2画像の最適化

画像の圧縮は、特にeコマースサイトでのWebページの読み込みを高速化するために重要です。

画像圧縮とは、画像を元のサイズで取得し、品質に影響を与えることなくファイルサイズを縮小することを意味します。

Shopifyでは、次の画像形式を使用できます。

JPEGまたはJPG
プログレッシブJPEG
PNG
GIF

PNG画像は、画像に透明なピクセルが必要な場合に便利です（背景に透明な部分を示すグリッドパターンが表示されることがよくあります）が、通常はJPEGよりも多くのスペースを占めるため、JPEGを標準として使用することを検討してください。できる。

圧縮には2つのレベルがあります。

「ロスレス圧縮」。画質を低下させることなく小さなファイルを提供します。
「不可逆圧縮」。これにより、ファイルはさらに小さくなりますが、画質が犠牲になります。

どちらのオプションも利用できますが、商品を販売するeコマースサイトとして、画像は顧客に購入を促す重要な部分である可能性があります。 Eastside Coが実施した1,500人のオンライン買い物客を対象とした最近の調査では、回答者の37.8％が、商品の画像が購入決定に「非常にまたは非常に影響力がある」と考えていると述べています。これを念頭に置いて、小さいファイルには可逆圧縮を使用することを検討してください。ただし、品質は低下しません。

画像をサイトにアップロードするときは、ピクセルの幅と高さの観点から、ページに必要なサイズであることを確認してください。無料のツールtinypng.comを使用して、画像のサイズを小さくすることができます。

3高速でレスポンシブなテーマを使用する

EastsideCoのようなShopifyExpertのサービスを利用するのではなく、すぐに使用できるテーマを使用している場合は、高速で応答性の高いテーマを選択してください。これは、表示に使用されているデバイスのサイズに基づいてWebサイトの要素を修正し、より優れた高速なユーザーエクスペリエンスを実現することを意味します。

4ストアにインストールされているアプリを確認します

Shopifyストアの管理者にアクセスして、インストールしたすべてのアプリを確認し、不要なアプリや使用していないアプリを削除します。多くの場合、Shopifyサイトの速度が遅い背後にある問題は、サイトで実行されているアプリの数です。インストールするすべてのアプリは、Webサイト上のコードが多く、ロードする要素が多くなります。

アプリだけでなく、使用しているサードパーティのコードを確認し、不要になったものがあれば一般的に整理することも価値があります。

5HTTPリクエストの数を減らします

訪問者がブラウザにWebページの1つをロードするたびに、CSSファイル、Javascript、デザインイメージなどの追加のWebファイルもロードされます。このようなファイルが要求されるたびに、ブラウザに対する追加の要求が作成されます。プロセスへ。これらはHTTPリクエストと呼ばれ、存在するほど時間がかかります。

HTTPリクエストの数を減らすために実行できる技術的な手順はいくつかあります。この記事では、これを実行し、サイトの速度を上げるのに役立つ9つのアクションを提供します。

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

リンク切れはHTTPリクエストを増やす可能性があり（ポイント5を参照）、訪問者が店舗を離れて他の場所で買い物をする可能性が高くなるため、訪問者がHTTPリクエストにアクセスすることは望ましくありません。

不必要なリダイレクト（たとえば、ページAはページBを指し、ページCは訪問者が最終的に着陸する場所を指します）は、訪問者が到着するまでに時間がかかり、サイト全体の速度を低下させることを意味します。

Shopifyアプリストアには、壊れたリンクとリダイレクトを識別し、継続的に修正するのに役立つアプリがあります。

7スライダーとカルーセル画像を削除します

スライダーは一部のWebサイトで存続しますが、画像のカルーセルよりも単一のヒーロー画像をお勧めします。どうして？

2番目または3番目のスライドが表示されるのを待つのは言うまでもなく、最初のスライドをクリックする人はほとんどいません。
各スライドはページに追加の重みを意味し、誰も実際にそれらを見たり使用したりしないため、それらは大部分が冗長です
モバイルデバイスではさらに効果が低い

代わりに1つの「ヒーロー」画像を使用してください（説明どおりに最適化）。必要なのはそれだけです。

8すべてのトラッキングコードをGoogleTag Manager（GTM）に通します

使用しているサードパーティのコードをGoogleタグマネージャーに移動します。時間の経過とともに、マーケティングソフトウェアまたは分析コードがサイトに追加され、扱いにくくなる可能性があります。 GTMを使用すると、すべてのサードパーティコードの管理が容易になり、関連するページにのみ読み込まれます。また、すべてを追跡し、将来的に冗長になる要素を削除できることも意味します。

9遅延読み込み

これは、Shopifyストアの速度を上げるもう1つの簡単な方法です。遅延読み込みは、ユーザーがさらに下にスクロールするまで、ページの「折り畳みより上」にないものは読み込まれない方法です。

これは、画像が多いページやさらに下のビデオを特集するページの速度を最適化するための優れた「チート」です。基本的に、すべてを同時にロードするのではなく、必要に応じて要素をフェッチするだけです。 CSSトリックから遅延読み込みを実装する方法については、この詳細なガイドをご覧ください。

これで、サイトの速度を上げるためにできることをすべて実行していることを確認するために覚えておくべき9つの実用的なポイントがあります。サイトの速度から売り上げの増加まで、Shopifyストアでサポートが必要な場合は、ご連絡ください。