DCLとFCPはSEOにどう影響するのか?| Webパフォーマンス指標

DCLとFCPはいずれも、GoogleがWebページのパフォーマンスを評価する際に使用する重要な指標です。これらの評価指標は、単にページの合計読み込み時間または最初のバイトまでの時間(TTFB)を測定するよりも詳しい情報が得られます。

学習目的

この記事を読み終えると、以下のことができるようになります。

  • DCLとFCPの定義
  • ブラウザがドキュメントオブジェクトモデル(DOM)をどのように使用するかを理解する
  • これらのパフォーマンス評価指標によるSEOの影響

関連コンテンツ


さらに詳しく知りたいとお考えですか?

是非、Cloudflareが毎月お届けする「theNET」を購読して、インターネットで最も人気のある洞察をまとめた情報を入手してください!

当社がお客様の個人データをどのように収集し処理するかについては、Cloudflareのプライバシーポリシーをご確認ください。

記事のリンクをコピーする

DCLとは?

DCLはDOMContentLoadedの略で、重要なWebページのパフォーマンス指標です。DCLは、ブラウザがクライアント側のスクリプトを実装する準備ができた時点を測定します。より専門的な言い方をすれば、DCLは、DOM(ドキュメントオブジェクトモデル)がブラウザによって集められ、JavaScriptの実行を妨げるスタイルシートがない場合にWebページを読み込むプロセスの時間です。(これらの用語を理解するには、以下の「Webページの仕組みに関する簡単な説明」を参照してください。)

DOM(ドキュメントオブジェクトモデル)とは?

DOMは、Document Object Modelの略称です。ドキュメントオブジェクトモデルは、Webページの構造を示すもので、ポイントとサブポイントから成り、研究論文の「要旨」とよく似ています。DOMを考える別の方法は、DOMを木に例えるものです。ページ自体を根に見立て、異なるHTML要素に枝分かれしていくものと考えます。

ドキュメントオブジェクトモデル

DOMContentLoadedは、ブラウザが受信したHTMLコードから、ページのこのモデルを生成したことを意味します。これは、スクリプトを実行し、動的コンテンツを表示する準備ができていることも意味します。

FCPとは?

First ContentfuL Paint(FCP)は、もう1つの重要なパフォーマンス指標です。FCPは、DOMの最初のコンテンツがレンダリングされる時点を測定します。つまり、最初のHTML要素が表示される時点です。ここでいうHTML要素とは、テキスト、画像、または、ユーザーがWebページの一部であると認識するものすべてです。First Contentful Paint(FCP)は、ページの任意の要素がレンダリングされる時点を測定するFirst Paint(FP)とは異なります。

「最初」の何かを測定するパフォーマンス指標は他にもいくつかあります。たとえば、最初のバイトまでの時間(TTFB) は、Webサーバーからの最初のバイトがブラウザに到達した時点を測定します。一方、FCPは、ページが正常に読み込まれ始めていることをユーザーが確認できる最初のポイントを測定します。Webパフォーマンスに対するユーザーの認識は、Webサイトでのユーザーのエンゲージメントを維持するために重要ですが、ユーザーの視点から見ればTTFBはほぼ無関係です。

DCLとFCPはSEOにどのように影響するか?

Webサイトの速度は、確かなSEO(検索エンジン最適化)戦略の重要な部分です。パフォーマンスは、Googleの検索エンジンのランキングにとって特に重要な要素です。DCLとFCPは、Googleがパフォーマンスの評価で重視する2つの指標であり、Google PageSpeed Insightsは開発者がそれらを測定する場合に役立ちます。(Googleでは、これらの2つのパフォーマンス指標が検索ランキングにどの程度影響するかの詳細については公表していませんが、これらは確実に考慮されます)。

開発者は、サイトのこれらのパフォーマンス指標を改善するために、いくつかの手順を実行できます。キャッシングCDNを活用することは、DCLおよび FCP時間を改善するための2つの重要な手順です。

CloudflareはDCLとFCPをどのように改善しますか?

Cloudflare CDNは、世界中の場所にコンテンツをキャッシュすることでWebサイトを大幅にスピードアップし、HTTP要求に迅速に応答できるようにします。その結果、ブラウザはHTMLページをより迅速に受信し、両方の指標を改善します。

Webページの仕組みに関する簡単な説明

Webページは、HTMLコード、CSSコード、およびJavaScriptコードの組み合わせで構成されています。ブラウザがWebページを要求すると、関連するWebサーバーは、HTMLファイルを送信します。そのファイルには、ブラウザが個別に要求する必要があるアセットを除き、すべてのCSS、JavaScript、およびその他のアセットのリストが含まれます。

  • HTML(ハイパーテキストマークアップランゲージ)は、コンテンツの表示方法や他のアセットの要求方法をブラウザに提供するコードです。
  • CSS(カスケーディングスタイルシート)は、HTMLコンテンツの表示方法とWebページのレイアウト方法に関する詳細な指示を提供するコードです。
  • JavaScriptは、HTMLコンテンツを取得し、特定の指定された条件が満たされた場合にそれを変更することができるプログラミング言語です。さらに、JavaScriptは、3Dレンダリング、ゲーム、その他の技術的に複雑なアクティビティなど、より複雑なタスクに使用できます。

HTMLファイルには、ページに表示されるコンテンツ、そのコンテンツの表示方法、画像などその他のコンテンツを他のソースから読み込む手順が含まれています。HTMLファイルはCSSファイル(スタイルシート)と、さらに詳細な指示があるJavaScriptライブラリにリンクします。ブラウザはそのコードを取得、解釈し、結果としてWebページを表示します。

ほとんどのブラウザでは、ブラウザが解釈しているHTMLファイルを表示することが可能で、これは任意のWebページ上を右クリックし、ドロップダウンメニューで「ページソースを表示」を選択すると表示されます。HTMLファイルは新しいタブで開きます。ファイルのテキストはほとんどの場合、<!DOCTYPE html>ではじまります。