【ページの表示速度改善】具体的な取り組みのまとめ

Webコンサルタントの松崎です。

 

これまで表示速度改善の様々な取り組みについて詳しく解説してきました。今回は、これまでの記事を振り返りながら、ホームページの表示速度を改善するための具体的な取り組みをまとめて紹介します。

 

 

 

女性2人がスマホを操作する様子

 

ここまでご紹介してきた表示速度改善の記事です。

それでは、表示速度の改善がなぜ重要なのか、そしてどのような方法でホームページを高速化できるのか、具体的にまとめていきましょう。

表示速度改善の重要性

なぜホームページの表示速度改善が重要なのでしょうか？

 

表示速度は、ユーザーがホームページを訪れたときに最初に経験することです。どんなに素晴らしいコンテンツやデザインがあったとしても、表示に時間がかかりすぎると、ユーザーは待ちきれずに戻ってしまいます。

 

Googleの調査によると、表示に3秒以上かかるホームページでは、約40%のユーザーが離脱するとされています。さらに、表示速度が1秒遅くなるごとにコンバージョン率が7%低下するというデータもあります。

 

表示速度はホームページの技術的な問題ではなく、ビジネス成果に直結する重要な要素なのです。さらに、GoogleのSEOランキングにも影響するため、検索上位表示にも関わってきます。

 

つまり、表示速度の改善は「ユーザーへの配慮」であり、「ビジネスの成功」にもつながる取り組みです。

表示速度を測定する方法

表示速度を改善する前に、まずは現状を把握しなければなりません。

ホームページの表示速度を測定するためツールはGoogle PageSpeed Insightsをオススメします。

Google PageSpeed Insights

Googleが提供する無料のツールで、モバイルとデスクトップの両方でページの表示速度を分析してくれます。0〜100点のスコアで評価され、改善点も具体的に提示されます。

 

使い方はとても簡単です。

  1. PageSpeed Insights（https://pagespeed.web.dev/）にアクセス
  2. 分析したいホームページのURLを入力して「分析」ボタンをクリック
  3. 分析結果とアドバイスが表示される

このツールを使って、自分のホームページの現状を把握しましょう。

そして、具体的な改善点を見つけたら、以下で紹介する方法で、表示速度の最適化を進めていきましょう。

画像の最適化

ホームページの表示速度低下の主な原因の一つは、最適化されていない大きな画像ファイルです。画像を適切に最適化するだけで、驚くほど表示速度が向上することがあります。

画像の圧縮

画像圧縮とは、見た目の品質をほとんど落とさずにファイルサイズを小さくすることです。以下のようなツールを使って簡単に圧縮できます。

実際に、元のサイズの60〜80%削減しても、目で見てわかるほどの品質劣化はほとんどありません。例えば、3MBの画像が500KB程度まで圧縮できれば、読み込み時間が大幅に短縮されます。

適切な画像サイズの設定

画像は表示サイズに合わせて最適なサイズにリサイズしましょう。

例えば、300×200ピクセルで表示する予定の画像を3000×2000ピクセルのまま使用していると、無駄なデータ転送が発生します。

次世代画像フォーマットの活用

WebPやAVIFなどの次世代画像フォーマットは、従来のJPEGやPNGよりも効率的に画像を圧縮できます。WebPは同じ品質でJPEGと比較して25〜35%サイズを削減でき、AVIFはさらに高い圧縮率を実現します。

 

ただし、一部の古いブラウザでは表示できない場合があるため、フォールバック（代替表示）の設定も必要です。HTML5の<picture>要素を使って以下のように記述すると、ブラウザが対応しているフォーマットを自動的に選んでくれます。

 

<picture>

  <source type="image/avif" srcset="image.avif">

  <source type="image/webp" srcset="image.webp">

  <img src="image.jpg" alt="説明">

</picture>

JavaScriptの最適化

JavaScriptはホームページにインパクトのある動きや使いやすさ向上のために追加しますが、過剰に使用すると表示速度の低下を招きます。

不要なJavaScriptの削除

使用していないプラグインや機能のためのJavaScriptコードは削除しましょう。例えば、スライダーを使っていないのにスライダー用のJavaScriptを読み込んでいるケースがよくあります。

JavaScriptの圧縮（ミニファイ）

JavaScriptファイルから空白、コメント、改行を削除して圧縮することで、ファイルサイズを20〜30%削減できます。UglifyJSなどのツールやWebpackなどのビルドツールを使って自動化できます。

JavaScriptの非同期読み込み

JavaScriptファイルは、`async`や`defer`属性を使って非同期に読み込むことで、HTMLの解析をブロックせず、ページの表示を高速化できます。

 

<!--非同期読み込み -->

<script src="script.js" async></script>

 

<!--遅延読み込み -->

<script src="script.js" defer></script>

 

asyncは読み込みが完了次第実行されるのに対し、deferはHTMLの解析が完了してから実行されます。用途に応じて適切な方を選びましょう。

CSSの最適化

CSSもJavaScriptと同様に、最適化によって表示速度を大幅に向上させることができます。

CSSの圧縮

CSSファイルも空白、コメント、改行を削除して圧縮することで、ファイルサイズを削減できます。

ファーストビューCSSのインライン化

ページの初期表示（ファーストビュー）に必要なCSSだけをHTMLのheadタグ内にインライン化し、残りのCSSは非同期で読み込むことで、レンダリングをブロックせずに素早く表示できます。

 

<head>

  <!--ファーストビューに必要なCSSをインライン化 -->

  <style>

    body { font-family: Arial, sans-serif; }

    .header { background-color: #f8f8f8; }

    /* 他のファーストビュー用CSS */

  </style>

  

  <!--残りのCSSを非同期で読み込む -->

  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

</head>

 

不要なCSSの削除

使用していないCSSセレクタや重複したスタイルを削除することで、CSSファイルのサイズを削減できます。PurgeCSS、UnCSSなどのツールを使って、実際に使用されているCSSだけを抽出することもできます。

フォントの最適化

Webフォントはデザインを向上させる一方で、表示速度に大きな影響を与えることがあります。

使用するフォントの制限

フォントの種類やウェイト（太さ）を必要最小限に抑えましょう。各フォントバリエーションは別々のファイルとしてダウンロードされるため、種類が多いほど読み込み時間が増加します。

フォントのサブセット化

特に日本語フォントは文字数が多いため、サイズが大きくなりがちです。使用する文字だけを含むサブセットフォントを作成することで、ファイルサイズを大幅に削減できます。

フォント表示方法の最適化

CSSのfont-displayプロパティを使って、フォントの読み込み方法を最適化できます。

 

@font-face {

  font-family: 'MyWebFont';

  src: url('myfont.woff2') format('woff2');

  font-display: swap; /* フォント読み込み中はシステムフォントで表示 */

}

 

font-display: swapを指定すると、Webフォントの読み込み中はシステムフォントで表示され、読み込みが完了したら切り替わります。これにより、テキストが表示されない時間を短縮できます。

遅延読み込みの活用

ページを開いた瞬間に全てのコンテンツを読み込むのではなく、必要になったタイミングで読み込む「遅延読み込み（レイジーローディング）」を活用しましょう。

画像の遅延読み込み

スクロールするまで見えない画像は、表示領域に入ったときに読み込むように設定できます。HTML5では`loading="lazy"`属性を使うだけで実装できます。

 

<img src="image.jpg" loading="lazy" alt="説明">

動画の遅延読み込み

YouTubeなどの埋め込み動画も、クリックされるまでサムネイル画像だけを表示し、実際のプレーヤーは後から読み込むようにできます。

アイフレームの遅延読み込み

GoogleマップやSNSウィジェットなどのアイフレームも、表示領域に入るまで読み込みを遅らせることで、初期表示の高速化が図れます。

ファイルの圧縮

HTMLやCSS、JavaScriptなどのテキストベースのファイルは、Gzipなどの圧縮技術を使うことで、転送サイズを大幅に削減できます。

Gzip圧縮

Gzip圧縮を有効にすると、テキストベースのファイルは元のサイズの70〜90%削減できることもあります。レンタルサーバーの管理画面や.htaccessファイルで設定できることが多いです。

 

# .htaccessでの設定例

<IfModule mod_deflate.c>

  AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript

</IfModule>

Brotli圧縮

Brotliは比較的新しい圧縮アルゴリズムで、Gzipよりもさらに高い圧縮率を実現します。サーバーがBrotliに対応している場合は、こちらを優先的に使用するとよいでしょう。

キャッシュの活用

一度ダウンロードしたファイルを再利用するキャッシュ機能を適切に設定することで、2回目以降のアクセスが大幅に高速化されます。

ブラウザキャッシュの設定

.htaccessファイルやサーバーの設定で、各ファイルタイプごとにキャッシュ期間を指定できます。

 

# .htaccessでの設定例

<IfModule mod_expires.c>

  ExpiresActive On

  ExpiresByType image/jpeg "access plus 1 month"

  ExpiresByType text/css "access plus 1 week"

  ExpiresByType application/javascript "access plus 1 week"

</IfModule>

サーバーキャッシュの活用

WordPressなどのCMSを使用している場合、サーバーキャッシュを活用することで、データベースへのアクセスや動的処理を減らし、表示速度を向上できます。

サーバーの選択と設定

どれだけページを最適化しても、サーバーが遅ければ表示速度は改善しません。適切なサーバーの選択と設定も重要です。

高速なサーバーの選択

レンタルサーバーを選ぶ際は、表示速度を重視したものを選びましょう。特に、SSD搭載、高速なCPU、十分なメモリ、適切な同時接続数に対応したものが望ましいです。

CDN（コンテンツ配信ネットワーク）の活用

CDNを利用すると、ユーザーに地理的に近いサーバーからコンテンツを配信できるため、表示速度が向上します。CloudflareやAmazon CloudFrontなどのサービスがあります。

実装の優先順位

全ての最適化を一度に行うのは難しいかもしれません。以下のような優先順位で進めるとよいでしょう。

  1. 画像の最適化: 最も効果が高く、比較的簡単に実装できます。
  2. ファイルの圧縮とキャッシュ設定: サーバー側で一度設定すれば継続的に効果があります。
  3. JavaScript/CSSの最適化: 不要なコードの削除や圧縮は効果的です。
  4. 遅延読み込みの実装: 特に画像の多いサイトでは効果が大きいです。
  5. フォントの最適化: 特に日本語サイトでは重要です。
  6. ファーストビューCSSのインライン化: 技術的に少し複雑ですが、効果は大きいです。
  7. サーバー環境の見直し: コストがかかる場合もありますが、根本的な改善につながります。

効果測定と継続的な改善

表示速度の改善は一度で終わらせず、継続的に測定と改善を繰り返しましょう。

  1. 現状の測定: PageSpeed Insightsなどで現在の表示速度を測定します。
  2. 改善点の特定: 測定結果から、最も効果的な改善点を特定します。
  3. 改善の実施: 特定した改善点に対して、具体的な対策を実施します。
  4. 効果の測定: 再度測定を行い、改善効果を確認します。
  5. 次の改善点へ: 効果が確認できたら、次の改善点へ進みます。

これを繰り返すことで、徐々にホームページの表示速度が向上していきます。

ユーザーを待たせないという配慮

表示速度の改善は、技術的な側面だけでなく、「ユーザーを待たせない」という配慮の表れです。

 

私たちが日常生活でも、レストランで長時間待たされたり、電話の応対が遅かったりすると、不快な気持ちになりますよね。それと同じように、ホームページの表示が遅いと、ユーザーはストレスを感じ、離脱してしまいます。

 

特にスマートフォンの普及により、「今すぐ欲しい情報をすぐに得たい」というユーザーの要望はますます高まっています。そうしたユーザーの期待に応えるためにも、表示速度の改善は欠かせない取り組みなのです。

 

表示速度の改善は、ユーザーに優しい親切なWebサイトにするための取り組みの中でも最も基本的で重要な要素です。ユーザーが心地よく使えるホームページを提供することで、満足度向上、滞在時間の延長、コンバージョン率の向上など、様々なメリットが期待できます。

表示速度改善でユーザー満足度とビジネス成果の向上を

ホームページの表示速度改善は、ユーザー体験の向上だけでなく、検索エンジンでの評価向上、コンバージョン率の改善など、ビジネス成果にも直結する重要な取り組みです。

 

今回ご紹介した方法は、どれも効果的なものですが、すべてを一度に実装するのは難しいかもしれません。まずは測定ツールで現状を把握し、効果の高そうな対策から順に実装していくことをおすすめします。

 

特に、画像の最適化や不要なJavaScriptの削除など、比較的簡単に実装できるものから始めると、早い段階で効果を実感できるでしょう。そして、少しずつ高度な最適化にも挑戦していくとよいと思います。

 

表示速度の改善は一朝一夕に完了するものではなく、継続的な努力が必要です。しかし、その努力はきっとユーザーの満足度向上と、ビジネス成果の改善という形で報われるはずです。

 

ホームページの表示速度でお悩みの方は、ページ表示速度の改善に徹底的に取り組み当社のWebコンサルティングをご検討ください。

ユーザーファーストの視点で、快適なホームページづくりをお手伝できます。

 

初回相談は無料です。

いつでもお気軽にお問い合わせください。