Shopifyストアのページ表示速度を高速化できる3つの方法【中級者向けの方法3選も紹介】

こんにちは！Shopifyなどのネットショップサイト制作と集客・改善支援をしております、スズコー（@vietl）です。

今回は上記の疑問を解決する記事をまとめてみました。

この記事を読むことでこんなメリットがあるので、ぜひ参考にしてみてください！

オンラインストア運営でページ表示速度を改善するべき理由

まず初めに、「なぜオンラインストア運営でページ表示速度を改善する必要がなぜあるのか？」について、その理由を解説します。

ユーザーの離脱率が高くなる

まず第一に、ユーザーの離脱を防ぐためにページ速度の高速化が必要となります。

現代人は高速化されたWebサイトのスピードに慣れており、ページの読み込みが2秒以上かかるとイライラし始めると言われています。

2018年のGoogleの調査によれば、ページ表示速度が1秒から3秒になると離脱率が32%も増加するデータが発表されています。

さらに、ページの表示スピードが1秒遅れるとコンバージョン率（購入率）が7%下がるというデータもあるので、少しでも商品購入の取りこぼしが出ないようページの高速化は必須です。

SEO対策になる

ページスピードの速さはGoogleがSEO（検索エンジンの上位表示）における200以上ある要素の1つとして認めているため、SEOの観点からも表示速度の改善は重要となります。

あくまでも200以上ある要素の1つですが、遅いよりは速いに越したことはありませんし、可能な限りできることは全てやるのが現代のSEO対策の常識です。

ページの高速化はそれほど手のかかる施策ではないので、SEO対策においては優先的に行いたい施策の1つですね。

売上に影響する

ユーザーの離脱率が高くなるということは、当然ながら売上に大きく影響を受けます。

アメリカの調査企業Aberdeen Groupの調査によると、ページの表示速度が1秒遅くなるとコンバージョンが7%低下、ページビューが11％低下、顧客満足度が16%も低下することが発表されています。

一度ネガティブな印象を持たれてしまったユーザーについては、再度サイト訪問していただくまでのハードルが必然的に高くなってしまうことも、この調査結果で明らかですね。

【簡単】Shopifyストアの表示速度を向上させる3つの方法

Shopifyストアでは、表示速度を向上させる方法がいくつかあります。

ここでは、今すぐに行える簡単なサイトスピード改善方法を3つ紹介します。

軽量な画像を使う

1つ目は、軽量な画像を使うことです。

画像のサイズが大きければ大きいほど、ブラウズにそのデータを読み込むまでの時間を要します。

オンラインストアでは特に画像をたくさん使用するので、できる限り軽量な画像を使わないと、いとも簡単にサイトスピードは遅くなってしまいます。

画像を軽量化するには、

といった方法があります。

上記の施策を行うだけでもかなり変わるので、ぜひ活用してみましょう。

軽量なテーマを用いる

2つ目は、軽量なテーマを使うことです。

Shopifyテーマはテーマごとに特徴や機能が異なりますが、サイトスピードも同じです。

テーマそのもののサイトスピードを変更するのは容易ではないので、初めからスピードの速いテーマを使うのも手段の1つとなりますね。

参考までに、2020年7月発表の記事「Page Speed Scores of Every Shopify Theme」では、Shopifyの全公式テーマのページスピードスコアランキングを発表しています。

現在80テーマ（＊2021年2月現在）近くある公式テーマのモバイル、PCそれぞれのスピードスコアを元に総合ランキングにしているため、一度この記事を読んでおいて損はないはずです。

ちなみに、Shopify公式テーマのページスピードスコア ベスト5は以下の通り。

やはり、あまりリッチな機能を積んでいない無料テーマのDebutやSimple、Boundlessのページ表示速度が総合的に速いようです。

使うアプリを最低限に抑える

3つ目は、使うアプリを最低限に抑えることです。

アプリの数とサイトの読み込みスピードはトレードオフの関係にあり、使うアプリが多くなればなるほどサイトスピードは低下します。

なので、アプリを導入するかどうかは慎重に判断する必要があり、「なんとなく便利そうだから…」といって闇雲に導入するべきではありません。

速いページスピードを維持するためにも、本当にそのアプリがShopifyストア運営で必要かどうかはしっかりと考える必要があるでしょう。

数の目安としては、アプリにもよりますが導入アプリ数は大体6~10個以内に抑えるのが良いでしょう。

【中級者向け】表示速度を向上させる方法3選

ここからは、Shopifyストアの表示速度向上に繋がる実装方法を3つ紹介します。

主に開発者向けとなりますが、先述した3つの方法と合わせて参考にしてみてください。

コードの追加と削除

専門性が必要な方法にはなるんですが、Shopifyテーマのコード編集をする事でページ速度の高速化が可能です。

実際に行う場合は、ある程度コーディングの豊富な知見がある方のほうがリスクを抑えられる方法になるので、まったくの初心者にはお勧めはできないです。

ですが、簡単なコーディングスキルがある人であればすぐに実行できる施策もいくつかあるので、エンジニアの方は一度試してみても良いですね。

今回は、実際に行なった事でページ速度を高速化することができた事例を中心に紹介します。

なお、上記を実施した事により、ページスピードスコアが52から96に劇的に改善された調査結果があります。詳しくはこちらのShopify CTOのJean-Michel氏のツイートが参考になります。

John Rawsterne, who’s the first ever theme developer on Shopify, made our suggested performance related changes to his theme and saw a huge perf gain. https://t.co/aisaILtADF pic.twitter.com/rxXFR0r701

— Jean-Michel Lemieux (@jmwind) December 11, 2020

アプリ「Page Speed Booster」を使う

Page Speed BoosterというShopifyのアプリを使うことで、ページ速度の改善が可能です。

こちらは、ユーザーがページを閲覧した際に次の行動を予測し、遷移先となり得るページコンテンツの読み込みをあらかじめ行って、遷移時のページ読み込み時間を最小限に抑えてくれる画期的なアプリです。

無料で利用できるアプリで、インストールするだけで機能し、特に設定も必要ないのもメリット。

といった注意点もありますが、ぜひ導入を検討してみましょう。

アプリ「TinyIMG SEO & Image Optimizer」を使う

もう1つ、TinyIMG SEO & Image Optimizerというアプリを使う方法があります。

こちらは主に画像関連のSEO対策向けアプリですが、Shopifyストア内の画像を自動で圧縮する機能があり、ページ表示速度の改善にも役立てられます。

機能は制限されますが、無料プランもあり、そこまで大きくないストアであれば無料プランでも十分に利用可能です。

上記で紹介した施策と合わせて、こちらも活用してみると良いでしょう。

【便利】表示速度のチェックはPage Speed Insights

ちなみに、Shopifyストアの表示速度をチェックするには、Page Speed InsightsというWebサイトを利用すると良いです。

こちらはGoogleが提供するページ速度チェックツールで、完全無料で利用できます。

ShopifyストアのURLをコピペするだけで簡単にサイトスピードの確認ができ、改善に必要な提案もサイト側で行ってくれます。

とても便利でおすすめのツールなので、ぜひ今後利用してみてください。

まとめ

今回は、Shopifyストアのページ速度を改善するメリットとその方法をまとめました。

簡単で今すぐにでもできる3つの方法と、中級者以上（主に開発者）向けの3つの実装方法の、計6種類の施策を紹介しました。

ストアの表示スピードを改善することでシンプルにストアの売上を向上させることができ、また効果的なSEO対策にも繋がります。

Shopifyストアの運営においては、特に新規の集客施策実施している時やキャンペーン・イベントを行なっている時は重要な項目となるので、ぜひこの機会にページ表示速度の確認と改善を行ってみてください。

もちろん、記事の内容に関するご質問や、ご相談などありましたら可能な限り応じますので、気になった方はお気軽にご相談ください！