CSSのパフォーマンスがサイトに与える影響

Transcript

1. CSSのパフォーマンスが サイトに与える影響 パーソルキャリア株式会社 UXデザイン部 Webディレクター＆フロントエンジニア 和田 武
2. 自己紹介 パーソルキャリアの転職サービスにて SEO、ASO、Webサイトパフォーマンス改善、 ABテストディレクション&実装などを担当 和田 武 最近の週末はほぼガンプラを作っています
3. 唐突ですが「Search Console」 というツールをご存知ですか？
4. Search Console Google 検索上のウェブサイトの掲載状況を最適化するための ツールで、検索上問題のあるページのアラートも上げてくれる https://webmaster-ja.googleblog.com/2018/01/introducing-new-search-console.html Googleウェブマスター向け公式ブログより引用
5. そこに今年11月サイト速度に関するレポートが 追加されました https://www.suzukikenichi.com/blog/speed-report-is-now-available-for- everyone-in-search-console/ 海外SEO情報ブログより引用
6. FCP（First Contentful Paint） FID（ First Input Delay） 以前よりGoogleのパフォーマンス計測ツールの「Page Speed insights」や「Lighthouse」で計測は可能 ここでは以下２つの指標がレポートされています
7. LCP（Large Contentful Paint） CLS （Cumulative Layout Shift) さらに２つの指標が追加予定であると発表されて います。 Search Consoleでの指標となるかは不明。LCPはすでにChrome78の開発者ツールで確認可能
8. やっとCSSのお話し
9. CSSは先ほどまでに出てきた指標に どれくらい影響する？
10. やってみた 最終的に描画されるページ A. 要素への装飾（書換無し） B. 要素への装飾（10,000回書換）
11. FCP 133ms LCP 133ms FCP 246ms LCP 246ms
12. 再レイアウトが増えると パフォーマンス指標は下がる （当たり前） [実験としてダメな部分] ・1個しか要素がないので、FCPとLCPが同じ ・FIDとCLSが計測できていない（javascriptを入れてみたがうまく動かず。。。）
13. CSSの継承はとても便利だし、 設計のキモでもありますが、、、 過度な継承が積み重なると、 パフォーマンスが劣化し、 Googleからの評価が下がり検索順位が落ちて サイトの流入数が下がるという 大きな影響を与えてしまうかもしれない
14. ちなみに前述の指標が低いと、 評価と順位が下がる、 直接的な関係性ではなく、 極端に遅いと判断されなければよい。
15. ちゃんと考えて、 少ない継承で保守性の高い CSS設計していきたいですね （自分への言葉）
16. ありがとうございました！
17. パーソルキャリアは仲間を募集中！