5月からCore Web Vitalsが検索順位の決定に使われる様になりますが、lighthouseやchromeのアップデートによってテスト結果が変わったりと、色々追われています。
基本的にはフィールドデータが利用されるらしいのでラボデータはそこまで気にしなくても良いのですが、フィールドデータ無かったりするんで、やれることはやっとかなきゃって感じです。
で、色々やったのでいくつかまとめます。
ファーストビュー内の要素にcontent-visibility:auto;は設定しちゃダメ
HTMlやCSSにもよると思うんですが、これでCLSのスコアが悪化してました。
画像のwidth,height属性はアスペクト比を計算するために使う
今どき、別にwidthとheight属性なんか入れなくてもCSSでちゃんと設定してやればちゃんと画像表示されるって言うか、画像のサイズはCSSで制御してるのがほとんどだと思うんですが、サボって入れてないとCumulative Layout Shiftが起きる。
画像がロードされるまえに、そのimgの領域をどれくらい確保しておくかは、CSSのwidthかheightがautoに設定されていると、imgタグののwidth属性とheight属性を使ってアスペクト比を計算して使うらしい。
ref: https://web.dev/cls/
画像のloading="lazy"はつかい所によっては微妙
その要素がLargest Contentと判断されるとlazyにすることによって少しスコアが悪くなることがある。
slick sliderがウザい
使い方やCSSにもよるんだろうけど、めっちゃCLSのスコアが悪くなった。止めたい。
とりあえずスライダーやサムネイルのwidth属性とheight属性をちゃんと指定して、CSSやslideのjsの発火タイミングなんかをいじくってどうにかした。
Javascriptのライブラリを読み込むときはdefer属性だけじゃなくてimport()も試す
普通に<script src="https://example.com/sample.js"></script>と書くと、インタラクティブになるのが遅くなったりする。defer付けてもスコアが良くならないケースがあったので、import使ったらスコア良くなった。
あと、jQueryロードしたらすぐやって欲しい処理、他のjQuery依存のライブラリロードしないとできない処理を分けれたので良かった。
画像はwebpに変換した物を準備しておいて、webp対応ブラウザからのアクセスだったらwebp返す
とにかく普通のpngやjpgだと重いと怒られる。せっかくなので、サムネイルも自動生成するバッチ作って回した。
jpgやpngじゃなくてwebp返す処理は.htaccessとかWebサーバにやらせる。PHPとかアプリケーション側でやらん方が良い。
ChromeのDeveloper ToolsのPerformanceタブのオプションを設定する
Enable advanced paint instrumentation (slow)やWeb VitalsのチェックボックスOnにしとかないと見れない現象とかある。
