今日のデジタル社会では、ウェブサイトのパフォーマンスがビジネスの成功に影響を与える重要な要素となっています。その中でも特に、ページの読み込み速度はユーザーエクスペリエンスに大きな影響を与える要因です。ページの読み込みが遅いと、訪問者がサイトを離れてしまうリスクが高まり、結果として購入率やSEOランキングの低下につながる可能性があります。
本記事では、ウェブサイトのページ読み込み速度を向上させるための具体的な方法を11個とサイトスピードの重要性や確認方法を紹介します。
目次
ページの読み込み速度を改善する11の方法
1. スピードと安定性を兼ね備えたサーバーを使う
サーバーの性能もECサイトのパフォーマンスに大きな影響を与えます。処理能力やメモリが十分にあるサーバーは、ウェブページの伝達やキャッシュの保持などを効果的に行うことができるからです。
特にトラフィックが集中するブラックフライデーや年末年始セールなどでは、Amazon（アマゾン）をはじめ、多くのブランドがサイトのクラッシュを経験しています。ITICの調査によると、回答者の81%が1時間のダウンタイムで30万ドル以上の損失が発生すると回答しています。そのため、サーバーを契約する際は、セール時のスケーリング対応や急激なビジター増加に対するクラッシュ防止策がある会社を選択しましょう。
クラウドインフラを採用しているShopify Plusは99.98%の稼働率を誇り、他のSaaS型プラットフォームより2.97倍速い読み込み速度を実現しています。2023年のブラックフライデー・サイバーマンデーのピーク時には、Shopifyは1分間で420万ドルの売上を処理しました。
例えば、SweetLegs（スイートレッグス）は2016年のブラックフライデーに機能停止で大きな損失を被ったため、翌年のホリデーシーズンに備えてShopifyに乗り換えました。その結果、2017年のブラックフライデー・サイバーマンデーで11,000件の注文を処理し、翌年の売上は前年比で40%増加しました。このように、セールイベント前にインフラを見直すことでサービス体験や購入率の向上につなげることができます。
ビジネスを始めるにあたって、ホームページを作成する際には、サーバーの性能を確認することが重要です。
2. CDNを使う
CDNを使用することでサーバーへの負担を軽減し、アクセススピードの向上を図ることができます。大元のサーバーの代理として機能するキャッシュサーバーがアクセス要求に対応してくれるので、サーバーの負荷軽減が可能です。また、CDNの会社は世界各地に代理サーバーを配置しているので、ユーザーに最も近い代理サーバーで処理することができます。その結果、ユーザーとサーバーとの物理的な距離が短くなるのでサイトスピードを向上させることができます。
例えばShopifyでは、追加料金なしでFastly（ファストリー）による世界トップクラスのCDNを利用可能です。ユーザーが世界中のどこにいても、Shopifyストアがすぐに表示されます。
日本はもちろん、米国、英国、南アフリカ、オーストラリアとニュージーランドのAPACエリア、その他のアジア各国にも対応しているので、越境ECを検討している場合でも問題ありません。
3. タグマネジメントシステムでトラッキングを管理する
データ収集のためのJavaScriptタグにより、サイトのパフォーマンスが低下することがあります。この場合、タグマネジメントシステムでトラッキング管理をすることで、サイトスピードが改善される場合があります。
Googleタグマネージャーなどのタグマネジメントシステムを使用すると、すべてのタグを1つのJavaScriptリクエストにまとめられるので、タグエラーでサイトがダウンした場合でも迅速にタグを削除できます。
4. ポップアップウィンドウを控えめに使う
ポップアップウィンドウの使用を制限することで、不要なデータロードを減らし、サイトスピードを改善することができます。ポップアップウィンドウには多くのデータが含まれるため、パソコンの処理を増やし、サイトスピードの低下につながる可能性があるからです。
ポップアップウィンドウは、ユーザーがボタンを押したときに表示されるため、事前に商品情報や画像などの多くのデータをロードすることが一般的です。また、ポップアップを表示するためには、追加のHTTPやJavaScriptの処理が生じるため、ページの読み込み速度を遅くする要因となります。
クリックマッピングなどから使用履歴を確認し、「実際にはあまり使われていない」「使用する本質的な理由がない」と判断できた場合は削除するとよいでしょう。
5. 過度なループ処理を簡素化する
コーディングのループ処理（プログラムに継続的に同じ処理をさせること）を簡素化し、処理にかかる負荷を軽減させることで、サイトスピードを向上させることができます。ループの回数が多いと、それだけ処理に時間がかかるため、コードを簡素化することで処理時間を短縮できます。
例えば、大量の商品カタログがある場合、ループにかかる時間は長くなります。全商品の中から、ユーザーが指定した商品と一致する商品を抽出するには、膨大な処理が必要です。ページが段階的にロードされる場合でも、繰り返し処理が行われるので、負荷がかかってしまいます。
ループ処理が行われているページのコードを確認して、同じ情報を得るために複数のループが走っていないかどうかを確かめましょう。デベロッパーが共同でテーマに関わっていると、同じタスクが繰り返されていたり、コードが衝突していることがあります。これらの重複や矛盾の原因となっているコードやタスクを削除して、ページの読み込み時間を短縮しましょう。
6. 画像表示の必要性を整理する
トップページに表示している商品やサービスの紹介画像をカルーセル（横スライド）で表示している場合、サイトスピードを低下させてしまっている可能性があります。必要以上に大きなサイズの商品画像を使用すると、ブラウザがサムネイルに合わせて画像を縮小することになり、読み込み時間に影響が出てしまうためです。また、画像が商品ページから呼び出されて表示されている場合、その処理で遅れが生じることもあります。
画像をアップロードする前に、インターネットで画像を圧縮しておくとデータ処理の負荷を抑えることが可能です。また、スクリーン解像度に応じた適切な画像サイズを読み込むためのコードをHTMLに挿入することもできます。低解像度の画像を読み込み、ページのコンテンツをロードした後で、高解像度のバージョンを読み込むCDNを挿入する方法もあります。
また、明確なCTA（call to action）があれば、スライドを削除して1枚の画像に変更するのもよいでしょう。画像を表示する目的を整理し、その目的を達成できる質の高い画像を使えば、スライドで複数の画像を表示する必要はありません。
ただし、画像を使用して商品やサービスを視覚的に伝えることも重要です。サイトスピード対策と画像使用を両立させて、ユーザーの満足度を上げましょう。
7. アプリや追加機能を整理する
不必要なアプリをアンインストールすることで、サイトスピードが上がる場合があります。アプリがバックグラウンドで自動処理を行うことで、パソコンの処理に負荷がかかるので、使用するアプリを減らすことでサイトスピードの改善が見込めます。アプリを増やすことで読み込み速度が低下するデメリットと、アプリを使用することで得られるメリットを比べて、必要がないと判断したら削除しましょう。
8. 画像を圧縮＆サイズを縮小する
ウェブサイトで画像を使用する際は、画像を圧縮し、ウェブサイトの画面表示に問題なければ表示サイズも縮小しましょう。データ読み取りの負荷を軽減し、サイトスピード改善につなげることができます。
画像の質を維持したい場合は、ロスレス圧縮（元のデータを破損せず、完全に元通りに復元できるように圧縮する手法）により、画質を下げずに画像サイズを小さくできるので、圧縮による画像の解像度低下を心配する必要がありません。例えば、TinyJPGやTinyPNGなどの圧縮サイトを使うと、追加する画像のサイズを簡単に削減できます。
画像の効率的な管理と圧縮により、ウェブサイトの容量を減らし、サイトスピードの向上を図りましょう。
9. コードの全体量を減らす
コードの量を減らしてサーバーの負荷を軽減することで、読み込み速度を改善できます。サーバーにとって負荷の少ない、端的にまとめられたコードを書くことで、ユーザーへのデータ転送がスムーズになり、結果としてサイトスピードを高速化につながります。
例えば、JavaScriptやCSSのコード内の不要な改行やインデントを削除して、圧縮・軽量化するMinify（ミニファイ）が効果的です。動作には変化がないので、ウェブサイトに影響を与えずにコードの量を減らすことができます。デベロッパーがいる場合は、相談してコードの見直しと改善を依頼しましょう。コーディングの知識がない場合は、SCSS.liquidの自動処理を行っているShopifyの活用もご検討ください。
10. リダイレクトを減らして機能していないリンクを削除する
リダイレクトの原因となる、壊れているリンクが大量にあると、サイトの速度低下につながるので、必要のないリンクは削除しましょう。画像、CSS、JavaScriptファイルなどのページ要素の壊れたリンクは、HTTPリクエストを増やしてサイト速度を遅らせます。
例えば、掲載コンテンツのリライトが何年も放置されていると、壊れたリンクが多くなり、サイトスピードの低下の原因になります。作成したコンテンツの管理表を作成し、一定の期間が経ったら確認するなど、定期的なコンテンツの見直しを行いましょう。
11. ブラウザのキャッシュを利用する
ブラウザのキャッシュを利用することで、サイトスピードを速くすることができます。キャッシュは一度訪れたウェブサイトのデータを保存することで、毎回サーバーにアクセスすることなく、ウェブサイトを表示できる仕組みです。そのため、キャッシュを保存し、サーバーとやり取りする時間を短縮することで、読み込み速度の向上につながります。
ただし、頻繁に更新されるコンテンツでは、保存されていることで古い情報が表示される可能性があります。そのため、キャッシュには一定の保存期間を設けるとよいでしょう。
サイトスピードを改善する必要性
サイトスピードの改善は、検索順位の向上やさまざまなユーザー環境に対応し、ビジネスチャンスを得るために不可欠です。
読み込み速度が上がることでユーザーのストレスを軽減し、ウェブサイトからの離脱を防ぐことができます。その結果、サービスや商品を閲覧してもらう時間を増やすことができるため、読み込み速度が遅いことによるビジネスチャンスの損失を減らせます。
ある調査では、ページの読み込みに3秒以上かかると、約40%のユーザーがサイトを離れるという結果が出ています。読み込み速度が速いサイトでは、ユーザーの離脱率が低く、訪問者がサイト上で操作を続ける可能性が高くなるので、結果として売上や問い合わせの増加につながります。
さらに、SEO対策おいても、サイトスピードは重要な役割を果たします。Googleは、読み込み速度が著しく遅い場合は、検索順位を下げる可能性があると発表しています。
モバイルデバイスの普及に伴い、モバイルユーザーにとってのページスピードも一層重要になっています。特にスマートフォンの場合、使用者の環境や契約している携帯会社の通信状況によって読み込み速度が変わるため、できるだけサイトスピードを高速化しておくことで離脱を最小限に抑えることができます。
サイトスピードの確認方法
サイトスピードは、インターネットにある無料のツールを使用して簡単に測定できます。ここでは、Google（グーグル）が提供しているPageSpeed Insightsで確認する方法をご紹介します。
PageSpeed Insightsを開く
まず、PageSpeed Insightsのウェブページを開きます。Googleのアカウントを持っていなくても利用可能です。
URLを入力する
入力ボックスに調べたいウェブサイトのリンクを貼り付けます（赤い矢印）。入力が終了したら、その横にある分析ボタン（緑色の矢印）をクリックすると、サイトスピードの分析が始まります。
データを確認する
分析が正常に完了すると、以下のような画面が表示されます。下にスクロールして、分析結果の詳細を確認できます。
データは海外から計測されるため、4G通信を前提としているモバイルのスコアは低くなりやすい傾向があります。最初の段階として、モバイル端末では40、デスクトップでは50を目標に改善を行っていきましょう。
サイトスピードの改善におすすめの測定ツール
PageSpeed Insights
PageSpeed Insightsは、Googleが提供するウェブサイトのパフォーマンス評価ツールです。Googleのアカウントを持っていなくても、無料で利用できます。数値によって大きく3段階で評価を分類し、ページの読み込み速度、インタラクティブ性、視覚安定性などの観点から、詳細な改善ポイントを実際のコードとともに提示してくれます。
GTmetrix
GTMetrixは2009年にカナダに本社を置く企業によって開発された、顧客向けサイトのパフォーマンスを判定するためのツールです。サイトスピードをA～Fの6段階で評価します。YslowとPageSpeed Insightsの両方のデータを統合して、次の内容を含む、ウェブサイトパフォーマンスを分析します。
- ページの読み込み速度
- Googleが提供しているWeb VitalsとLighthouseの分析
- ウェブサイト速度の最適化の方法
- リクエストと合計バイトサイズによるページ構成の内訳
GTmetrixは、複数の分析ツールから複合的にデータを検証したい場合に有用なツールです。
WebPageTest
WebPageTestは、ニューヨークに本社を置く企業が開発した、世界中のさまざまな場所からの模擬テストが可能な分析ツールです。複数の場所だけでなく、ブラウザやデバイス別にテストを実行できるため、さまざまなシチュエーションを想定した分析が可能です。分析したいユーザーの居住地が複数にまたがる場合に特に有益です。
サイトスピード改善のポイント
原因究明を行う
サイトスピードを改善するにあたっては、最初にサイトスピードが遅くなっている原因を究明することが重要です。原因究明を行うことで、ウェブサイトの改善点を特定し、それに合わせた効果的な対策を取ることができます。
改善点を特定するにあたっては、先ほど紹介した測定ツールがおすすめです。測定ツールの数値を元に、ウェブサイトの運用者や開発者と相談して、コード処理やコンテンツの内容など、具体的な改善方法を決めていくとよいでしょう。
対策の優先順位を決める
原因究明と同時に、実施する対策の優先順位を決めることも重要です。効果がありそうな方法から順番に進めていくことで、問題解決に必要なステップを最小に抑えながら、効果的に改善を図ることができます。やみくもに対策を行っても、そのウェブサイトに相応しいとは限らないので、原因に応じた方法から順番に進めていくといいでしょう。
どの程度のサイトスピードの改善が見込めるのか、専門家への依頼が必要か、予算や時間はどのくらい必要か、などを複合的に考慮し、優先順位をつけましょう。
まとめ
本記事では、サイトスピードを改善するための具体的な方法を11個紹介しました。画像の最適化やキャッシュの利用、不要なアプリの削除、CDNの活用、リダイレクトの削減などの対策を実践することで、ウェブサイトのパフォーマンス、ひいてはユーザーエクスペリエンスを向上させることができます。
ECサイトやウェブサイトの読み込み速度でお悩みの場合は、サイトスピード改善に加えて、SEO対策も同時にできるShopifyをご活用ください。
続きを読む
よくある質問
ページの速度がEコマースに及ぼす影響とは？
ページの読み込み速度は、売上にも影響を与えます。Googleによると、サイトスピードを1秒改善することで、モバイルのコンバージョンが最大で27%増加することが明らかになっています。
ページの速度が検索ランキングに及ぼす影響とは？
著しく読み込みが遅いページはオーガニックのランキングにも悪影響を及ぼします。Googleは、ユーザーがかなり遅いと感じるようなページはランキングが下がる可能性があると発表しています。
ECサイトのページ速度を改善する方法は？
スピードと安定性を兼ね備えたサーバーを使うことや、CDNを使うことなどさまざまな方法が考えられます。
Shopifyはスピードと安定性を兼ね備えたホスティングサービスですか？
はい、クラウドベースのインフラにより、Shopify Plusの稼働率は99.98%を誇ります。また、Shopifyストアの読み込み速度は、他のSaaSプラットフォームより2.97倍早いという強みがあります。
ShopifyはどこのCDNサービスを使っていますか？
Shopifyでは、追加料金なしで利用できるFastlyによるワールドクラスのCDNを採用しています。ユーザーが世界のどこにいても、Shopifyストアはすぐに表示されます。
PageSpeed Insightsで目安とすべきスコア・表示速度は？
モバイル端末とデスクトップでは通信環境が異なるため、モバイル端末では40、デスクトップでは50を目標に改善を行いましょう。
文：Ryotetsu
