サムネイル

Shopify ストアでの速度スコアについて、調べ方や改善する方法を徹底解説!

目次

はじめに

Shopify ストアを使用・運用する際、サイトの読み込み速度が遅いなと感じてしまうことはありませんか? 読み込み速度が遅い状態を放置しているとユーザー満足度の低下を招いたり、ユーザーがショップの関連ワードを検索したときにショップサイトの表示される順位が低くなってしまうこともあります。今回は Shopify ストアの速度スコアを計測する方法や、ストアの速度スコアを改善する方法について解説します。

WEB サイトの速度スコアとは

WEB サイトにおける速度スコアとは、サイトのコンテンツやローディングのパフォーマンスを数値にまとめたものです。スコアが高いほどパフォーマンスが良く、ユーザーがサイトを訪れてからコンテンツが表示されるまでの待機時間が短いことを示しています。

速度スコアを改善するメリット

速度スコアを改善すると、サイトコンテンツの表示までが速くなり、それに起因して様々なメリットがあります。

顧客がサイトを使いやすくなる

速度スコアを改善することによって、顧客がサイトを訪れてからコンテンツが表示されるまでの時間が短くなったり、サイト内のページからページへの遷移がスムーズになります。その結果、顧客が閲覧しやすいサイトになります。

離脱率の低下につながる

サイトのコンテンツがなかなか表示されないと、ユーザーは容易にサイトを離れてしまいます。多額の費用をかけて広告やキャンペーンなどで顧客を呼び寄せることができたとしても、すぐに離脱されてしまうのは惜しいことです。

サイトの検索順位が上がる

サイトの速度スコアを改善すると、Google などの検索エンジンがストアサイトのことをユーザビリティの高いサイトとして評価します。ユーザビリティの高さは SEO の観点からみても非常に重要な項目となります。SEO で高く評価されれば、ユーザーがショップに関連するワードを検索した際にストアサイトが上位に表示されやすくなります。

SEO について詳しく解説した記事はこちらから
Shopify で SEO を対策・改善する方法を徹底解説!

速度スコアを測定する方法

速度スコアを測定する方法はいくつかありますが、簡単な方法を 2 つご紹介します。

PageSpeed Insights での測定方法

PageSpeed Insights は、サイトの速度スコアを測定できる、代表的な WEB サービスです。

PageSpeed Insights はサイトのパフォーマンスだけでなく、SEO スコアなども測定できます。

PageSpeed Insights でストアサイトの速度スコアを測定するには、まずPageSpeed Insightsにアクセスします。

以下の画像の通り、URL 入力欄にストアサイトの URL を貼り付けます。

URL 入力欄にストアサイトの URL を貼る

URL を貼り付けたら「分析」をクリックします。

「分析」をクリック

すると以下のようにパフォーマンスなどに関するスコアが表示されます。

スコアが表示

各項目がスコア 90 以上であれば良好な結果であると言えますが、EC サイトなど多機能なページで、すべての項目で 90 点以上をとるのはなかなか困難です。なのでスコア 50 を目安として改善すると良いでしょう。もちろん、スコアが高ければ高いほどローディングは速いことになるので、余裕があればさらに改善を進めるとよいでしょう。

Google Chrome の検証ツールでの測定方法

WEB ブラウザとして Google Chrome を利用している場合、検証ツールを使って手軽にストアの速度スコアを測定できます。

検証ツールを用いて速度スコアを測定するには、まず検証したいストアを開いて、適当な場所で右クリックします。するとメニューバーが表示されます。

ここで一番下の「検証」をクリックします。

「検証」をクリック

すると以下のように検証画面が表示されます。

検証画面が表示

下画像の赤枠の部分をクリックします。

赤枠の部分をクリック

出てきたメニューの中から「Lighthouse」をクリックします。

「Lighthouse」をクリック

「Categories」の欄で測定したい項目にチェックを入れます。

「Device」の欄で測定したい環境(Mobile:スマホ、Desktop:PC)を選択します。

「Analyze page load」をクリックして、速度スコアを測定します。

速度スコアを測定

すると以下のような画面に切り替わり、速度スコアが表示されます。

速度スコアが表示

以下が各項目の目安スコアです。

項目スコア
Performance49 以下で OK
Accessibility70
Best Practices80
SEO80

速度スコアを改善する方法

目安よりもスコアが低い場合や、さらにストアの速度スコアを高めたい場合は以下の内容を改善するとよいでしょう。

速度スコアが遅い原因を解明する

速度スコアが遅い場合、ストアに何らかの原因があります。速度スコアを悪化させる要因を調査できます。

まずは右クリックで検証を選択して検証画面を表示します。

検証を選択して検証画面を表示

「Network」を選択して、ローディングにかかる時間を項目ごとに確認しましょう。

ローディングにかかる時間を項目ごとに確認

「Time」の項目で数字が大きいほど、ローディングに時間がかかっている項目です(※1ms = 1000 分の 1 秒)。

ローディングに時間がかかっている項目を確認

項目をクリックして「Preview」を選択すると、項目がどんな要素なのか具体的な内容を確認できます。要素が画像であれば実際の画像が表示されます。

項目要素の具体的な内容を確認

画像サイズを圧縮してからアップロードする

画像のローディングに時間がかかっている場合、埋め込んでいる画像の解像度が高すぎる場合があります。

その場合、画像のサイズや解像度を下げることによって解決できる場合があります。

試しに解像度が極めて高い画像を商品画像として設定してみると、この画像のローディングだけで 1.5 秒もかかっていることが分かります。

解像度が極めて高い画像を商品画像として設定してみる

参照: UnsplashRafael Garcinが撮影した写真

Lighthouse のパフォーマンススコアは 80 となっています。

Lighthouse のパフォーマンススコア

この画像をiLiveIMGなどを利用してサイズと解像度を下げて商品画像として設定しなおすと、ローディング時間が 0.06 秒まで短くなりました。

解像度を下げて商品画像として設定

Lighthouse のパフォーマンススコアも 86 まで改善できました。

Lighthouse のパフォーマンススコア

埋め込んでいる動画を YouTube 経由で表示させる

動画を埋め込んでいる場合も、パフォーマンスのスコアを低下させる要因になります。

ページにそのまま動画を埋め込んだ場合、パフォーマンスは 60 程度にまで低下しました。

ページにそのまま動画を埋め込んだ場合

しかし、動画を YouTube にアップしたものを URL で指定して埋め込んだ場合、パフォーマンスまで 86 にまで改善しました。

YouTube にアップしたものを URL で指定して埋め込んだ場合

速度スコアを改善する場合、動画は直接サイトに埋め込むのではなく、一旦 YouTube にアップロードして、外部動画としてショップサイトに埋め込む方法が望ましいと考えられます。

外部動画としてショップサイトに埋め込む具体的な方法については以下のブログで解説しているので、よければご覧ください。

Shopify で商品ページに動画を挿入する方法を徹底解説!

ただし YouTube 経由で動画を埋め込む場合、サムネイルを設定しないと Shopify デフォルトの画像になってしまい、動画の内容が想像できなくなり、結果的に再生されなくなる可能性があるので、YouTube 経由で動画を掲載する場合はサムネイルの設定を忘れないようにする必要があります。

不要なコンテンツを削除する

処理が重くなるのは画像や動画だけではありません。DOM 要素や CSS スタイルなどもパフォーマンスが重くなる要因になり得ます。

試しに CSS アニメーションを大量に追加したところ、Lighthouse のパフォーマンスが 80 付近から 60 まで下がりました。

CSS アニメーションを追加した後の Lighthouse パフォーマンス

CSS アニメーションを追加した後の Lighthouse パフォーマンス

ちなみに、CSS アニメーションを追加する前の Lighthouse パフォーマンスは以下でした。

ちなみに、CSS アニメーションを追加する前の Lighthouse パフォーマンス

不要な要素やアニメーションをむやみやたらに詰め込むと、速度スコアを著しく低下させるため、速度スコアを改善したい場合は本当に必要なコンテンツ以外削除すると良いでしょう。

まとめ

今回の記事では、WEB の速度スコアの調べ方や、サイトの速度スコアを改善する方法を解説しました。

Shopify ストア構築の参考にしていただければ幸いです。

おすすめ Shopify アプリ

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事