CLUSTER SEO BLOG
テクニカルSEOにフォーカスしたSEO対策をまとめています

表示速度の改善方法

こんにちは、テクニカルSEOによるSEO対策サービス「CLUSTER SEO」開発チームの江頭です。

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

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

概要

画像や動画のファイルサイズを削減したり、ネットワーク転送データを圧縮することが推奨されています。

  1. 画像のファイルサイズを削減する
  2. 動画のファイルサイズを削減する
  3. 画面スクロールに応じて画像を読み込む
  4. サーバーでファイルを圧縮する

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

概要

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

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

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

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

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

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

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

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

概要

動画の形式にWebM形式を使うとファイルサイズを削減できます。

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

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

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

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

動画をYouTubeではなく、Webサイトから配信しているときは、 WebM形式で配信します。

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

WebM形式はほとんどのブラウザが対応していますが、SafariとIEが対応していません。次のように、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>

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

概要

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

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

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

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

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

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

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

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

概要

サーバーの設定を変更し、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

まとめ

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

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

Page Top