Web担当者にとって、「レンダリング」の理解は重要なSEO対策になります。しかし、レンダリングと聞いても様々な業界で使われており、Webマーケティングでの使われ方をイメージできない方も多いでしょう。

今回は、Webマーケティングで重要なレンダリングの意味を解説しつつ、レンダリングの仕組みも合わせて説明します。

レンダリング

レンダリングの意味

Webマーケティング業界のレンダリングは、HTMLやCSSで書かれたプログラムをWebサイトとして閲覧できる形に整える仕組みを意味しています。

インターネット上にある様々なWebサイトは、HTMLやCSSなどの言語で作られており、あらゆるブラウザを通して閲覧されています。もし、レンダリングをせずにHTMLやCSSをそのまま表示させてしまうと、私たちが普段よく見るWebサイトにはならず、プログラミング言語の羅列となってしまいます。

そこで、レンダリングによってプログラミング言語を普段から目にするWebサイトの形に変換してます。

レンダリングエンジンによって行われる

レンダリングは、レンダリングエンジンによって行われています。レンダリングエンジンとは、レンダリングを実施するために必要となるソフトウェアを指します。

Webマーケティングのレンダリングでは、Webサイトを閲覧するときにブラウザの裏側で「HTMLレンダリングエンジン」と呼ばれるものが動いています。HTMLレンダリングエンジンがHTMLやCSSで記述したプログラムを文字や画像に変換しており、ユーザーはWebサイトを閲覧できるようになります。

HTMLレンダリングエンジンは、ブラウザごとに作られているため、ブラウザの数だけレンダリングエンジンがあります。そこで、次からは代表的なレンダリングエンジンを見ていきましょう。

代表的なレンダリングエンジン

Webでは、HTMLレンダリングエンジンが使われており、ブラウザごとに様々なレンダリングエンジンが存在します。ここでは、次の4つの代表的なレンダリングエンジンをご紹介していきます。

Trident

1つ目は、Internet Explorerで動いているHTMLレンダリングエンジン「Trident」です。Internet Explorerは、今までWindowsの標準OSとして広く利用されているブラウザで、現在でも多く利用されています。

しかし、Internet Explorerは2022年6月にサポート終了と発表されたため、Tridentも利用されなくなるため注意が必要となります。

Edge HTML

2つ目は、Windowsの標準OSであるMicrosoft Edgeに利用されているHTMLレンタリングエンジン「Edge HTML」です。Windowsは、今までInternet Explorerが標準OSとして利用されていましたが、新しく代わりとして登場したのがMicrosoft Edgeです。

Edge HTMLは、Tridentを参考に作られたHTMLレンタリングエンジンであり、プログラミング言語のC++で開発されています。

Blink

3つ目は、Google Chromeで動いているHTMLレンダリングエンジン「Blink」です。Google Chromeは、Google社が提供しているブラウザで、OSに限らず幅広く利用されています。Blinkも、Edge HTMLと同様にC++で開発されています。

Webkit

4つ目は、Safariで利用されているHTMLレンダリングエンジン「Webkit」です。Safariは、iPhoneで最初からインストールされているため、iOSユーザーの方にとって馴染みの高いブラウザだと思います。

また、iOSでWebサイトを閲覧する場合には、いずれのブラウザでもWebkitがHTMLレンダリングエンジンとして動いています。

Webサイトのレンダリングの仕組み

代表的なHTMLレンダリングエンジンがわかったところで、Webサイトのレンダリングがどのような仕組みで動いているのかが気になります。

Webサイトのレンダリングは、次の仕組みで動いています。

それぞれ解説していきましょう。

検索エンジンロボットがコンテンツ情報をクロール

検索エンジンロボットとは、Web上の文字や画像などのコンテンツを周期的に取得し、データとして蓄積する検索エンジンの「Webクローラ」を指します。Webクローラは検索エンジンごとに存在し、代表的なGoogleであれば「Googlebot」呼ばれます。

ユーザーが検索をするとまず始めにGooglebotが動き、検索されたキーワードを解決する適切な検索結果を表示させます。検索結果は、SEOで評価されているWebサイトほど上位に表示されやすいため、WebマーケティングをするならGooglebotの仕組みの理解も必要です。

ブラウザがJavaScriptを実行

続いて、JavaScriptで書かれたコードをJavaScriptエンジンに引き渡し、ブラウザ上でスクリプトが実行されます。JavaScriptは、アラートを出したり、アニメーションを追加するなどの指示ができるため、JavaScriptが実行により動的なWebサイトが成り立っています。

インデックス登録

レンダリングされて表示されたWebサイトのコンテンツを検索エンジン運営元が管理するデータベースに書き込む処理が実行されます。この処理は「インデックス」と呼ばれます。

インデックス登録により、再度同じWebサイトを閲覧したときに、事前にコンテンツ取得が行われていれば、ページ読み込みをスムーズに行えます。

Webサイトのレンダリングの種類

Webサイトのレンダリングは、種類によってページを読み込んだときの挙動が異なります。Webサイトのレンダリングは、大きく次の3種類が存在します。

各レンダリングの種類を解説していきましょう。

SSR(サーバーサイドレンダリング)

サーバーサイドレンダリングは、レンダリング処理をサーバー側で行う手法を指します。一般的には、Webページを表示されるまでに次の処理がなされています。

サーバーサイドレンダリングでは、サーバー側でHTMLの生成とJavaScriptの実行をしてくれるため、クライアント側で実行する場合と比べてWebページの表示速度が早くなります。一方で、サーバー側でJavaScript実行を行うため、サーバーへの負担が大きくなってしまいます。

Prerendering(プリレンダリング)

プリレンダリングは、ビルド時に前もってサーバー側で生成されたHTMLを配置しておき、クライアント側からリクエストがあれば、生成されたHTMLをレスポンスする仕組みを指します。

プリレンダリングは事前にHTMLを生成するため、サーバーへの負担が軽くなるのに加えて、静的なためWebページの表示を高速で実現できます。サーバーサイドレンダリングとの大きな違いは、HTMLの生成をサーバーで行うのか、ビルド時に生成するかの点です。

プリレンダリングは静的なWebページとなってしまうため、Ajaxを活用した動的なWebサイトには向いていません。

Dynamic Rendering(ダイナミックレンダリング)

ダイナミックレンダリングは、処理に時間のかかるJavaScriptを使ったファイルが存在した場合に、あらかじめ静的なHTMLファイルを生成してレスポンスする仕組みを指します。

つまり、クライアント側にはそのままHTMLファイルをレスポンスしてJavaScriptを実行してもらうのに対して、Googleクローラには静的に分解して見せます。Googleクローラは、複雑なJavaScriptの読み込みに時間がかかる特徴があるため、SEO対策の一環としてダイナミックレンダリングは効果的と言えます。

Webサイトのレンダリングの課題

Webサイトを表示させるのに欠かせないレンダリングですが、いくつかの課題があります。ここでは、次の2つの課題を解説していきましょう。

クロールの課題

1つ目の課題は、文字や画像などのコンテンツを取得するクロールの課題です。検索エンジンロボットがWebサイトをクロールする際には、次の2つの課題に直面します。

robots.txtのアクセス制限

robots.txtは、Webサイト管理者がクローラーに対してクローリングの指示を与えるためのテキストファイルを指します。

robots.txtの設定内容によっては、クローラーがWebサイトのクローリングを行わず、レンダリングが行われないケースが起こり得ます。したがって、Webサイト管理者側で、クローリング対象のページを定義し、クローラーに適切な指示を送るための設定が求められます。

参考: robots.txtの概要

サーバーに負担がかかる

クロール時はWebサイトのページ数やコンテンツの量によって、サーバー側に大きな負担がかかります。したがって、クロール時の手間を省くためにも、コンテンツを取得する回数を最小限に抑えたり、キャッシュからコンテンツを取得させるなどの対応が必要です。

JavaScriptの課題

2つ目の課題は、レンダリング実行時のJavaScriptについてです。レンダリングの仕組みによっては、クライアント側ではなく、サーバー側でJavaScriptを実行するものがあります。その際には、サーバー側は限られたCPUやメモリのリソースしかつかえないため、コンテンツによってパフォーマンスの低下を招くかもしれません。

また、限られたリソースを最大限まで使用してしまうと、インデックスに悪影響を与える場合もあります。今後は、インデックスを壊さないようにレンダリングの仕組みを構築し、エラー処理などにも対応させていく必要があります。

まとめ

今回は、Webマーケティングのレンダリングの意味を解説しつつ、SEOにおけるレンダリングの仕組みも合わせて解説しました。Webのレンダリングは、Webサイトを閲覧するときにユーザーが理解できる状態にHTMLを生成してレスポンスする仕組みです。WebのレンダリングはHTMLレンダリングと呼ばれており、JavaScriptをどこで実行させるかによって種類が異なります。レンダリングはGoogleクローラとも影響し合っており、Googleに評価されるコンテンツ作りをするためにも、今回の記事を参考にレンダリングとは何かを理解しておきましょう。

 

 

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る

 

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。