サイト高速化を目指す!サイト表示速度を改善する 10 の方法



Web サイトにおける「第一印象」の重要性を知っていますか?サイトの第一印象を決定づける要因はサイト上のコンテンツや Web デザインの他に、「サイト表示速度」も含まれます。


表示速度の遅い Web サイトは、サイトの評価が下がり、コンバージョン率にも影響することが考えられます。一方、表示速度が速い Web サイトは、より多くの人がサイトに訪問することが見込めるため、新規リードの増加、最終的には顧客獲得へ繋がる、といった高いパフォ-マンスが期待できます。


表示速度の速い Web サイトを作成するためには、まず、高い技術を備えた効率的なホームページ作成ツールを使用することから始めましょう。しかし、単にホームページ作成ツールを使えば良いということではありません。あなたの Web サイト上のコンテンツを、サイトパフォーマンスの向上に貢献できるようなものにする必要があるのです。


たとえば、使用する画像や動画のバランスが取れているか、これらのメディア(画像や動画)やコンテンツやをどこに配置するか、またはどのような Web コンテンツやブラウザ拡張機能を使用するか、といったさまざまな要因を考慮する必要があります。具体的な例として、GIF アニメーションはユーザーの目を引く効果的な使い方が出来ますが、これは重いファイルのため、ストレージ容量だけでなくネットワークも大幅に消費してしまいます。また、文字テキストは画像よりも速く読み込まれるため、配置する順序にも気を付ける必要性があります。このように、さまざまな要素がサイト表示速度に影響するのです。


そこで、この記事では、Web サイトの表示速度を改善するための 10 の方法を解説します。Web サイトのパフォーマンス向上を目指して、サイト高速化のための施策に取り組みましょう!



Web サイトのページ表示速度の重要性とは?


Web サイトのページ表示速度とは、サイトリンクがクリックされてから、Web ページが読み込まれ、ブラウザに表示されて、ユーザーがページ上で操作ができるようになるまでにかかる時間です。


最初にサイト訪問者の目に入るコンテンツに基づいてサイトのパフォーマンスを評価する「(ユーザーの)体感速度」と同じものではありませんので、ご注意ください(必ずしも最初に読み込まれる要素とは限りません)。ただし、これら 2 つは異なるものとは言え、どちらもとても重要な指標です。この後にご紹介するポイントを参考に、サイトの表示速度と体感速度の両方を同時に改善できるよう常に取り組みを行う必要があります。


では、「サイト表示速度に優れた Web サイト」とは一体どのようなサイトを指すのでしょうか。一般的には、3 秒以内でページが読み込まれるサイトが理想的と言われています。


次に「Web サイトを高速化することにおいての重要性」に関して触れると、サイトの読み込み時間は、ユーザビリティ、コンバージョン、ユーザーエンゲージメント、および検索順位に影響します。


以下、それぞれどのように影響するのか詳しく確認しましょう。


ユーザビリティへの影響:当然のことですが、サイトページの読み込みが速いほど、サイト訪問者はより早くサイト上での操作が可能となります。たとえば、ネットショップの商品を閲覧したり、チャットサービスを利用したり、または単純にそのサイトが何のサイトなのかをコンテンツから理解できたり、といったことです。したがって、サイトページをより早く表示させることは、顧客の満足度を高めることにも繋がります。


ユーザーエンゲージメントへの影響:サイト訪問者が、サイト上でスムーズにページを遷移できると、Web サイトに滞在する時間が長くなりコンテンツへの興味が高まるでしょう。たとえば、ユーザーがあなたのネットショップを利用する際、購入に至るまでの一連のステップが数秒以上かかるのであれば、大抵のユーザーは購入を諦めて、サイトから離脱し、他の競合サイトへと移動してしまうといった行動が予想できます。また、フォームの入力やサイトのページ間での移動にも同様のことが言えます。したがって、サイト表示速度はサイト訪問者数やビジネス全般にも影響を及ぼすことが考えられます。


コンバージョンへの影響:Web サイト制作の目標として多いものは、コンバージョンの獲得です。実際に、100 ミリ秒の遅延で、コンバージョン率が最大 7 % も下がるという報告があります。よって、サイトの表示速度がユーザーにとって充分でない場合は、離脱へと繋がってしまう可能性が考えれるのです。


検索順位への影響: Web サイトの表示速度ランキング要因の 1 つです。上位表示を狙うには、サイトの表示速度を上げるためのコンテンツの調整も SEO 対策の一つとして取り組みましょう。


表示速度の速い Web サイトの重要性が理解できたところで、実際にサイトのパフォーマンスを改善し、訪問者にとっても Google にとっても良質な Web サイト制作の方法を解説します。



目次

  1. コンテンツの詰め込みすぎに注意する

  2. ファーストビューを意識する

  3. 画像や動画の過剰な使用は避ける

  4. 画像サイズを最適化する

  5. テキストと画像のバランスを考える

  6. テキストの利点を知る

  7. 使用するフォント数とフォントスタイルを制限する

  8. アニメーションを使用するうえでの注意点を知る

  9. スマートフォン対応のサイトに着目する

  10. 第三者開発アプリを制限する



01. コンテンツの詰め込みすぎに注意しよう


この記事でもっとも大切なことを一言で言うと、ホームのページは簡潔に、過度に長いページにならないよう気をつけるということです。


ホームのページにコンテンツやメディア(テキスト、画像、動画、およびアニメーション)を過剰に詰め込むと、マイナスの影響を及ぼす可能性があります。たとえば、読み込み時間の遅延や、サイト訪問者にとって見るべきポイントが不明瞭で意図することが伝わらず、結果的にサイトを離脱してしまうといったことが考えられます。


一方、必要最低限の情報で構成されたホームのページでは、ユーザーがサイトを訪れた瞬間から容易に情報を収集できます。つまり、ユーザーがあなたの意図したメッセージをより速く理解することができるのです。


万が一、最初のページに配置するコンテンツ量が多い場合は、それらのコンテンツを複数のページに分散することで解決できます。そうすれば、最初のページに収まり切らないコンテンツを削らなくても、そのコンテンツが活きる独自のページを設けることができるのです。そして、「もっと見る」「ブログ記事を読む」「ギャラリーを見る」などのナビゲートボタンで、最初のページから他のコンテンツページへと容易にアクセスできるよう誘導することができます。



02. ファーストビューを意識しよう


ファーストビューとは、ユーザーが Web サイトを訪れた際、スクロールせずに閲覧できる画面領域のことです。ユーザーが一番最初に目にするページ、同様に最初に読み込まれるページとなるので、最も重要な部分です。


そこで、サイトぺージ全体の読み込みが完了するまでの間、このファーストビューを戦略的に活かし、サイト訪問者の目を引き付けましょう。そのためには、魅力的な画像と分かりやすいテキストを使用します。最も一般的なガイドラインとして、ヘッダーとサブヘッダーのテキスト(ビジネス名やキャッチコピーなど)、ロゴ、および CTA(行動喚起)ボタンをファーストビューに含めると良いと言われています。


基本的に、ファーストビューには訪問者が知るべき主要な情報を網羅して、ページをシンプルかつ分かりやすいものにすることを心がけましょう。必ずユーザーへ伝えたいメッセージであればファーストビューへ配置し、ユーザーの注意をそらす可能性のある要素は、ファーストビューより下へ配置、または他ページに配置するのがお勧めです。


また、アニメーションをファーストビューへ配置する場合の注意点についても触れておきます。アニメーションはページの読み込み速度を遅くするため、必要以上の使用は避けるべきです。よって、視覚的要素が必要な場合は、アニメーションの代わりにテキスト、画像またはロゴを使いましょう。アニメーションに関しては後ほど詳しく説明します。





03. 画像や動画の過剰な使用は避けよう


次は、サイト上のコンテンツに目を向けてみましょう。ここでも、量より質に重き多くことが重要です。


家具屋が店頭に、全ての家具を置かず主力商品のみを置いているのと同様に、Web サイトも選び抜かれたコンテンツやメディア(画像・動画)だけを配置すべきです。Web サイトはいわば店頭のような役割を果たし、サイト上に配置する全ての要素がパフォーマンスに反映します。ここではサイトパフォーマンスに影響するメディアに着目し、特にロングスクロールのフォトギャラリーを取り上げます。


Facebook や Twitter のようなロングスクロールのフォトギャラリーは、画像サイズの大小に関わらず、サイトの読み込み速度に影響します。そのため、フォトギャラリーのページ表示速度を向上させるには、全ての作品ではなく、最も大切な傑作のみを掲載すると良いでしょう。


また、YouTubeFacebook を埋め込んだコンテンツに関しても見直してみましょう。これらは外部サイトのため、Web サイトのホスティングサービス(例:Wix.com)はコンテンツの最適化や表示速度を改善することはできません。そのため、埋め込みコンテンツを利用する場合には、サイト全体に対して 1 つか 2 つに制限することをお勧めします。


また、埋め込みコンテンツを利用する上でのもう 1 つの策として、動画をサイト背景に使用したり、または手持ちの動画や Wix 無料動画を表示できる動画ボックスを追加したりすると良いでしょう。こうすることで外部のコンテンツではなくなるため、利用中のホスティングサービスがこれらの動画をサポートでき、サイト速度に与える影響を制御できます。


コンテンツは量より質です。Web サイトに配置するメディアは、それらを追加する価値があるか、コンバージョンの目標に沿っているか、といったメリットを考えてから追加するようにしましょう。



04. 画像サイズを最適化しよう


画像を最適化することで Web サイトの容量を大幅に削減でき、パフォーマンスの改善に繋がります。ここでのポイントは、ファイル形式を PNG ではなく JPEG にするということです。PNG と JPEG の違いについては、その他のファイル形式を含め解説しているこちらのガイドを参照してください。


一般的に、JPEG は PNG より Web に適しているとされています。画質を維持しながらサイズを軽量化できるため、より速くアップロードできるのです。画像を透明にする必要がある場合やプロの写真家である場合を除いて、JPEG は十分な品質と使いやすさを備えていると言えるでしょう。

画像を JPEG へ変換するには、XnConvertTinyJPGCompressor.ioなど、オンライン上で利用できる無料のツールが多数あります。


Wix で作成したサイトは、画像をサイトにアップロードすると自動的に画像を WebP (ウェッピー)形式に変換するという利点があります。 WebP は Google によって導入された比較的新しい画像フォーマットで、従来の PNG や JPEG といった形式よりもより高い画質を保ちながら、画像を圧縮することができます。Wix はこの新しく、改良された WebP 形式をサポートする全てのブラウザに対応しています。さらに、エディタ上で切り抜いた画像も自動的にあなたのウェブページ用に最適化します。


Wix の画像フォーマットの読み込み時間に関してはこちらをご覧下さい。

Wix は、最高のサイトパフォーマンスを提供するために様々な策を施しています。しかし、サイトに掲載された画像の質を落とす、ということだけはしていません。Wix では、ユーザーのみなさんが Wix エディタにアップロードした画像は、ユーザーの所有物であり、何よりも優先すべきものと考えているからです。


そして、ここにもう 1 つ知ってもらいたい特別なことがあります。それは、「画像の遅延読み込み」です。「画像の遅延読み込み」とは、Web サイトに表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込むという技術です。Wix サイトが読み込まれると、最初は画像が低解像度で表示されます。これは、高解像度の画像が読み込まれるまでの間、サイト閲覧者に白紙ページを見せるのを避けるためで、サイト表示速度と体感速度を向上させるための技術の 1 つです。



05. テキストと画像のバランスを考えよう


サイト上にテキストと画像を配置するということは、2 匹の異なる動物を飼っているようなものです。彼らは時に親友であり、かと思えば喧嘩をします。よって、この 2 つの要素の調和を保つため、それぞれにスペース(領域、空間)を与える必要があります。以下では、2 つのポイントを確認しましょう。


まず、1 つ目はコントラストに関してです。白い背景、カラー画像、そして白いテキストを例に出します。テキストは画像よりも速く読み込まれるため、この白いテキストは画像が読み込まれるまでブラウザには何も表示されないことになります。よって、サイトをデザインする際は、このことを踏まえた上で適切な色彩を取り入れましょう。


2 つ目は、画像上のテキストに関してです。画像にテキストがある場合は、読み込み速度が遅くなるため、サイト訪問者はページが完全に読み込まれるまでブランクの画面を見ることになってしまいます。したがって、テキストを画像上に配置することは避けたほうが良いでしょう。また、画像上のテキストは、Web サイトのアクセシビリティに効果をもたらしません。この問題を避けるために、テキストを追加したい場合は、画像の上にテキストボックスで追加するのが良いでしょう。なお、ロゴマークの場合はこの限りではありません。



06. テキストの利点を知ろう


前述のように、テキストは画像やアニメーションよりも速く読み込まれます。しかし、これ以外にも、テキストに気を配ることで得られる利点があります。たとえば、テキストは読み込みが早いため、ヘッダーにテキストを配置すれば、すぐにサイト訪問者の目を引くことができ、訪問者のエクスペリエンスを向上することができます。


また、もう 1 つの主な理由は、SEO(検索エンジン最適化)です。SEO とは特定のキーワードでの検索結果でサイト上位表示を狙うための一連の取り組みを指します。SEO の技術的な話をする前に、質の高いテキストは、Google(およびその他の検索エンジン)があなたのサイトの理解を深めるために役立ち、表示順位に直接影響を与えるということを覚えておきましょう。


画像や動画などのメディアは、訪問者のエクスペリエンスを向上したり、ページ滞在時間を延ばしたりすることで、SEO に間接的な影響を与えます。したがって、サイトへの流入を増やすためには、テキストの使用がカギとなります。



07. 使用するフォント数とフォントスタイルを制限しよう 


フォントファミリーを過剰に使用するとサイトの統一感を損なうため、2 ~ 3 種類のフォントに押さえることをお勧めします。こうすることでブランドイメージの一貫性を保つことができるほか、クリーンでプロフェッショナルな印象を与えることもできます。そして、これは Web サイトの第一印象の良し悪しが決まるだけでなく、サイトの読み込み時間を減らすことにも繋がります。


また、単に使用するフォント数だけでなく、フォントの種類もサイト表示速度に関係します。たとえば、カスタムフォントを使用する場合、グラフィック要素(画像や動画)を持つためダウンロードする必要があり、サイトのパフォーマンスに影響する可能性があります。


さらに、フォント書式(太字、下線、斜体など)の過剰な使用も避けましょう。これらもまたダウンロードを必要とし、ご想像の通り、サイトの読み込み時間に影響します。


しかしながら、カスタムフォントやフォント書式の使用を諦めなければいけないということではありません。サイトにこれらのフォントを使用する場合にはよく考えて選択し、これらを使用することで明確な目的を達成したいときにのみに使用するようにしましょう。



08. アニメーションを使用するうえでの注意点を知ろう


躍動感のあるアニメーションは、ユーザー体験の向上に繋がる魅力がある一方で、ファイルが大きいためサイトの表示速度に影響してしまいます。

そのため、どのようなアニメーションを使用するか注意して選ぶ必要性があります。具体的な例として、ファイルの中でも最も重い GIF アニメーションの使用は避けることをお勧めします。たとえ視覚的に小さな GIF アニメーションを使用したとしても、ファイルが大きいため読み込みに時間がかかり、さらには Web サイト上の全ての要素が表示される時間にも影響します。


アニメーションを追加する場合は、ファーストビューより下に配置するのが良いでしょう。そうすることで、読み込み時間の長さからサイト訪問者がぺージを離脱するのを防ぎつつ、ファーストビューでは興味の湧く情報を提供することができます。


また、GIF から MP4 に変換できるオンラインツールを使用して、アニメーションを動画へと変換することができます。動画は、アニメーションや GIF と同様に視覚的にユーザーを魅了でき、読み込み時間もはるかに速くなります。これは、動画が最初のバッファ後にすぐに再生される一方で、GIF は、再生前に完全にダウンロードが必要なことが関係しています。



09. スマートフォン対応のサイトに着目しよう


スマートフォンから Web サイトを閲覧する人が日々増えているため、スマートフォン対応のサイトの重要性が高まっています。Wix でサイトを作成すると、スマートフォン対応のサイトも自動生成するので、一からモバイル版サイトを作成する必要がありません。しかし、単にモバイル版サイトを持つだけでは十分とは言えません。デスクトップよりもはるかに小さいモバイルデバイスでは、画面を有効的に活用する必要があります。つまり、ファーストビューの領域に掲載できる情報はより少なくなります。したがって、会社名、ロゴ、CTA などの基本的な情報はもちろん、サイトへ配置する要素は賢明に選びましょう。


また、デスクトップ版サイトの要素は、必ずしもモバイル版サイトで必要とは限りません。そこで、不要となる要素を隠すこともできます。フォントスタイルや画像、アニメーション、動画、特殊効果などをもう一度見直してみましょう。


そして、小さなモバイル画面を最大限に活用するために、読み込み速度の速い要素を配置することも検討しましょう。たとえば、ページの読み込み中に表示されるロゴや写真といったウェルカムスクリーンや、ワンタップでサイトオーナーに連絡が可能なモバイルアクションバーの設置などが挙げられます。





10. 第三者開発アプリの追加は慎重に検討する


第三者開発アプリは、Web サイトのホスティングサービスによって開発されていない外部アプリケーションを指します。たとえば、Wix アプリマーケットでは、Instagram フィード評価ウィジェットなど豊富な第三者開発アプリ提供しており、その多くは無料です。


第三者開発アプリは、iFrame を使用しています。これは、外部サイトやアプリをあなたのサイトに埋め込む際に必要になるものです。これは、第三者アプリを使う場合、あなたのサイト内で外部サイトを読み込むことになること、さらに Web サイトのホスティングサービスによる最適化の対象範囲外になることを意味します。つまり、第三者アプリの利用は、サイトの読み込みスピードに影響を及ぼすことがあるのです。


しかし、第三者開発アプリが多くの優れた機能を備えていることは確かです。よって、自分の Web サイトの目標達成において本当に必要なアプリであるかどうかをきちんと見極める必要があります。この過程で役立つポイントがあるので確認しましょう。


まず、サイト上に追加した各アプリを 1 つずつ無効にし、サイトの速度に変化があるかを確認します。次に、似たような機能を持つアプリを使用していないか確認しましょう。たとえば、フォトギャラリーと Instagram フィードのどちらもサイト上に配置する必要はありますか?どちらのアプリも写真を表示できるアプリですが、フォトギャラリーはあなたの Web サイトのホスティングサービスが提供している機能なので、サイトの読み込み速度はより速くなります。



サイト表示速度のパフォーマンス測定方法


ご紹介したサイトの表示速度を高速化するための施策を施したら、次はあなたのサイトスピードを測定してみましょう。Wix サイトをお持ちの方は、Wix サイトスピードテストでパフォーマンスをチェックすることができます。





Wix 以外のプラットフォームで作成した Web サイトをお持ちの方は、Web サイトパフォーマンスを測定するその他のテストツールで試すことができます。たとえば、Google の PageSpeed InsightsPingdom Tools などが人気です。どちらもページの読み込み速度だけでなく、速度が遅い原因や改善点といった重要な洞察を知ることができます。



まとめ


ユーザーの体感速度を理解する:サイト訪問者は、最初に目にする画面に基づき体感的にサイトの表示速度を感じています。たとえば、ファーストビューの読み込み速度が他の領域より遅ければ、ユーザーは白紙のページを見ることになるため、表示速度が遅いと感じてしまうでしょう。このことから、コンテンツの配置と種類は、サイトの第一印象を決定づける要因として非常に重要であると言えます。


サイトに配置するアイテムがどのように影響するか理解する:Web サイトに配置するテキスト、動画、画像、アニメーション、アプリケーションなど全ての要素はサイトのパフォーマンスに影響します。よって、サイトを運営する上で、これらの要素があなたの目標達成に貢献するか、これらを追加することでコンバージョン率が向上するか、といったことを再度見直してみましょう。1 つでも答えが「いいえ」である場合は、その要素は削除、またはファーストビュー以外の場所へ配置することを検討すべきでしょう。


コンテンツの詰め込みすぎによる影響を理解する:サイト訪問者が最初に目にすることになるホーム画面は、一番最初に読み込まれるページでもあります。したがって、ホーム画面には過剰な情報を配置せず、シンプルにするというのが、Web デザインでのベストプラクティスです。ページの要素を減らし、ファイル形式を小さくすることで、ページの表示速度がより速くなるだけでなく、訪問者がより長くページに滞在し、エンゲージメントを高められることが期待できます。



いかがでしたか?

優れたユーザー体験を提供できるよう、上記で紹介したサイト表示速度の改善策を取り入れてみませんか?さぁ、今すぐ Wix でホームページ作成を始めましょう!


ja03.png