サイト表示速度の重要性と最適化のための８つのステップ
この記事は2019年5月30日に公開、2022年1月24日に更新しています。 ビジネスや人付き合いでは第一印象が重要視されますが、ホームページも例外ではありません。そして、デザインやコンテンツはもちろん、はじめて訪れたサイトの印象を左右する最も重要な要素のひとつが「表示速度」です。
表示速度が遅いとサイトの信頼度が損なわれ、トラフィックとコンバージョンが落ちて結果的に売上にも影響が及んでしまいます。対して、表示速度の早いサイトはビジネスが右肩上がりに成長することが期待できます。より多くの訪問者を惹きつけることでリード（見込み客）が増え、そこからさらなる顧客獲得と売上アップが期待できるためです。
サイトの表示速度を上げるための最初のステップは、まず最適な技術が搭載されたホームページ作成ツールを使うことです。パフォーマンスの高いコンテンツを制作できるかどうかは、サイト所有者であるあなたの手にかかっています。
サイト表示速度を最適化するにあたって考慮すべき要素はたくさんあります。今回のブログでは、Web サイトの表示速度を最適化し、高速読み込みを実現するためのヒントをご紹介します。
サイト表示速度とは
表示速度とは、Web ページ上のコンテンツの読み込みにかかる時間のことです。これを測定する方法は First Contentful Paint（FCP）、Speed Index（SI）、Largest Contentful Paint（LCP）などたくさんありますが、表示速度を定義するのに最も有効な指標のひとつが「インタラクティブになるまでの時間（Time to Interactive、TTI）」です。
TTI とは、ページが読み込まれてから、ユーザーが実際にインタラクションを行える状態になるまでにかかる時間のことです。たとえば、CTA をクリックする、ビデオの再生ボタンを押すなど、ユーザーがページ上で行うことができるさまざまなアクションが含まれます。
ここで気になるのが「サイト表示速度はどのくらいだと良いのか？」ということでしょう。回答は業界によって異なりますが、平均的にはサイトを開いてから3秒以内にページが読み込まれる状態が理想です。また、同じサイト内でもページの内容や、モバイルと PC のどちらで見るかによって表示速度が異なることも覚えておきましょう。
表示速度が重要な理由
サイトを高速化するにあたって、表示速度が重要視される理由は主に4つあります。
ユーザビリティ
当たり前のことですが、ページの読み込みが速ければ速いほど、ユーザーはより速いタイミングでサイトを操作することができます。これは、ホームページのメニュー、画像などのビジュアルコンテンツ、ボタンなど、訪問者がサイト上でアクションを起こすためのアイテムが表示されることを指します。これらの機能がより速く表示・使用できるようになれば、訪問者の満足度向上およびリピーターの増加につながります。シンプルな原理ですが、サイトの表示速度を最適化することはそれほど重要なのです。
ユーザー
会員登録、予約、商品の購入といった一連のプロセスがあるサイトでは、より速く処理が進む方がユーザーのエンゲージメントが高まります。たとえば、ネットショップでチェックアウトの各ステップを読み込むたびに数秒待たされてしまうとしたらどうでしょう？待つのに疲れた潜在顧客は、プロセスを途中でやめてしまうかもしれません。
フォームへの入力やページ間の移動など、ユーザーが行おうとするアクションについても同様です。サイトの表示速度が遅いと、エンゲージメントはもちろん、コンバージョン率やリピーター数にも影響が生じます。
コンバージョン
多くのサイト所有者が共通して持っている具体的な目標のひとつが、サイトを通じてコンバージョンを獲得することでしょう。調査によると、サイトの表示速度が0.1秒でも改善されれば、コンバージョン率、ファネルの進行、顧客エンゲージメントにプラスの影響が出ることが分かっています。訪問者は、期待したスピードでサイトを利用できなければすぐに他のサイトへと移ってしまうからです。
検索エンジン
Google は、サイトの検索表示順位を決める基準（Search Engine Optimization / SEO 要素）のひとつとして、サイトの表示速度を考慮しています。したがって、特定のキーワードの検索結果でサイトの上位表示を狙いたい場合は、たとえミリ秒単位であっても表示速度を上げることでより良いパフォーマンスが期待できると考えられます。
表示速度の測定方法
サイトの表示速度を測定する方法はたくさんありますが、中でも最も信頼性が高く人気なのが Google PageSpeed Insight です。自分のサイトの URL を送信するだけで、Google が検証・作成したサイトのパフォーマンスレポートを見ることができます。
このレポートには、Google が検索表示順位を決定する際に考慮するいくつかの指標（コアウェブバイタル）が記載されています。スコアが良好（緑）である場合、サイト全体のランキングや各ページの表示順位のパフォーマンスは高いと考えられます。スコアが不良（赤）だと、サイト全体および個々のページのランキングにマイナスの影響が生じる可能性があります。
Google PageSpeed Insights は、サイトの総合的な速度パフォーマンスを100点満点のスコアで評価します。スコアが90～100の間に来るのが理想です。59より低い場合は不良とみなされるため、サイト表示速度をすぐにでも最適化することをお勧めします。
Wix でサイトを作成することも、Google が認める高速化対策のひとつです。「Wix は常にパフォーマンスの改善に取り組んでおり、監視ツールにもサイトでのユーザー体験にもその努力の成果が色濃く表れています。」と、Google のシニアソフトウェアエンジニア / デベロッパー アドボケートのヨーブ・ワイス（Yoav Weiss）氏は述べています。
Wix サイトをお持ちの場合は、Wix アクセス解析のサイト速度ダッシュボードで表示速度のインサイトと現在の読み込み速度を確認できます。このデータは所有するサイトのユーザーと Google PageSpeed Insights から取得しているもので、簡単に表示速度を測定してサイトの改善に生かすことができます。
表示速度のスコアは、使用するパフォーマンス検証ツールの種類によって確実に異なります。それぞれのプラットフォームが異なる方法でアクセス解析やデータ収集を行っているためで、同じサイトでも使うツールに応じてスコアが変動します。しかし、使うツールの良し悪しを調べるよりも、まずはスコアの改善に取り組むことが先決です。
以下のステップを参考にして、どのようにスコアを伸ばしていけるかを考えてみましょう。
表示速度を上げるためには
一般的に、多くのホームページ作成ツールには、サイトの表示速度とパフォーマンスを向上させるために必要な多くの機能が既に組み込まれています。サイトのデザインとコンテンツがパフォーマンスに与える影響をしっかりと理解し、適切なツールを使用して表示速度を定期的に測定することが重要です。
以下では、Web サイトのパフォーマンスと表示速度を向上させ、顧客満足度と Google 検索での表示順位をいずれも高めるための方法をご説明します。また、表示速度の最適化に役立つ便利なヒントもあわせてご紹介しています。
サイト表示速度を最適化するための基本のステップは次の通りです。
1. メディアを最適化する
3. CDN を導入する
4. 遅延読み込みを活用する
5. プラグインの利用は避ける
8. コンテンツを最適化する
01. メディアを最適化する
画像のサイズが大きすぎると、表示速度にも悪影響が生じます。画質はもちろん重要ですが、パフォーマンスとのバランスを取ることを優先して考えましょう。この場合は、まず画像を圧縮してサイズを縮小します。
一番簡単なのは、Wix のようなホームページ作成ツールを使用することです。サーバー上でメディアのリサイズ、クロップ（切り抜き）、変形が自動で行われるため、あらゆるデバイスに適した品質で画像を表示させることができます。
サイトの作成時に画像の保存方法を変えるだけでも、表示速度を最適化することができます。たとえば、画像を PNG ではなく JPG で保存する（JPG ファイルはよりサイズが小さいため、その結果読み込みが速くなります）、可能な限り SVG ファイルを使用する（サイズがさらに小さく、図形やロゴに適しています）、大きな画像をページの下部に配置して、ファーストビュー（スクロールせずに表示されるサイトの上の部分）のコンテンツを表示している間に読み込む時間を確保する、などの方法があります。
他にも、オンライン上の画像サイズ変更ツールを使い、必要にあわせてサイズを変更してから、アップロードする方法もおすすめです。
また、アニメーション GIF を使う場合は少し注意が必要です。動きのあるポップなサイトにはアニメーションが重宝しますが、同時にサイトの表示速度も遅くなります。そのため、GIF を使用する前にデザインをもう一度見直し、どうしても使いたい場合はページの下のほうに配置しましょう。アニメーションのフレーム数を制限し、ディメンションのサイズを小さく保つことで、デザインがサイト表示速度のスコアに与える影響を最小限に抑えることができます。
サイト上でどうしてもアニメーションが必要となる場合は、動画を使用しましょう。
サイトのデザインは凝れば凝るほどパフォーマンスが上がるというものではなく、「時にはシンプルなデザインが一番効果的」だという専門家の意見もあります。「サイトのパフォーマンスを向上させる最も簡単な方法の 1 つは、サイトから複雑な要素をなくすことです」と、Wix.com のパフォーマンス技術責任者を務めるダン・シャフィア（Dan Shappir）もコメントしています。これはデザインやコンテンツ（特に画像）だけでなく、サイトの設定や機能に関しても当てはまります。
02. コードをシンプルに記述する
コードが複雑だったり、正しくフォーマットされていないとページの表示速度も低下します。シンプルなコードを使用すると、Google がサイトをクロールしやすくなり、ページの読み込みも速くなります（Google にとって良いものは、サイトにとってもメリットだと考えましょう）。すべてのページでシンプルなコードを使用しているホームページ作成ツールを選べば、コードのチェックや修正に悩まされることなく、安心してパフォーマンスを最適化することができます。
03. CDN を導入する
CDN（コンテンツデリバリネットワーク）とは、地理的に異なる場所に設置されたサーバーやデータセンターのことで、訪問者の所在地に最も近いサーバーからサイトコンテンツを配信します。これにより、コンテンツの配信時間が短縮され、結果的に表示速度も向上します。世界中に配置されたサーバーで構成される Wix のグローバル CDN なら、サイトが世界のどこにあってもページのパフォーマンスを最適化することができます。
04. 遅延読み込みを活用する
遅延読み込みとは、ユーザーに初期表示されないセクションのコンテンツやメディアの読み込みを遅らせることを意味します。これは、多くのホームページ作成ツールで自動的に行われている対策のひとつで、たいていはすべてのページに遅延読み込みが導入されています。また、大きなパーツや解像度の高い画像はページの下方に配置しましょう。こうしておけば、ユーザーがスクロールダウンする前に下部の要素をすべて読み込むことができます。
まずは、サイト上のすべてのページについて、ユーザーに何を最初に見せたいかをよく検討しましょう。ユーザーが最初にサイトを開いたときに表示されるのは、ファーストビューコンテンツのみです。このセクションにシンプルかつインパクトのあるコンテンツを追加して訪問者の注意を引き、その間にページの他の部分を読み込むことでサイトを速く、完全な状態でユーザーに見せることができます。
05. プラグインの利用は避ける
サイトにサードパーティの分析ツール、トラッキングコード、プラグインを追加すると、ページの表示速度にかなりの影響が生じます。そのため、サイトを作成する際は必要なアナリティクス機能やプラグインがすべて組み込まれたホームページ作成ツールを選ぶことが重要です。こうすることで、ユーザーの行動データの収集とサイトの高速化をうまく両立させることができます。
ユーザーやサイトのパフォーマンスに関するデータをもっと取得したいという場合は、ユーザーのサイト上でのインタラクション解析に特化したプラグインやトラッキングコードを優先的に使用することで、サイトの機能性についてのより有意義なフィードバックが得られます。また、トラッキングプラグインやピクセルを追加した場合としない場合の両方でサイトの表示速度とパフォーマンスを評価し、読み込みを妨げている要因を検証しておくのもおすすめです。
06. モバイルファーストを徹底する
ユーザーと検索エンジンの両方にとって、モバイル端末でのエクスペリエンスは Web サイトのパフォーマンスを最適化する上で非常に重要です。はじめてサイトを作成する場合は必ずモバイル最適化を行っておきましょう。Google のクローラーはモバイル版サイトを優先していますし、モバイル端末でサイトを閲覧するユーザー数も増え続けるばかりです。サイトの表示速度を最適化するにあたっては、まずモバイルサイトの改善に優先的に着手しましょう。
07. キャッシュ技術を取り入れる
自動キャッシュとは、ユーザーが最初にサイトを訪れたときの状態を保存しておき、再訪時にまったく同じ画面を表示することを指します。リピーターに対して保存されたコンテンツを配信することで読み込み時間を短縮できるため、ページを高速化する上では重要なポイントです。
Wix は全てのページに自動キャッシュを導入しているため、複雑な設定は一切不要。デザインも機能性もプロ仕様のホームページを簡単に構築することができます。
08. コンテンツを最適化する
「コンテンツの最適化」と一口に言ってもその中身はさまざまです。ここでは、サイトの表示速度やインタラクティブになるまでの時間に影響を与えずに、ページ上にコンテンツをどのように表示するかという意味で使用しています。
表示速度アップを目指してコンテンツを最適化するなら、Wix 内蔵のビデオプレーヤーの利用がおすすめです。YouTube 動画を埋め込むと表示速度に影響が生じる可能性がありますが、Wix ビデオプレーヤーなら外部ソースに頼ることなくページに動画を表示できます。こうしたサイト内蔵の機能を利用すれば、簡単にパフォーマンスを重視したサイト設計を行うことができます。
また、サイト上のフォントの数やサイズにも気を配りましょう。使用するフォントの数、色やサイズのバリエーションが多いほど、ページの読み込みは遅くなります。多用せずにインパクトのある数種類のみを選び、すべてのページでスタイルを統一させましょう。これは、ホームページをゼロから構築する場合でも、現在のサイトを最適化して表示速度アップを目指す場合でも、意識しておくべき重要なポイントです。
