CLSを改善してGoogleスコアを大幅に改善した修正点の解説

CLSを改善してGoogleスコアを大幅に改善した修正点の解説

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

#155 CLS対策上級編

WEB制作

コアWEBバイタルの1つ、CLSを改善するためにやった対策の解説記事です。 CSSのインライン化とGoogle Adcenceの自動広告と手動広告の遅延読み込みを行うことでPageSpeed Insightsとサーチコンソールの指標が大幅改善!

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ

CLSのズレの原因になるCSSをインライン化する

CLS対応の続きです。
前回の記事を未読の方はこちらもぜひ!

CLS(Cumulative Layout Shift)を改善するべくimgタグにwidthとheight属性を追加して、Loading画像を用意したのに、まだ目視でレイアウトのズレが発生していました。
1stビューのコンテンツにCSSがレンダリング直後には効いていないために発生していることが原因でした。

なんでCSSが効かないかといいますと、WEB表示速度改善の対策で、CSSの一部を遅延読み込みさせていたことが原因です。

↑この時にやった対策がね、CLSの足かせになるとは思いもよらなかったですね。

GoogleサーチコンソールのWEB指標
CLSの発生個所

CSSをインライン化してCLSをなくす

CSSの遅延読み込みを行う要素を見直して、ファーストビューに使われるCSSはもちろん、共通で使うCSSをすべてインライン化しました。

外部読み込みしてるCSSを全部インライン化してやろうかと思ったんですけど、そうすると無駄なCSSの読み込みが増えて、表示速度に影響が出てしまうので、絶対に使う共通パーツのみをCSSのインライン化したと。

CSSのインライン化とは

CSSを書くときは「.css」というファイルを作って、<link rel="stylesheet" href="common.css">の用にCSSファイルを読み込ませて使います。

これをCSSの外部読み込みと言います。

こうやって使うのが当たり前だったんですけどね、WEBの表示高速化という観点から、ページをスクロールさせずに見える範囲のCSSはインラインで書けよ。
とPageSpeed Insightsに怒られるので、インライン化で書くようになりました。

なので、このサイトのHTMLソースを見るとぐちゃぐちゃで気持ち悪くなります。
ただ、それは人間の目で見たときの話で、コンピュータが解読するには都合の良い書き方になっていると。

ひと昔前にこんな書き方したら、職場の先輩に怒られそうです。ソースが汚ねぇと。

メンテナンス性を確保しつつCSSをインライン化させる

CSSをHTMLソース内に直接記述すると、CSSの変更が入った時にすべてのHTMLのソースを変更しなくてはならなくなるので、PHPでCSSを記述してメンテナンス性を確保しました。

ドリームウィーバーのSCSSの書きだし機能を使って、SCSSでスタイルシートを作り、出力されたCSSをコピーしてPHPに張り付けます。
そのPHPをHTMLから外部読み込みさせるという手法です。

CSSの管理方法
CSSの管理方法

PHPを外部読み込みするのとCSSの外部読み込みで何が違うのよ?
と思われる方もいるかもしれませんが、PHPはサーバーサイドで処理されるので、ブラウザで見るときにはHTML内に記述された状態になります。

CSSに変更があった場合、直接CSSが修正されないめんどくささはあるものの、CLSは改善され、表示速度の向上も担保できたので、当面はこの方法でいこうと思います。

Google Adcenceの広告エリアようにエリアを確保する

これでほぼCLS対策は完了したわけなんですが、最後の難関、Adcenceの広告が読み込まれるとCLSが発生してしまいます。

これはGoogleさんサイドの問題なんだらかそっちでなんとかしてくれよ、そういう強い思いはあるものの、現実問題として起きているので対処しました。

手動広告の場合はあらかじめエリアを確保

私のサイトは手動広告と自動広告の両方を掲載しています。
一応テストしたら自動広告あったほうが収益上がるって言われたので、そうしてるんですがあんまり変わらない気もするですけどね。

手動広告の場合、自分の意図した位置に広告が表示されるので、広告の出るサイズもある程度予測がつきます。

なのでそれに合わせた要素の高さと幅を用意しておけばよいと。

私のサイトのPCの広告サイズは高さが280px 横幅が1200px(サイトの固定最大サイズの横幅)で表示されるので、

.h280 {
  min-height: 280px;
  height: 280px;
  text-align: center;
  margin: auto;
}
	

こんな感じでPC広告の表示エリアを用意しました。

スマホの場合はこんな感じ

.h280 {
  min-height: auto;
  min-height: 300px;
  width: 100%;
  height: auto;
}	
	

これで手動広告の場合はCLSが発生しなくなりました。

問題は自動広告なんですよねぇ。

Googleの自動広告でCLSを発生させない方法

ここから先の話は、多少リスクがあり、Googleは推奨していない方法になるので、マネする際は自己責任でお願いします。

なにをやったかというと、Google広告の遅延読み込みという荒業で対応しました。

いろいろググった結果、すごく参考になるサイトを発見しまして、そちらのコードを使わせていただきました。

読み込み中

JavaScriptのソースなどはリンク先を見ていただくのが良いかと思います。
コードの解説などもありますし、詳しい解説付きで非常にわかりやすいです。

Adcence遅延読み込みでスコア劇的改善

この広告の遅延読み込みを行うことで、PageSpeed Insightsのスコアが劇的に改善されました。
とくにモバイルで。

第三者サイト由来の減点が一気に無くなって、サイト本来の実力で評価されるようになりましたよね、多分。

遅延読み込みなし モバイルスコア:65
遅延読み込みなし モバイルスコア:65
遅延読み込みあり モバイルスコア:99
遅延読み込みあり モバイルスコア:99

第三者サイトの読み込みを遅延読み込みにするだけで34点向上します。
結構大きな差ですよね。

ユーザーイベントがないと広告の読み込みが発生しないので、PageSpeed Insightsの採点の時には広告が読み込まれない、という寸法です。

実際にサイトを閲覧するときには、スクロールなどのユーザーアクションがあったら広告が呼び出されるので、広告自体はきちんと表示されます。

正直、PageSpeed Insightsのスコアが変わるだけで、大きくなにが変わるわけではないんですけどね、やっぱ採点されるものは高得点とりたいじゃないですか。

サーチコンソールで「要改善」とか言われるのに、「いやいや改善必要なのはGoogle Adcence広告の仕様のほうだよ!もっと表示速度の最適化しろよ!」と、やり場のない怒りで枕を濡らす日々から脱出できます。

アドセンスの遅延読み込みは問題ないのか

先に多少リスクがある、と書いたのは、Googleの広告配信がされなくなるリスクが多少なりともある、という前提で使う必要があります。
現状、とくに問題ないので大丈夫かと思いますが、仕様変更だったり、意図しない表示やデザインで広告が配信されると配信停止になる可能性があります。

これはご自身のサイトでどういう挙動をしているか、によるところなので自己責任で導入してください、としか言えないところですね。

読み込みが遅れるのでアドセンスのアクティブビュー視認可能率が下がる問題

このアドセンスの遅延読み込みを行うことで、アクティブビュー視認可能率が下がるという問題に気づきました。

ユーザーアクションが発生してから広告が読み込まれるので、ページ上部に設置した広告の場合、完全に表示される前にスクロールが発生し、アクティブビュー視認可能率が下がるようです。

アクティブビュー視認可能率が下がることのデメリットがはっきりとはわかりませんが、私の個人的な見解だとCPC、CTRが下がるという弊害があると思っています。

そのため、現在は遅延読み込みをしない設定にしております。
※スコアはめっちゃ下がる。。

あとJavaScriptの設定間違えると広告が表示されなくなると思うので、知識がない方がいじるのもあまり推奨しません。
特にワードプレスユーザーの方。

プラグインや既存のJavaScriptと競合して何かが起きるかもしれませんので。

CLS改善したけどフィールドデータとラボデータで数値が違う

こんな感じでCLS対策をほどこしてCLSはほぼほぼ解決できました。
スコアも向上していい感じになったと思っていたんですが、PageSpeed Insightsの表示がちょいと気になりました。

ラボデータとフィールドデータの差分
ラボデータとフィールドデータの差分

どちらもCLSに関するスコアを表示しているのになぜに数値が異なるのかと、疑問と不安に思っていたのですが、公式サイトのヘルプ内にその回答がありました。

読み込み中

該当箇所を引用すると、

フィールド データとラボデータが食い違うのはなぜですか?フィールド データでは遅いと表示される URL が、ラボデータでは速いと表示されることがあります。

フィールド データは特定の URL の今までのパフォーマンスについてのレポートであり、実際のさまざまな端末やネットワークの条件におけるユーザーから匿名で送られたパフォーマンス データです。
ラボデータは、一連の固定されたネットワーク条件で 1 台の端末でページ読み込みをシミュレートしたデータです。そのため、値が異なることがあります。

Google Developersより引用

要約すると、フィールドデータは複数台の端末からの結果で、ラボデータは1台の端末の結果であり、そこで差分がでる、ということでしょうね。

個人的にはラボデータで0になったからいいかと納得してます。
どっちでも合格ラインだからいいかなと。

CLS対策のまとめとその後の状況

こんな感じで手間ひまかけてCLS対策を施しました。(ここに書いてないPHPの修正などもあるんですが)

Googleのスコア上の数字と、実際にレイアウトがズレる問題が大幅に改善できたので、個人的には満足してます。

PVが増えたとか、SEOの順位が上がった、という成果的なものは何一つないんですけどね!

実感できるかどうかわからないですけど、閲覧者の方のユーザーエクスペリエンスは多少向上したはず。

CLS対策でやったことまとめ
CLS対策でやったことまとめ

こういう実験的な施策を気軽に行えるのが個人サイトの良いところですね。
WEB制作者の方は自分のサイトをもって、色々実験できる場を持っておくことをお勧めします。

このページを読んで何かの参考にでもなれれば幸いです。

WEBの表示速度改善にはこちらの書籍がオススメ

コアウェブバイタルの改善の第一歩は表示速度の改善になりますが、表示速度を改善するための本ってあんまりないんですよね。
そんな中、私が参考にした書籍がこちらです。

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門 #325

2,838円 (税込)(Amazon参考価格)

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円(税込)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728円(税込)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,300円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

2,486円(税込)

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

2,454円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

CLS対策上級編 の関連ページ

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

ロリポッププラン比較

ロリポップのプランの選び方を各プランと比較して解説

ロリポップのレンタルサーバーのプランからライトプラン、スタンダードプラン、ハイスピードプランの3つの違いをレビューしました

WEB表示速度高速化

WEBページ表示速度改善のためにやった7つ以上の施策

WEB表示速度は速いほうがページの離脱防止やユーザーの満足度向上につながるというわけで、大きいことから小さいことまでやりました

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

URLの疑似静的化

URLの疑似静的化 動的URLを静的URLにする方法

htacessを使いhtmlファイルが存在しない静的URLを生成する方法と、仕事で使った疑似URLの活用方法の紹介です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

PHPで作るカレンダー
1位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

jquery-match-height.js
2位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

SEL50F18F
3位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

Kazakiri 1枚刃のカミソリ
4位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

ノートPCスタンド
5位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

千鳥ヶ淵夜桜
6位

千鳥ヶ淵夜桜

2019年4月3日に九段下は千鳥ヶ淵の夜桜撮影をα7Ⅲでしてきました。往路は広角レンズSEL24F14GMで復路は単焦点レンズSEL50F18Fにて。

MusicBeeのレイアウト変更方法
7位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

レンズ比較
8位

レンズ比較

「ズームレンズ SEL2870」「単焦点レンズ SEL50F18F」「マクロレンズ SEL50M28」の比較検証をしました

車用スマホホルダー
9位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

α7Ⅲ 夜桜撮影
10位

α7Ⅲ 夜桜撮影

α7Ⅲを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7Ⅲのレビューです。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838
(税込)