レンダリング速度とは？レンダリング速度が遅い原因と対策を解説
レンダリング速度が遅いとユーザーはストレスを感じ、ページを離れてしまい直帰率や離脱率に影響を与えてしまうため、SEOに大きく影響する要素の1つでもあります。
Googleはページの表示速度がランキング要素になることを発表しているため、レンダリング速度は無視できない存在となっています。
そこで本記事では、レンダリング速度が遅い原因と対策について詳しく解説していきます。
レンダリング速度とは
レンダリングとは、画像やテキストなどのWebサイトデータをもとに内容を整形してブラウザ上に表示する仕組みを意味します。
具体的には、Webページに含まれるHTMLやCSSなどによる描画内容の記述や画像ファイルやフォントファイルなど外部のデータなどをすべて組み合わせ、ブラウザのウィンドウ内にページ内容の描画を行います。
この一連の作業にかかる時間のことを、レンダリング速度と言います。つまり、ブラウザ上にページ内容が表示されるまでの時間を指します。
関連記事: レンダリングとは？ Googleクローラとレンダリングの関係を解説
レンダリング速度とSEOの関係性
レンダリング速度は、ユーザー側からはページ表示速度として認識されページの表示速度が遅ければストレスに感じてしまいます。
Googleは、ページの表示速度がランキング要素になるということを公表しており、ページ表示速度が遅いサイトはユーザーファーストではないと評価されてしまいます。
ページ表示速度の良し悪しは、直帰率や離脱率として定量的なデータで判断することができます。また、Googleはこれらの定量的なデータをもとにサイトを評価しランキングを行うため、ページの表示速度はSEOに影響すると判断できます。
レンダリング速度を高めて、ページ表示速度を早くすることでユーザーにストレスを与えないユーザーファーストなサイト設計をすることができ、結果としてGoogleからも評価されやすくなります。
関連記事: ページ表示速度を早くする／Page speed insight
レンダリング速度が遅い原因
レンダリング速度はSEOにも影響をするため、速度が遅い場合には早急に改善する必要があります。正しく改善を行うためには、どのような原因でレンダリング速度が遅くなるのかを知る事が重要です。
ここでは、レンダリング速度が遅くなる主な原因について解説していきます。
サーバーの応答時間が遅い
サーバーによるネットワークの遅れで、サイト表示が遅くなることもあります。サーバーの応答時間とは、ユーザーがWebサイトに訪れ、サーバーがそれに応答する形でHTMLを返すまでの時間のことを指します。
サーバーの応答時間が遅い主な原因としては、CPUの消費、メモリ不足、アプリケーションロジック、データベースクエリ、フレームワーク、ライブラリなどが挙げられます。これらの要因をすべて調査して、ボトルネックとなっている部分を修正する必要があります。
Webサーバーもパソコンと同じように、長くつかうにつれて経年劣化で遅くなることもあります。そのため、定期的な現状把握と課題点の洗い出しが重要です。
サイト内のコンテンツが重い
ページ数が多かったり、画像や動画コンテンツが多いなどサイト内のコンテンツ重い場合などにもレンダリング速度が遅くなります。
レスポンシブデザインが主流となっている今では、PC表示とモバイル表示で同じ画像がつかわれていることがほとんどですが、PC表示で使用している画像をそのままモバイル表示でも読み込むと画像サイズが大きくなり、ページ表示速度が遅くなってしまいます。
Googleは、コンテンツサイズの推奨を1.6MBとしています。1.6MBに抑えることが難しい場合でも、極力サイズを圧縮するようにしましょう。
JavaScriptの多用
JavaScriptは、サイトに動きをつけるためのサイト制作には欠かせないプログラミング言語の1つです。JavaScriptは書けば書くほどファイルが増えていくため、その分ファイルの読み込みに時間がかかるようになっていきます。
サイトでの動きを工夫して指定することで、Webサイトのデザインが整いUI改善にもなりますが、表示速度に影響を与えることもあることを理解しておくことが重要です。
外部ファイルが重い
WEBサイトはページを表示させるとき、表示させたいページのみを読み込んでいる訳ではなく、外部ファイルをその数だけ読み込んでいます。外部ファイルとは、画像やCSS・JavaScriptなどを指します。
サイト内のコンテンツが重い原因に画像やページの量を挙げましたが、CSSなどのWebページのスタイルを指定するための言語も外部ファイルに該当します。
例えば、HTMLの要素に対してCSSでスタイルの指定を大量に行うと、CSSファイルの中身がパンパンになってしまったり、複数のCSSファイルを作成することとなってしまうため、CSSファイルを読み込むために時間がかかるという状況に陥ってしまいます。
クライアント端末のスペックが低い
ページ表示速度が遅い原因には、クライアント側の問題も挙げられます。クライアント側のインターネット環境や、使っているパソコンのOSが最新の状態になっていなかったり、不要なレジストリを蓄積したりしている場合には、ページの表示速度は遅いように感じるケースもあります。
クライアントPC側が遅い場合には、メモリの増設やディスク整理、OSのアップグレードなどの対策が必要となります。PC全体の処理速度を上げる処置を行うことで、レンダリング速度を改善することができます。
レンダリング速度を早める方法
レンダリング速度が遅くなる原因について解説しましたが、それらの原因の改善策を理解しておくことも重要です。それぞれの原因を改善するための方法について詳しく解説していきます。
サーバー環境の見直し
サーバーの応答時間が遅い場合には、サーバー自体の回線速度やCPU、メモリ数などのサーバースペックを上げることで、サーバーの応答時間を改善することができます。
また、共用サーバーを利用している場合は複数のサイトで回線を共有しているため、表示速度が遅くなる場合があります。こういった場合は専用サーバーを利用することで改善される可能性があります。
このように、サーバー環境を見直すことでサーバーの応答時間を早めることができ、レンダリング速度の改善に繋がります。
CSSやJavaScriptの最適化
WebサイトはHTMLをはじめ、CSSやJavaScriptなどの言語を用いて構築されています。
CSSやJavaScriptファイルは、ソース内の空白削除や表示に関係ない記述を省くことで最適化が可能です。
また、ページを表示するのに意味がないファイルの読み込みは避け、ページに関係がないファイルはソースから削除することで表示速度が向上します。
その他にも、ファーストビュー以外のCSSやJavaScriptは、可能な限り読み込み遅延もしくは非同期で読み込むようにすることで、速度遅延が回避できます。
このように、CSSやJavaScriptを最適化することでレンダリング速度の改善を行うことができます。
画像データを圧縮や画像の遅延読み込み
サイト内のコンテンツはページの表示速度に大きく影響するため、容量の大きい画像データは必ず圧縮するようにしましょう。画像を適切なサイズに圧縮することで、データのバイト数を大幅に節約することができ、表示速度が向上します。
また、画像の遅延読み込みも効果的です。画像の遅延読み込みとは、ブラウザの画面領域内に存在する画像のみを読み込み、画面領域外に存在する画像を読み込まないことで、画面表示を高速化する仕組みのことです。
画面のスクロール位置に応じて必要な分だけの画像を取得するため、とても効率的かつ素早く表示させることができます。
JavaScriptのファイルサイズを削減
JavaScriptnoファイル数が増えすぎた場合には、一つにまとめたり無駄な記述があれば削除したりといった対策をすることで表示速度を改善できます。本当に必要なファイルのみを読み込みこみ、ページのテンプレート毎に使用するCSSやJavaScriptファイルを読み込むようにしましょう。
また、スクロールしなくても見える範囲にレンダリングを妨げるJavaScriptへの参照が含まれている場合は、削除する必要があります。このような場合は、JavaScript を外部ファイルを使用しないインライン化することで余計なネットワークリクエストを回避できます。
表示速度が改善されない場合はブラウザ側でのキャッシュをクリア
上記で解説した方法でも表示速度が改善されない場合は、クライアント端末におけるブラウザ側のキャッシュをクリアしてみることも必要です。
キャッシュとは、一度見たWebページのデータを保存しておく仕組みを指し、次に同じページを見るときにデータの読み込みの負担を軽くすることができます。
キャッシュにより画面の表示速度が速くなりますが、キャッシュの保存容量はブラウザによって決まっています。そのため、ページの表示速度が遅い場合はブラウザ側のキャッシュが蓄積されていること場合もあります。
キャッシュが保存容量を超えてしまっている場合は、キャッシュをクリアすることでページの表示速度を改善することができます。
【まとめ】レンダリング速度は、ページの表示速度に直接関係するためSEOにおいても重要な要素となります。Googleはページの表示速度をランキング要素の1つとしているため、SEOの観点からもレンダリング速度を意識したサイト作りが重要となります。まずは、定期的にサイトのページ表示速度を確認し、遅い場合には早急に改善を行いましょう。そのためには、レンダリング速度が遅くなる原因を理解し正しい方法で改善していくことが重要です。
SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析、コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。
