サイトスピード改善：ページの読み込み速度を改善する11個の方法

今日のデジタル社会では、ウェブサイトのパフォーマンスがビジネスの成功に影響を与える重要な要素となっています。その中でも特に、ページの読み込み速度はユーザーエクスペリエンスに大きな影響を与える要因です。ページの読み込みが遅いと、訪問者がサイトを離れてしまうリスクが高まり、結果としてコンバージョン率やSEOランキングの低下につながる可能性があります。本記事では、ウェブサイトのページ読み込み速度を向上させるための具体的な方法を11個紹介します。これらの方法を実践することで、ユーザーエクスペリエンスを向上させ、ビジネスの成功につなげましょう。

ページの読み込み速度を改善する11個の方法

1. スピードと安定性を兼ね備えたサーバーを使う

ユーザーのネットワーク環境によってページの読み込み速度は変わりますが、サーバーの性能もECサイトのパフォーマンスに大きな影響を与えます。処理能力やメモリが十分にあるサーバーは、ウェブページの伝達やキャッシュの保持などを効果的に行うことができるからです。

特にトラフィックが集中するブラックフライデーや年末年始セールなどでは、Lululemon（ルルレモン）や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（Content Delivery Network）を使用することでサーバーへの負担を軽減し、アクセススピードの向上を図ることができます。大元のサーバーの代理として機能するキャッシュサーバーがアクセス要求に対応してくれるので、サーバーの負荷軽減が可能です。また、CDNの会社は世界各地に代理サーバーを配置しているので、ユーザーに最も近い代理サーバーで処理することができます。その結果、ユーザーとサーバーとの物理的な距離が短くなるのでサイトスピードを向上させることができます。

例えばShopifyでは、追加料金なしでFastly（ファストリー）による世界トップクラスのCDNを利用可能です。ユーザーが世界中のどこにいても、Shopifyストアがすぐに表示されます。日本はもちろん、米国、英国、南アフリカ、オーストラリアとニュージーランドのAPACエリア、その他のアジア各国にも対応しているので、越境ECを検討している場合でも問題ありません。Shopify PlusのCDNでホスティングを始めてから、年間で約10万ドルを削減できたというオーナーもいます。サーバーの負担削減やウェブサイトの運用コストの削減にもつながるので、サイトスピードに問題がある場合は、CDNの使用を検討しましょう。

3. タグマネジメントシステムでトラッキングを管理する

データ収集のためのJavaScriptタグにより、サイトのパフォーマンスが低下することがあります。この場合、タグマネジメントシステムでトラッキング管理をすることで、サイトスピードが改善される場合があります。Googleタグマネージャーなどのタグマネジメントシステムを使用すると、すべてのタグを1つのJavaScriptリクエストにまとめられるので、タグエラーでサイトがダウンした場合でも迅速にタグを削除できます。

例えば、Shopify Plusストアでは、1つのコードスニペットでGoogleタグマネージャーを使用してタグを一括管理できます。詳しくは、Shopifyヘルプセンターのガイドラインをご覧ください。

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. ブラウザのキャッシュを利用する

ブラウザのキャッシュを利用することで、サイトスピードを速くすることができます。キャッシュは一度訪れたウェブサイトのデータを保存することで、毎回サーバーにアクセスすることなく、ウェブサイトを表示できる仕組みです。そのため、キャッシュを保存し、サーバーとやり取りする時間を短縮することで、読み込み速度の向上につながります。

ただし、頻繁に更新されるコンテンツでは、保存されていることで古い情報が表示される可能性があります。例えば、30分前にウェブサイトで確認した車の混雑状況を更新せず、画面の戻るボタンで再確認して高速道路に入ったら、実は渋滞が発生していた、ということが起きてしまいます。そのため、キャッシュには一定の保存期間を設けるとよいでしょう。

サイトスピードを改善する必要性

サイトスピードの改善は、ユーザーエクスペリエンスの向上やSEOの最適化に直結する重要な要素です。読み込み速度が上がることでユーザーのストレスを軽減し、ウェブサイトからの離脱を防ぐことができます。その結果、サービスや商品を閲覧してもらう時間を増やすことができるため、読み込み速度が遅いことによるビジネスチャンスの損失を減らせます。

ある調査では、ページの読み込みに3秒以上かかると、約40%のユーザーがサイトを離れるという結果が出ています。読み込み速度が速いサイトでは、ユーザーの離脱率が低く、訪問者がサイト上で操作を続ける可能性が高くなるので、結果として売上や問い合わせの増加につながります。

さらに、SEO（Search Engine Optimization）においても、サイトスピードは重要な役割を果たします。Googleは、読み込み速度が著しく遅い場合は、検索順位を下げる可能性があると発表しています。また、読み込み速度が遅いと、紹介するウェブサイトとして適さないと判断され、被リンクとして使用してもらう機会が減ってしまうかもしれません。

モバイルデバイスの普及に伴い、モバイルユーザーにとってのページスピードも一層重要になっています。特にスマートフォンの場合、使用者の環境や契約している携帯会社の通信状況によって読み込み速度が変わるため、できるだけサイトスピードを高速化しておくことで離脱を最小限に抑えることができます。

サイトスピードの改善は、検索順位の向上やさまざまなユーザー環境に対応し、ビジネスチャンスを得るために不可欠です。

サイトスピードの確認方法

サイトスピードは、インターネットにある無料のツールを使用して簡単に測定できます。ここでは、Google（グーグル）が提供しているPageSpeed Insightsで確認する方法をご紹介します。

PageSpeed Insightsを開く

まず、PageSpeed Insightsのウェブページを開きます。Googleのアカウントを持っていなくても利用可能です。

URLを入力する

入力ボックスに調べたいウェブサイトのリンクを貼り付けます（赤い矢印）。入力が終了したら、その横にある分析ボタン（緑色の矢印）をクリックすると、サイトスピードの分析が始まります。

データを確認する

分析が正常に完了すると、以下のような画面が表示されます。下にスクロールして、分析結果の詳細を確認できます。

データは海外から計測されるため、4G通信を前提としているモバイルのスコアは低くなりやすい傾向があります。最初の段階として、モバイル端末では40、デスクトップでは50を目標に改善を行っていきましょう。

サイトスピードの改善におすすめの測定ツール

PageSpeed Insights

PageSpeed Insightsは、Googleが提供するウェブサイトのパフォーマンス評価ツールです。Googleのアカウントを持っていなくても、無料で利用できます。数値によって大きく3段階で評価を分類し、ページの読み込み速度、インタラクティブ性、視覚安定性などの観点から、詳細な改善ポイントを実際のコードとともに提示してくれます。SEOの改善案も提示してくれるので、ウェブサイトを運用している人は一度試してみてください。

GTmetrix

GTMetrixは2009年にカナダに本社を置く企業によって開発された、顧客向けサイトのパフォーマンスを判定するためのツールです。サイトスピードをA～Fの6段階で評価します。YslowとPageSpeed Insightsの両方のデータを統合して、次の内容を含む、ウェブサイトパフォーマンスを分析します。

• ページの読み込み速度
• Googleが提供しているWeb VitalsとLighthouseの分析
• ウェブサイト速度の最適化の方法
• リクエストと合計バイトサイズによるページ構成の内訳

GTmetrixは、複数の分析ツールから複合的にデータを検証したい場合に有用なツールです。

WebPageTest

WebPageTestは、ニューヨークに本社を置く企業が開発した、世界中のさまざまな場所からの模擬テストが可能な分析ツールです。複数の場所だけでなく、ブラウザやデバイス別にテストを実行できるため、さまざまなシチュエーションを想定した分析が可能です。分析したいユーザーの居住地が複数にまたがる場合に特に有益です。

サイトスピード改善のポイント

原因究明を行う

サイトスピードを改善するにあたっては、最初にサイトスピードが遅くなっている原因を究明することが重要です。原因究明を行うことで、ウェブサイトの改善点を特定し、それに合わせた効果的な対策を取ることができます。

改善点を特定するにあたっては、先ほど紹介した測定ツールがおすすめです。測定ツールの数値を元に、ウェブサイトの運用者や開発者と相談して、コード処理やコンテンツの内容など、具体的な改善方法を決めていくとよいでしょう。

対策の優先順位を決める

原因究明と同時に、実施する対策の優先順位を決めることも重要です。効果がありそうな方法から順番に進めていくことで、問題解決に必要なステップを最小に抑えながら、効果的に改善を図ることができます。やみくもに対策を行っても、そのウェブサイトに相応しいとは限らないので、原因に応じた方法から順番に進めていくといいでしょう。どの程度のサイトスピードの改善が見込めるのか、専門家への依頼が必要か、予算や時間はどのくらい必要か、などを複合的に考慮し、優先順位をつけましょう。

まとめ

本記事では、サイトスピードを改善するための具体的な方法を11個紹介しました。画像の最適化やキャッシュの利用、不要なアプリの削除、CDNの活用、リダイレクトの削減などの対策を実践することで、ウェブサイトのパフォーマンス、ひいてはユーザーエクスペリエンスを向上させることができます。

ECサイトやウェブサイトの読み込み速度でお悩みの場合は、サイトスピード改善に加えて、SEO対策も同時にできるShopifyをご活用ください。

文：Ryotetsu