表示速度を改善：サイトパフォーマンスの重要性
飛行機のチケット購入やディナーの予約など、オンラインで大事な買い物をしようとしたときにページが止まってしまった… そんな経験をしたことありませんか？決済ページでサイトが固まってしまうと、せっかく貴重なチケットを予約しようとしたのに、購入できなかったり、「決済はちゃんと完了したのか」「二重に請求にならないか」など、最悪の事態を想定して焦ってしまいますよね。
このハラハラを体験された方なら、ホームページを作成するにあたってパフォーマンスがどれだけ重要かお分かりいただけるでしょう。この、サイトパフォーマンスとはなんなのか、どうやって分析し改善するのかとを解説します。
サイトパフォーマンスの定義
Web サイトのパフォーマンスとは、デバイスの種類を問わず、ユーザーのブラウザでページが読み込まれ、表示されるまでの時間を測定するもので、サイトのインタラクティブ性とユーザビリティ全体に影響を及ぼします。簡単に言えば、Web サイトの読み込み時間と表示速度が速ければ速いほど、「パフォーマンス」が優れているということになります。
サイトのパフォーマンスを決める主な要素はサーバーやプラットフォームのインフラですが、意図せずにサイトにコンテンツや画像を過剰に掲載してしまうなど、その他の要因もパフォーマンスに影響を与える可能性があります。この記事では、Web サイトのパフォーマンスの基本事項を説明するとともに、パフォーマンスを監視、サポート、改善するためにできることをご紹介します。
サイトパフォーマンス向上のヒント：Wix で作成したサイトのパフォーマンスがこれまで以上に向上しました。継続的なコードの最適化、画像の WebP フォーマットへの自動変換など、Wix では常にサイトのインフラを強化し、デバイスやアクセス地域に関わらず表示速度を高速化することに成功しています。
サイトパフォーマンスが重要である理由
業界やニッチに関係なく、サイトのパフォーマンスはオンラインビジネスで成功するための重要な基盤です。多くの場合、最初のパフォーマンスが良ければ、訪問者はあなたのサイトにリピート訪問し、商品やサービスを購入してくれる可能性が高くなります。しかし、閲覧中にサイトがフリーズしたり、コンテンツの表示速度が1秒でも遅れたりすると、そのサイトにまた訪問しようとは思わないでしょう。こうなると、サイトだけでなく、あなたのブランドに対する世間の評価にも長期的な影響が及ぶ可能性があります。良いサイトパフォーマンスのサイトを作るためにも、ホームページの作り方の記事を参考に最適な作成方法を選びましょう。
Contentsquare（コンテントスクエア）社のシニアソリューションエキスパートである Niya Noneva さんは、同社が発表した2022年版のデジタルエクスペリエンス・ベンチマークレポートで次のように述べています。
「世界中の人々がオンライン会議疲れに悩まされ、画面に向かう時間を短縮しようとしている現状では、1秒1秒のユーザーの注意とエンゲージメントが貴重です。読み込み時間が遅いというのは、忙しく注意力散漫な現代のユーザーにとっては我慢ならないものです。ユーザーは、価値あるウェブサイトエクスペリエンスを期待しています。」
それでは、サイトパフォーマンスがなぜこれほどまで重要なのかについて少し掘り下げて見ていきましょう。大きな理由のひとつは、サイトのパフォーマンスが以下のような要素に影響を与えるからです。
ユーザーエクスペリエンス
サイトを作成する際には、そのデザインがパフォーマンスにどのような影響を与えるかを考慮する必要があります。見た目は美しくても、サイトの表示速度が遅かったり、動きが不規則だったり、反応が遅かったりすると、訪問者は焦り、不満を感じて閲覧をやめてしまう可能性があります。いくら良いデザインでも、サイトのユーザーエクスペリエンス（UX）を犠牲にしてしまっては本末転倒です。
オンラインビジネスで成功を掴むためには、Web サイトのパフォーマンスを考慮したユーザーエクスペリエンスを提供することを第一に考える必要があるのです。
直帰率 / 顧客維持（リテンション）
サイト訪問者は、極めて短時間であなたのサイトの第一印象を判断します。もちろん、パフォーマンスもその判断材料のひとつです。直帰率とは、Web サイトにアクセスした訪問者のうち、最初の1ページしか閲覧しなかった、あるいはリンクをクリックすることなく離脱した訪問者の割合を示す指標です。Google によると、ページの表示が 1 秒遅れると、コンバージョンが最大 20% 減少するそうです。
コンバージョン率
表示速度が高速で動きも滑らかなサイトの場合、訪問者は優れたユーザーエクスペリエンスを得られるため、サイトに長時間滞在していくつかのリンクやボタンをクリックしてくれる可能性が高まります。また、その体験がきっかけでサイトをリピート訪問し、商品を購入したり、サービスを依頼したりすることもあるかもしれません。Cloudflare の記事では、「Web ページの読み込みが速くなればなるほど、ユーザーはその Web ページでターゲットアクションを実行する可能性が高くなる」 と発表されています。
しかし、Portent による2019年の調査（英語）では、ページ読み込みの最初の5秒間がコンバージョン率に最も大きな影響を与えることが分かっています。たった1秒の遅れでも、コンバージョンは4.42%（英語） 減少してしまうと言われています。
ブランド認知
Web サイトのパフォーマンスと全体の外観を常にチェックしておくことで、サイトを通じて顧客に優れた体験を提供し、商品やサービスの購入を楽しんでもらいたいという思いをアピールすることができます。サイトのパフォーマンスが低く、顧客が一度でも悪い体験をしてしまうと、ブランドの信頼や全体的なブランド認知に影響を与えかねません。
これについて、例を挙げて考えてみましょう。ある著名人が、あなたの会社のブランドのスウェットを着て Instagram ストーリーを投稿したとします。また、別のマイクロインフルエンサーは同じ商品ページへのリンクを投稿し、主に Z 世代の消費者に対して、そのブランドのスウェットが販売中で、今ならセール中であることを CTA（行動喚起）ボタンで知らせました。これを見た何千人もの購買意欲の高い訪問者が、あなたの会社のサイトを訪問して自発的に商品を購入しようとしますが、商品ページの表示速度が遅いことに気づきます。こうした衝動的な Z 世代購買客の行動には特徴があり、IBM による調査では 60% が「動きの遅いアプリやサイトは利用しない」傾向にあるため、サイトの表示速度が遅いとすぐに離脱してしまう可能性が高いといえます。
そして、そのダメージはそれだけにとどまらない場合だってあります。Z 世代のユーザーはあなたのサイトの動作に失望してしまい、それが長引くとブランドイメージにも影響が及びます。上記の IBM の調査でも、「ジェネレーション Z が示すこれらの期待に応えることができない企業は、急速に支持を失い、そのポジションを競合他社に明け渡すことになるだろう」と結論づけられています。
モバイルファースト方針
米国での調査で、スマホユーザーは1日に平均344回（英語）、つまり4分に1回のペースで携帯をチェックしていることがわかりました。そのため、Web トラフィック全体の57.84%（英語）がモバイル端末からのアクセスで占められているのも納得です。モバイルで閲覧されることを前提とした「モバイルファースト」の考え方を踏襲し、表示速度が高速かつパフォーマンスが高いサイトを作ることは、優れたユーザーエクスペリエンスを確保する上で非常に重要な要素だといえます。モバイルユーザーは通勤中やコーヒーの出来上がりを待つ間にサイトを閲覧することが多いため、さまざまなことを同時並行で進めていく中で快適なブラウジングができるかどうかはサイトの表示速度にかかっています。
また、別の調査（英語）によると、小売サイトの場合、モバイルサイトの速度が0.1秒向上するとコンバージョン率が8.4％向上することが分かっています。あなたのサイトがモバイルフレンドリーかどうかは、この簡単なテストで確認することができます。
SEO（検索エンジン最適化）
パフォーマンスは、Web サイトにおけるユーザーの体験に影響を与えるだけでなく、訪問者がどうやって最初にあなたのサイトを見つけるかという点にも関連します。
Google のコアウェブバイタル（以下で詳しく説明します）は、Google のページエクスペリエンス（Web ページのユーザー体験を測定する一連の指標）の一部であり、検索結果画面（SERP）でのサイトの表示方法に影響します。
しかし、検索順位の決定においてコアウェブバイタルが常に重要視されるわけではありません。
Google のサーチアドボケイトである John Mueller さんは、「（コアウェブバイタルよりも）関連性の方がランキング要因としては重要」だと述べています。
「ページエクスペリエンスは、ページの検索順位付けに使用される多くのシグナルの1つに過ぎません。検索クエリの意図は依然として非常に強いシグナルであるため、エクスペリエンスが劣るページでも、優れた関連コンテンツがあれば上位にランクインする可能性があります」
たとえば、ある検索クエリであなたのビジネスサイトが競合他社と並んで検索結果画面に表示された場合、パフォーマンスが優れている方のサイトが上位に表示される可能性があります。
パフォーマンス指標
サイトのパフォーマンスは、訪問者がサイトにアクセスしたときの表示速度の速さ、ユーザーとのインタラクションに対する反応の速さ、アニメーションなどのメディア動作の円滑さなど、さまざまなスピード・品質テストによって測定されます。これらのテストは、特定の環境下でシミュレーションを行うラボ内、またはフィールド（実際のユーザー体験と測定値を使用）のいずれかで行われます。
サイトパフォーマンスについて非常に多くのツールや測定基準がある中で、サイトが最低限満たすべき最も重要な測定基準を定めた業界標準という位置づけで発表されたのが Google のコアウェブバイタル（CWV）です。CWV はサイトのパフォーマンスを測定するための重要な指標ですが、パフォーマンスに影響する「唯一の」指標ではないためその点は注意しておきましょう。
コアウェブバイタル（CWV）
コアウェブバイタルは、ページの表示速度、インタラクティブ性、コンテンツの視覚的な安定性といった3つのシグナルを測定するものです。
Largest Contentful Paint（LCP）：ページ上の最大の画像またはテキストブロックのレンダリングにかかる時間を測定します。
Cumulative Layout Shift（CLS）：ページのライフスパン全体におけるコンテンツレイアウトのずれを測定します。レイアウトのずれは、ページの読み込み中に視覚的要素の位置が変化したときに発生します。
First Input Delay（FID）：ユーザーが最初にページとインタラクションを行ったとき（リンクやボタンをクリックするなど）から、ブラウザがそのインタラクションを実際に処理するまでの時間を測定します。
サイトパフォーマンス向上のヒント：モバイルと PC におけるスコアの違いなど、コアウェブバイタルと Wix サイトのパフォーマンスについて詳しくはこちらをご覧ください。
ページの表示速度に関する指標
Google は「ほとんどのユーザー（75％）が、UX に関するニーズの中でもスピードを最も重要視している」として、ページの表示速度の重要性を強調しました。
ページの表示速度とは Web ページのコンテンツの読み込みにかかる時間のことを指し、次のような方法で測定することができます。
Speed Index（SI）：ページの読み込み中にコンテンツがどれだけ速く表示されるかを表します。
First Contentful Paint（FCP）：ページの読み込みを開始してから、ページのコンテンツ（テキスト、画像、その他のグラフィック要素）の一部が画面上に表示されるまでの時間を測定します。
Time to Interactive（TTI）：ユーザーがページにアクセスしてから、完全にインタラクティブな状態になるまでの時間（ユーザーがボタンをクリックするなど、サイト上で操作ができるようになるまでの時間）を測定します。
Total Blocking Time （TBT）：Web ページがブロックされ、ユーザーがページの操作を行うことができなかった時間の総計を測定します。
Time to First Byte（TTFB）：ブラウザがページの表示をリクエストしてから、サーバーから最初のバイトの情報を受け取るまでの時間を測定します。
サイトパフォーマンスに影響を与える要素
ここからは、サイトのパフォーマンスを最適化するために考慮すべき要素を詳しく見ていきましょう。
HTTP リクエスト
HTTP（ハイパーテキスト転送プロトコル）リクエストは、Web ブラウザと Web サーバーの通信方法を構成するものです。ブラウザに URL を入力すると、ブラウザは Web ページのホストサーバーに対してそのページに含まれる各ファイルを送るようリクエストします。一般的に、Web ページが複雑であればあるほど、サイト全体を読み込むために必要な HTTP リクエストが多くなり、表示速度は低下します。
また、HTTP リクエストの数が少ないほど、サイトのパフォーマンスは向上します。HTTP リクエストの数は、画像、JavaScript、CSS ファイル、サードパーティーツールの種類などに応じて異なります。
ページの重さ
リクエストの数に加えて、実際にリクエストされるコンテンツもサイトのパフォーマンスに影響します。ページの重さ（ページサイズ）とは、Web ページのファイル容量（ページに含まれる HTML、画像、その他のメディア、JavaScript、CSS、サードパーティーリソースなど）を指します。サイトが重いほど、ページで読み込む必要のあるパーツやアセットが多くなり、ページのパフォーマンスが低下します。
画像のサイズ：画像はホームページのデザインにおいて重要な役割を果たします。ブランドメッセージを伝える、訪問者を惹きつける、ブログなどのコンテンツを視覚的に充実させるといったことに加えて、さらには CTA（行動喚起）として機能することもあります。しかし、画像はプレーンテキストの HTML ファイルよりも重く、読み込みに時間がかかるため、Web サイトのパフォーマンスに大きな影響を与える可能性があります。
最高のサイトパフォーマンスを実現するためには、すべての画像がサイト上で戦略的な役割を果たすよう最適化されている必要があります。画像の最適化とは、品質を落とさずに、画像を可能な限り小さなファイルサイズに変換することを指します。Wix の画像サイズ変更ツールなどを使えば、画像を思い通りのサイズに調整することができます。
画像をリサイズしたら、ダウンロード形式を選択します。画像のフォーマットは通常 JPG、PNG、GIF のいずれかとなります。パフォーマンスを考慮するなら一番のおすすめは JPG です。JPG 画像は PNG 画像に比べて最大で10倍小さく、その結果として読み込みが非常に速くなります。GIF はファイルサイズが大きくなりがちで表示に時間がかかるため、避けたほうが無難です。どうしても GIF を使いたいという場合は代わりに動画ファイルを使用しましょう。動画はファイルサイズが小さく、ファイルが完全にダウンロードされる前でも表示されるので、サイトのパフォーマンス向上に最適です。
サイトパフォーマンス向上のヒント：Wix サイトに追加された画像はすべて自動的に最適化され、最新の画像形式（WebP など）に変換されるため、高速ダウンロードと高画質を維持しながらサイトのパフォーマンスを向上できます。また、Wix はパフォーマンスを最適化するために「遅延読み込み」を使用しています。遅延読み込みとは、ユーザーがページを開いた時にはファーストビュー（スクロールせずに表示される部分）のコンテンツのみを表示し、その間にページの他の部分を読み込む技術です。
ファイルサイズ：ファイルサイズが小さいほど、送信やダウンロードも高速になります。サイトのパフォーマンスを向上させるために、ファイルは通常 Web サーバーで「圧縮」されます。情報の量と質を維持しながら、可能な限りサイズを縮小した状態でブラウザに送信されてレンダリングされます。
サイトパフォーマンス向上のヒント：Wix は、Brotli または gzip などの圧縮プログラムを使用してすべてのファイルを自動的に圧縮し、より速く、より効率的なダウンロードを実現します。
Web ホスティング
Web ホスティングとは、ユーザーのブラウザにサイトのファイルを提供するための仕組みのことです。ホスティングサービスの品質や内容によってサイトの容量、アクセス数、拡張性などが異なるため、サイトのパフォーマンスにも影響が及ぶ可能性があります。
サイトパフォーマンス向上のヒント：Wix で作成されたサイトでは、Wix が提供するホスティングサービスをご利用いただけます。世界中の複数の場所に配置されたサーバー群で構成される CDN によってサイトをホストし、自動的にコンテンツの配信とキャッシュを行うことでサーバー応答時間、特に（コアウェブバイタル指標の）Time To First Byte（TTFB）の高速化を実現しています。
キャッシュ処理
キャッシュとは、HTTP リクエストとレスポンスのサイクルを回避するために、データを（サーバー上またはブラウザ経由で）保存し、将来的により簡単に取得できるようにするプロセスです。
たとえば、古着屋で見つけた商品を販売するネットショップの場合、ロゴのような特定のアセットはすべてのページの同じ場所に表示されることになります。キャッシュ処理をしなければ、ユーザーが新しい商品ページをクリックするたびにページ上でロゴをダウンロードする必要があります。Wix で作成されたサイトはすべて、全ページに自動キャッシングを導入しています。
地理的位置
インターネットはどこにでも存在するように感じられるかもしれませんが、これは Web サイトを機能させるための物理的なインフラが世界中に存在しているためです。HTTP リクエストが送信されるとブラウザからサーバーに信号が送られ、それに対してサーバーからブラウザに情報が送られます。サーバーとブラウザの間をデータが物理的に移動する距離が長ければ長いほど、リクエストとレスポンスサイクルが完了するまでの時間が長くなります。
たとえば、東京にあるサーバーでホストされている Web サイトは、同じ東京からのブラウザのリクエストに対してより優れたパフォーマンスを発揮します。これは、アメリカからのリクエストよりも、地域的に近い東京からのリクエストの方がサーバーの応答が速いためです。
データの移動距離を短縮するために、ホスティングプロバイダーは世界各地にサーバー（プロキシサーバーと呼ばれます）を戦略的に配置し、自社の CDN（コンテンツ・デリバリ・ネットワーク）を拡大しています。これらのサーバーは、Web ページ、画像、動画のキャッシュをホストし、最も近い場所にあるブラウザからのリクエストにすばやく対応します。
サイトパフォーマンス向上のヒント：Wix はすべてのサイトを世界中に分散配置された CDN とデータセンターでホスティングしています。さらに、サーバーサイドキャッシングを自動的に有効にして、CDN にデータをシームレスに保存することで、アクセス地域に関わらず、迅速かつ効率的にコンテンツを配信できるような体制を整えています。
ブラウザプラグイン、拡張機能、サードパーティーアプリケーション
サードパーティーのアドオンとは、別のサーバーに保存されているデータにアクセスすることで、Web サイトに追加機能を提供するツールのことです。これらのアドオンは、対象となるサーバーへの追加の HTTP リクエストを必要とするため、多くの場合読み込みに時間がかかります。パフォーマンスの最適化を目指すなら、アドオンはユーザーエクスペリエンスに大きく貢献するもののみに限定して使用することをお勧めします。
URL リダイレクト
リダイレクトとは、Web サイトの訪問者や検索エンジンを、最初にリクエストしたページとは異なる URL に転送する機能です。これは、別のページへのリダイレクトが設定された特定のページ URL に対してブラウザがサーバーに HTTP リクエストを送信したときに有効となります。サーバーはブラウザのリクエストに対して新しいページの URL で応答し、ブラウザはその URL に対する新しいリクエストを送信します。ただし、リダイレクトは追加の HTTP リクエストを伴うため、ページのパフォーマンスに悪影響を及ぼす可能性があります。複数のリダイレクトリクエストを行うとブラウザのリソースに大きな負担がかかり、最終的にページの表示速度を低下させてしまいます。
ビジネスの成長とオンラインコンテンツの変化に伴い、リダイレクトを使用して Web サイト内の遷移フローを変更していかなければならない場合があるかもしれません。たとえば、同じトピックを扱う複数のブログ記事を作成していたが、トピッククラスターモデルに基づいてそれらを1つの戦略的な記事に統合したいとします。リダイレクトは SEO のために避けられない（むしろ必要となる）場合が多いですが、良いパフォーマンスを確保するためにはできるだけわかりやすくリダイレクトを設定することをお勧めします。
サイトパフォーマンス向上のヒント：ボットログレポートを使用して問題 / エラーコードを定義するか、Deepcrawl アプリ（有料）を使用して、Wix リダイレクトマネージャーを使用してリダイレクトを設定します（ダッシュボードを開き、SEO ツール > リダイレクトマネージャーの順にクリックします）。
サイトパフォーマンスを確認するためのコツ
サイトパフォーマンスを確認するために、まずはテストを行いましょう。
サイトパフォーマンス向上のヒント：Wix のサイト速度ダッシュボードを使用すると、サイトの TTI（操作可能になるまでの時間）を確認したり、PC とモバイルのサイトパフォーマンスをテスト、分析、最適化することができます。また、ページごとの読み込み速度を監視し、競合との比較や、全体的なユーザーエクスペリエンスを向上させるための実用的なヒントを学ぶことができます。
テストを始める前に、以下のことを確認しておきましょう。
データソースの種類：フィールドデータ、またはリアルユーザーモニタリング（RUM）データは、実際に訪問したユーザーのデータから構成されるもので、ユーザーのデバイス、ネットワーク、場所の実際の状態を反映するため最も正確なパフォーマンスを測定することができます。
しかし、すべてのサイトがこのフィールドデータを取得するのに十分なトラフィックを持っているわけではないため、データが足りない場合は代わりにラボデータを使用できます。ラボデータはフィールドデータとは異なり、シミュレーションされた環境から得られるものです。モバイルの場合、特にローエンドのデバイスと理想的でないネットワーク条件下でのシミュレーションテストとなるため、必ずしも現実のユーザーエクスペリエンスと一致するとは限りません（測定結果が 100% 正確でない場合があります）。
正確性には欠けるものの、デザインの変更が Web サイトのパフォーマンスにどのような影響を与えるかを確認する場合にはラボデータが便利です。例えば、新しいギャラリーをサイトに埋め込むことを検討しており、ギャラリーの追加がサイトのパフォーマンスに大きな影響を与えるかどうかを公開前に確認したいとします。公開前のサイトではフィールド（RUM）の結果を得ることができないので、ラボデータを使用して、PC とモバイルでの標準的なユーザーエクスペリエンスを検証し、理論上のパフォーマンス低下がみられるかどうかの結果をすぐに得ることができます。
キャッシュの影響：ラボテストの場合、結果はブラウザを更新するたびに変化します。最も正確で信頼できる結果を得るには、各テストで3～5回更新し、平均値を参照することをお勧めします。
テストの種類により結果が異なる場合：実施するテストの種類によって、測定結果とパフォーマンススコアもそれぞれ異なります。また、URL 分析では、PC 用とモバイル用の2種類のレポートが生成されますが、PC とモバイルでは処理能力、ネットワーク状況、Web サイトのコンテンツなどが異なる場合があるため、それに応じてパフォーマンステストの結果が異なる場合があります。正確な結果を得るためには、1～3回テストを行う必要があります。それぞれのテストの詳細とデータの出所をきちんと確認して、結果が異なる理由を把握するようにしておきましょう。
まとめ
いかがでしたか？ Google は、Google PageSpeed Insights や Google Lighthouse など、サイトのパフォーマンスを追跡するいくつかのツールを無料で提供しています。ぜひ、ご自身のサイトのパフォーマンスを解析してみましょう。
また、Wix のダッシュボードではサイト速度から、サイトを高速化するおすすめのアクションが作成されます。Wix のヒントにしたがって競合との比較や、全体的なユーザーエクスペリエンスを向上させるためのスキルを身につけることができます。まずは無料でお試しください。
Web サイトにとって重要なポイントは、サイトパフォーマンスだけではありません。ウェブサイトセキュリティについても万全の対策をとる必要があります。くわしくはこちらの記事もご覧ください。
編集者：Miyuki Shimose
ブログ コンテンツマネージャー
