Demo OpenShared

OpenShared Craft3 CMS デス

PageSpeed Insight からのWeb Vitals からweb.devでCLSを知る

published: , updated: 2020-07-05

画像:PageSpeed Insight からのWeb Vitals からweb.devでCLSを知る

PageSpeed Insightで100点を目指してやってますが、パソコンで98点になり「あれっ?」ってことになりました。

「累積レイアウト変更」って何よ

Cumulative Layout Shift(CLS)ってことらしいですが、さっぱりわからんですよ。

What is a good CLS score?

To provide a good user experience, sites should strive to have a CLS score of less than 0.1. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

スコアを0.1未満にしてください。上記の続きで詳細がありますがビューポートのサイズに対してレンダリングでの動きを評価している。

  layout shift score = impact fraction * distance fraction

ざっくりまとめると

レスポンシブ対応で画像サイズの指定が曖昧になっているけど、レンダリングの計算が面倒なんだ。だからちゃんと書いてくれないかな?せめて比率がわかればストレス無く計算できるのにsrcsetで画像サイズ指定したりして!とにかくちゃんと画像サイズを用意してくれ。画像を例にしましたがとにかく読み込み時に変な動きしちゃうようなCSS止めて。

それよりMeasure は Accessibilityのチェックもできる

CLSについてはもっと勉強します。 それよりも Measure https://web.dev/measure/ はいいですね。何よりAccessibilityが考慮されている点が良いです。

画像:https://web.dev/measure/

Lighthouse - Chrome ウェブストア https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk/related

画像:Lighthouseでのチェック結果

GoogleのモバイルクローラーはDarkモードを認識してない?モバイルの検索結果からではこのサイトはブラウザの設定に関係なくlightモードで表示します。ブックマークなどからはdarkモードで表示します。何か受け渡してるってことになりますよね。