Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

GoogleのCWV(Core Web Vitals)に対応するアレコレ

$
0
0
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にしとかないと見れない現象とかある。

Viewing all articles
Browse latest Browse all 8691

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>