【SEO対策】Core Web Vitals

core_web_vitals_score

PageSpeed Insightsに新たに加えられた指標としてWeb VItalsがある。

このWeb Vitalsは今年末か来年のサイトの評価の重要な要因となるらしい。

Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標

要約すると、ページを読み込む時、HTMLを読み込み、CSSを読み込み、DOMで整形という経てブラウザに表示されるわけだけれども、

core_web_vitals_dom

core_web_vitals_dom1

新たなルールとしてDOMの処理を評価に加えるそうだ。

core_web_vitals

Web Vitalsの指標は、上記の一番上のFCP(First Contentful Paint)は飛ばし、LCP(Largest Contentful Paint)、First Input Delay(FID)とCumulative Layout Shift(CLS)の3個ある。

上から順に

・LCPは、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表す。

・FIDは、最初の入力までの遅延を表します。

・CLSは、ページがどのくらい安定しているように感じられるかを表す。

LCPとFIDは今まで触れてきた様々な対策で合格点に達するが、CLSはCSSの書き方が重要になってくる。

※SEO - saitodev.coの他の対策を参考にする

CLSに関して、当サイトで行ってきた改修内容を整理してみる。

【SEO対策】CSSの読み込み方の変更で高速化を前提にして、HTMLの末尾で読み込むようにしたCSSの内容の内、

cls_countermeasures

ページのレイアウトの幅に関する記述をすべて、<head>内に移行した。

※移行した記述の一部

#page,
.container,
footer {
    margin-right: auto;
    margin-left: auto;
    max-width:900px;
    min-width:225px;
    overflow: visible
}

.article {
    width: 66.5%;
    float: left;
    margin-bottom: 20px
}

.sidebar.c-4-12 {
    float: right;
    width: 31.5%;
    line-height: 23px;
    margin-top: 40px
}

.content-lazy-always {
	content-visibility:auto;
}

.content-lazy {
	content-visibility:visible;
}

@media screen and (max-width:480px){
	.article {
		width:98% !important;
		padding-left:8px;
	}
	.article img {
		max-width:320px;
		height:100%;
	}
	.sidebar.c-4-12{
		width:98% !important;
	}
	.content-lazy {
		content-visibility:auto !important;
	}
}

ちなみにCSSの記述を</body>下から<head>内に移行すると、表示速度が下がり、各値が減点する。

上記の対策の意味は一旦保留にしておいて、次に各画像を下記のように変更した。

<img src="/site/storage/files16/P9090030.JPG">

を

<img src="/site/storage/files16/P9090030.JPG" width="400" height="300">

のように画像のサイズを丁寧に記述した。

※上記の対応を自動で行えるようにCumulative Layout Shiftプラグインを開発した。

CSSとimgタグの修正の修正を組み合わせ、ブラウザがHTMLやCSSを読み込んで整形する際に、最終的にレイアウトや画像をブラウザの幅に合わせて何pxで出力すれば良いのか？の計算の材料を与える事ができるようになるらしい。

画像であれば、ブラウザの幅(width)が375pxの場合に400pxの画像を読み込み出力する場合、HTMLのimgタグに400pxと記述されていて、CSSでは320pxを指定していれば、ブラウザは出力する画像のサイズを調べる処理を省く事ができ、CSSで画像の幅を直接指定していれば、幅に合わせて倍率をいくつにすれば良いのか？を調査する必要がなくなるそうなので、結果としてDOMの処理が高速化するという仕組みらしい。

core_web_vitals_lab