Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSのパフォーマンスがサイトに与える影響
Search
takeru.wada
December 13, 2019
Design
2
4.8k
CSSのパフォーマンスがサイトに与える影響
takeru.wada
December 13, 2019
Tweet
Share
Other Decks in Design
See All in Design
Product-Writing
aguringo
6
2.8k
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
130
The Fight
euralisw
0
110
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
文化に寄りそうデザイン
recruitengineers
PRO
4
910
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.9k
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
590
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
740
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
630
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
The Invisible Customer
myddelton
114
12k
Become a Pro
speakerdeck
PRO
11
4.5k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Building an army of robots
kneath
300
41k
Web development in the modern age
philhawksworth
202
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Transcript
CSSのパフォーマンスが サイトに与える影響 パーソルキャリア株式会社 UXデザイン部 Webディレクター&フロントエンジニア 和田 武
自己紹介 パーソルキャリアの転職サービスにて SEO、ASO、Webサイトパフォーマンス改善、 ABテストディレクション&実装などを担当 和田 武 最近の週末はほぼガンプラを作っています
唐突ですが「Search Console」 というツールをご存知ですか?
Search Console Google 検索上のウェブサイトの掲載状況を最適化するための ツールで、検索上問題のあるページのアラートも上げてくれる https://webmaster-ja.googleblog.com/2018/01/introducing-new-search-console.html Googleウェブマスター向け公式ブログより引用
そこに今年11月サイト速度に関するレポートが 追加されました https://www.suzukikenichi.com/blog/speed-report-is-now-available-for- everyone-in-search-console/ 海外SEO情報ブログより引用
FCP(First Contentful Paint) FID( First Input Delay) 以前よりGoogleのパフォーマンス計測ツールの「Page Speed insights」や「Lighthouse」で計測は可能
ここでは以下2つの指標がレポートされています
LCP(Large Contentful Paint) CLS (Cumulative Layout Shift) さらに2つの指標が追加予定であると発表されて います。 Search
Consoleでの指標となるかは不明。LCPはすでにChrome78の開発者ツールで確認可能
やっとCSSのお話し
CSSは先ほどまでに出てきた指標に どれくらい影響する?
やってみた 最終的に描画されるページ A. 要素への装飾(書換無し) B. 要素への装飾(10,000回書換)
FCP 133ms LCP 133ms FCP 246ms LCP 246ms
再レイアウトが増えると パフォーマンス指標は下がる (当たり前) [実験としてダメな部分] ・1個しか要素がないので、FCPとLCPが同じ ・FIDとCLSが計測できていない(javascriptを入れてみたがうまく動かず。。。)
CSSの継承はとても便利だし、 設計のキモでもありますが、、、 過度な継承が積み重なると、 パフォーマンスが劣化し、 Googleからの評価が下がり検索順位が落ちて サイトの流入数が下がるという 大きな影響を与えてしまうかもしれない
ちなみに前述の指標が低いと、 評価と順位が下がる、 直接的な関係性ではなく、 極端に遅いと判断されなければよい。
ちゃんと考えて、 少ない継承で保守性の高い CSS設計していきたいですね (自分への言葉)
ありがとうございました!
パーソルキャリアは仲間を募集中!