MENU
テクニカルSEOを中心としたSEO対策をまとめています

テクニカルSEOブログでは、SEOに関する技術記事を中心に提供しています。本ブログは、SEO分析ツール及びコンサルティングを提供する株式会社シンメトリックにより運営されています。

  1. ホーム
  2. ページスピード改善
  3. Webサイトの表示速度を改善するには？

Webサイトの表示速度を改善するには？

ページスピード改善

こんにちは、SEO分析ツール「アナトミー」開発チームの江頭です。

Webサイトの表示速度が遅いと、検索ユーザーがすぐに離脱してしまう原因になります。Googleも検索ランキングの要因に「ページの表示速度」を加えており、 表示速度の改善もSEO内部対策の１つになっています。

この記事では、Webサイトの表示速度を改善する方法を説明します。

目次

SEOと表示速度との関係性

Webサイトの表示速度は、さまざまな面でSEOへの影響しています。

まず1点目は、Googleのランキングシグナルとしてページの表示速度が利用されています。Core Web Vitalsというシグナルには、サイトがどれくらい早く表示されたか（LCP）という指標や、ユーザー操作の遅延（FID）といった指標が含まれ、2021年6月ごろから適用が始まっています。つまり、表示速度の遅すぎるサイトが検索順位に影響しています。

2点目は、クローラーによるサイト巡回処理への影響です。表示速度の遅いサイトはGoogleによるサイトのクローリングが効率的にできません。そのため、新しいページや更新したページが検索結果へ反映されるまでに時間がかかるといった影響があります。

3点目は、モバイルフレンドリーへの影響です。CSSなどの取得時にタイムアウトが起きやすくなると、モバイルフレンドリーではないと判定される可能性があります。

このように、検索エンジン対策としては、表示速度の改善が重要です。

サイト表示速度を改善するための施策

表示速度を改善するには、画像や動画のファイルサイズを削減したり、ネットワーク転送データを圧縮します。

  1. 画像のファイルサイズを削減する
  2. 動画のファイルサイズを削減する
  3. YouTubeプレイヤーはIframe Player APIで埋め込む
  4. 画面スクロールに応じて画像を読み込む
  5. Webフォントのダウンロード前もテキストを表示する
  6. サーバーでファイルを圧縮する
  7. ブラウザキャッシュを利用する

ルール①　画像のファイルサイズを削減する

JPEGやPNG画像のファイルサイズを最適化します。

ネットワーク転送の90%以上は画像データが占める

Webサイトで使用される様々なファイルのうち、最もデータ量が多いのが画像です。そのため、画像サイズを削減すると、ネットワーク転送量を大幅に削減でき、結果的にページ読み込み速度を改善できます。

また、画像はファイル形式や圧縮率、縦幅・横幅により、ファイルサイズが大きく変化する性質があります。

画像最適化ツールでファイルサイズを削減する

画像最適化ツールを使えば、JPEG画像やPNG画像、GIF画像のファイルサイズを最大で90%ほど削減できます。オンラインツールの compressor.io が便利です。特に、ファーストビューに表示される、ロゴやメインビジュアルのファイルサイズ削減を優先しましょう。

また、画像の縦幅・横幅が表示領域に対して２倍以上の大きさの場合は、縦幅・横幅を小さくして、ファイルサイズを削減します。Reduce Images などのオンライン画像最適化ツールが便利です。

アニメーションGIFを動画に変換する

動画をアニメーションGIFにすると読み込みが遅くなります。ファイルサイズも非常に大きくなるため、動画専用のWebM形式に変換して軽量化します。GIFからWebM形式の変換には、ffmpegが便利です。

ルール②　動画のファイルサイズを削減する

動画の読み込みが遅い原因は、ほとんどがファイルサイズです。動画のビットレートを下げることでファイルサイズを圧縮します。また、動画の形式にWebM形式を使うと更にファイルサイズを削減できます。

MP4動画はビットレート削減で軽量化できる

動画のビットレートが高いと、高画質な分、ファイルサイズも大きくなります。ビットレートを低くすることで、動画ファイルを軽量化できます。

MP4動画を軽量化するオンラインツールとしては、MP4COMPRESSが便利です。MP4ファイルをアップロードするだけで、面倒な設定もなく、動画ファイルを圧縮できます。

MP4形式よりWebM形式が圧縮効果が高い

WebM形式は、Googleが開発した新しい動画フォーマットで、MP4形式に比べて高い圧縮率を誇ります。ファイルサイズの削減効果は、動画により異なりますが、最高で90%程度です。

動画は、画像に比べて数十倍～数百倍ものファイルサイズなので、ネットワーク転送量削減に伴う表示速度の改善効果が非常に高いです。

videoタグでWebM/MP4を配信する

動画をYouTubeではなく、Webサイトから配信するときは、 WebM形式が推奨です。

動画変換ツールを使い、MP4形式からWebM形式に変換します。WebM形式への変換は、Convertioが便利です。

WebM形式はほとんどのブラウザが対応していますが、SafariとIEが対応していません。そこで、WebM形式とMP4形式の2種類の動画を配信します。

HTMLでは、videoタグの中にsourceタグでWebM形式とMP4形式の2つの動画ファイルを指定します。すると、WebM形式に対応したブラウザはWebM形式が、WebM非対応のブラウザはMP4形式が再生されます。

<video autoplay loop muted playsinline>
  <source src="movie.webm" type="video/webm">  
  <source src="movie.mp4" type="video/mp4">  
</video>

ルール③　YouTubeプレイヤーはIframe Player APIで埋め込む

iframeで動画を配信すると、表示速度が低下します。

YouTube動画をページに埋め込むときは、Iframe Player APIを使い、JavaScriptコードで行います。

例：

<div id="player"></div>

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: 640,
      height: 360,
      videoId: 'VWQWWhDTQt4'
 // YouTubeビデオID
    });
  }
</script>

ルール④　画面スクロールに応じて画像を読み込む

Webブラウザの画面内にある画像だけを読み込むようにします。

ブラウザは画面外にある画像も全て読み込む

Webブラウザは、スクロールしないと見えない位置にある画面外の画像も含めて、すべての画像ファイルを読み込みます。ページを開いたとき、ローディングがなかなか終わらなかったり、画面操作が遅くなるのは、これが主な原因です。

画面内にある画像のみを読み込む

画像を「遅延読み込み」することで、表示速度を改善します。 「遅延読み込み」 とは、ブラウザの画面内にある画像だけをサーバーから読み込む仕組みのことで、ページをスクロールするとふわっと画像が表示されるようになります。

遅延読み込みを行うには、ライブラリ「Lazy Load」を導入します。

WordPressではプラグイン「Lazy Loader」を入れるだけでOKです。

WordPress.org 日本語
Lazy Loader Lazy loading plugin that supports images, iFrames, video and audio elements and uses the lightweight lazysizes script. With manual modification of the …

ルール⑤　Webフォントのダウンロード中もテキストを表示する

Webフォントがダウンロードされるまでの間は、テキストが表示されないため、表示速度が遅く見えてしまいます。

CSSでfont-display: swapプロパティを指定すると、Webフォントダウンロード前もテキストが表示されます。

Googleフォントを使っているときは、次のようにWebフォントのURLにdisplay=swapパラメータを追加します。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap" rel="stylesheet">

ルール⑥　サーバーでファイルを圧縮する

サーバーの設定を変更し、HTMLやCSS・JavaScriptを圧縮して送信します。

テキストファイルはサーバーで圧縮できる

HTMLやCSS・JavaScript、SVGといったテキスト形式のファイルは、Webサーバー側で圧縮できます。gzipと呼ばれる圧縮形式を使うと、たとえばHTMLの場合、90%～95%ものサイズ圧縮効果があります。

サーバーからブラウザに送信される転送量が削減すると、表示速度の改善につながります。

サーバー側でgzip圧縮を設定する

サーバーの設定を変更し、テキスト形式のデータを圧縮して送信するようにします。

Apacheの場合、mod_deflateモジュールを有効にしたうえで、次のように記述します。

例：HTML, CSS, JS, SVGを圧縮する場合

AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript image/svg+xml

ルール⑦　ブラウザキャッシュの有効期間を長くする

Cache-Control/Expiresヘッダで、ブラウザキャッシュ有効期間を設定して、サーバーとの通信回数を削減します。

ファイル更新チェックのためにサーバーとの通信が発生する

画像やCSSなどのリソースファイルは、ブラウザキャッシュに保存されます。保存されたキャッシュファイルを利用するときには、サーバーのファイルが更新されていないかを再度チェックするため、通信が発生しています。画像ファイルの多いページでは顕著に遅くなります。

Cache-Controlヘッダでブラウザキャッシュに有効期間を設定する

Webサーバーの設定を変更し、Cache-Control/Expiresヘッダを送信するようにすると、ブラウザキャッシュの有効期間を設定できます。

例：ApacheでPNG/JPEG/SVGファイルの有効期間を10分に設定

ExpiresActive On
ExpiresByType image/png A600
ExpiresByType image/jpeg A600
ExpiresByType image/svg+xml A600

まとめ

Googleはページの表示速度を計測するPageSpeed Insightsを提供しています。このツールを使うと、表示速度をスコア表示してくれるので、表示速度が改善したかどうかを点数で確認できます。

点数がなかなか改善しない場合は、以下の記事も参考にしてみてください。

また、「ページスピード改善サービス」では実際に我々がコンサルティングで行っているページスピード改善の取り組みについてご紹介しています。実際の計測方法から、改善策の実施、検証プロセスまで説明しています。

ページスピード改善を外部へ依頼するか検討している方は、ぜひ参考にしてください！

最後に弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。

LazyLoadについて学ぶ
Lazy Loadで画像を遅延ロードする方法 大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。imgタグを使って、普通に実装すると次のような現象が起きてしまいます。 画像の読み込みが終わるまで…
画像の正しい使い方を学ぶ
SEOに効果的な画像の配置方法・使い方 ページに配置する画像は、ファイル名やimgタグのalt属性、配置場所がSEO上、大切になります。 検索エンジンは日々進化しているとはいえ、画像に描かれた内容や価値を正…
Webサイト運用の内製化支援サービス｜REBUILD WEB-MKTG-SITE
ページスピード改善
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次