AdSenseと画像のCLS(Cumulative Layout Shift)の改善
文字サイズ調整
▽
PageSpeed InsightsでCLSを確認
(´・ω・)_／ lazysizes(画像の遅延表示機能)の影響で実際にどこがズレるか分かるPageSpeed Insightsでのレンダリング中の画像表示直前直後を並べたスクリーンショットがこちら。 画像はlazysizesによって遅延表示されるため、先に軽量ダミー画像とテキストが表示され、遅れてメインの画像が表示されます。 2つの画面を比較すると、先に表示されたテキストがメイン画像の表示と同時に少し上にズレます。 これがコアウェブバイタルのCLSとして計測されている最初に表示された位置からズレるレイアウトの移動で、ユーザーの誤クリックを誘発したり、不快に感じる要素なのでCLS(Cumulative Layout Shift)を改善してねと言うのがGoogleサーチコンソールからの警告
CLSの改善方法
<a href="画像URL" target=”_blank” rel=”noopener”><img class="lazyload" src="軽量ダミー画像URL" data-src="画像URL" alt="画像説明" width="画像の幅"></a>
(´・ω・)_／ Chrome標準機能となったloading="lazy"ではなく、lazysizes、lazyload等で画像の遅延表示をしている場合のSEOを考慮したFC2ブログの画像表示部分の中身は大体こんな感じ。 画像の表示サイズはwidth(画像の幅)しか指定されていません<a href="画像URL" target=”_blank” rel=”noopener”><img class="lazyload" src="軽量ダミー画像URL" data-src="画像URL" alt="画像説明" width="画像の幅" height="画像の高さ"></a>
不足していたheight(画像の高さ)を追加してレイアウトがズレるかどうかPageSpeed Insightsで検査してみましたが、CLSは改善せず数値も一切変わらず<a href="画像URL" target=”_blank” rel=”noopener”><img class="lazyload" src="ダミー画像URL" data-src="画像URL" alt="画像説明" style="width:画像の幅px;height:画像の高さpx"></a>
続いてamazonのバナー等に使用されているstyleで画像の幅と高さを指定
(´・ω・)_／ 正常にアスペクト比4:3で表示されている右の画像と比較すると、styleでheight(画像の高さ)を指定した左の画像は横幅だけ縮小されたアスペクト比1:1の歪んだ画像としてレンダリングされてしまい、CLSが改善するも完全な失敗。 となると、画像がレンダリングされていない段階でアスペクト比を維持しておく必要があるので、テンプレートのCSSに以下を追加
.asp {
width:100%;
height:0;
position:relative;
overflow:hidden
}
.asp img {
width:100%;
height:100%;
top:0;
left:0;
object-fit:cover;
object-position:center;
position:absolute
}
(´・ω・)_／ アスペクト比関係と分かるようにaspとしていますが、aspectでも何でも任意の文字でOKwidth:100%;
height:0;
position:relative;
overflow:hidden
}
.asp img {
width:100%;
height:100%;
top:0;
left:0;
object-fit:cover;
object-position:center;
position:absolute
}
<div style="max-width:画像表示幅px"><div class="asp"style="padding-bottom:calc(3/4*100%)"><a href="画像URL"><img class="lazyload"src="軽量ダミー画像URL"data-src="画像URL"alt="画像説明"></a></div></div>
(´・ω・)_／ 記事内の画像幅はmax-widthで指定するのでこれまで使用していたwidth="画像の幅"部分は削除し、前後を上記の通り2つの<div>で囲んで追記。 アスペクト比4:3の画像なので3/4と指定していますが、3:2なら2/3。 16:9なら9/16。 スクリーンショット等の場合はアスペクト比が一定ではないので約分するか、素直に元画像の幅と高さを入れます(´・ω・)っ コピペはこちら
画像が表示される直前のスペースも4:3のアスペクト比で確保され、遅れて表示された画像もアスペクト比4:3で問題無くレンダリング(目の錯覚で画像表示前のテキスト部分が若干上にあるように見えています)
Web Vitals Crome拡張でCLSの最終チェック
- CLS に関する問題: 0.25 超
- CLS に関する問題: 0.1 超
を合格するには実際のCLSの測定に必要なGoogle Chromeでブログページを閲覧した訪問者からのデータが必要になりますが、自身で閲覧したデータでも問題ないので、CLSの最終チェック用にCore Web Vitalsを測定できるCrome拡張を導入します
- LCP(Largest Contentful Paint)
- FID(First Input Delay)
- CLS(Cumulative Layout Shift)
を全て計測可能
アドセンスで発生するCLSの改善方法
AdSenseのコードも画像同様にheight(高さ)を設定すれば良いのですが、自動広告は個別に設定できないため、手始めに自動広告をOFFに設定し、全て手動広告に切り替えます。 モバイル(スマホ)の縦画面で表示されるAdSenseはアスペクト比1:1に近い物がほとんどのレスポンシブ広告で、モバイル(スマホ)の画面サイズは大小さまざま
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script><ins class="adsbygoogle"style="display:block;height:191px"data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"data-ad-slot="xxxxxxxxxx"data-ad-format="auto"data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
(´・ω・)_／ AdSenseのコードは、style部分にheight:191pxを追加するだけ
SSL化(https化)から始まり、レスポンシブデザイン(スマホでもPCでも同じように表示されるテンプレート)、Lazyload(画像の遅延表示)、Core Web Vitalsと、ワードプレスならともかく、無料のFC2ブログ、ライブドアブログ、アメブロ等は膨大な改善作業を度々求められる近年。 永遠に続きそうな気配なので、ブログを続けていく方はHTMLやCSSだけでも勉強して生き残れるようになりましょう(´・ω・｀)
この記事をチェックした人はこんな記事もチェックしています
コメント
いつもこちらにもご訪問いただき有難うございます！
有料ドメインが１１月末で切れるので、今までの中身を他所に移動中です。いろいろこだわれればもっと充実させられるのになあと思いつつそこまでの技術がないので、単なるコピペに終わっております…（汗）。
2020-09-19 22:37 畑かぶら URL
Re: いつもこちらにもご訪問いただき有難うございます！
2020-09-20 10:38 FUCHS URL