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 Critical Path
Search
Valerio Sillari
October 13, 2017
Technology
1
27
Css Critical Path
Some info about what I got about Critical Path, and some tools and ideas how to solve it
Valerio Sillari
October 13, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
チーム単位で保守性を高める:独自指標と向上にむけた実践
tarappo
0
300
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
OpenTelemetry実践 はじめの一歩
taxin
0
310
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
480
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
KTC_DBRE.pdf
_awache
0
290
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
やっていきテスト
k6s4i53rx
0
160
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.3k
期待しすぎずに取り組む両面 TypeScript
shozawa
2
300
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Statistics for Hackers
jakevdp
789
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Product Roadmaps are Hard
iamctodd
43
9.6k
Embracing the Ebb and Flow
colly
78
4.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
The Mythical Team-Month
searls
214
42k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Navigating Team Friction
lara
177
13k
Design by the Numbers
sachag
274
18k
Scaling GitHub
holman
456
140k
Transcript
CSS Critical Path by Valerio Sillari October 2017
Back to basics
How Browser Works
Browser Step for rendering/displaying a page Build DOM Build CSSOM
Render Tree Layout Paint
And CSS and JS?
How Browsers display a page Build DOM Build CSSOM Render
Tree Layout Paint Get CSS Get JS
Javascript is parser blocking When the parser finds a script
tag in the document, it blocks DOM construction (step 1), then waits for the browser to get the file and for the javascript engine to parse the script
How Browsers display a page Build DOM Build CSSOM Render
Tree Layout Paint Blocked Get CSS Get JS If we have some JS tag into the document, during the building DOM, we block the page
That’s why JS usually is at the bottom of body
You load first all the DOM, then load the js so it will not block it
BUT ...
JS is also stringly connected with CSS So it needs
also to have all the css already loaded in the CSSOM moment...
JS and CSS Build DOM Build CSSOM Render Tree Layout
Paint Blocked Get CSS Get JS JS need not only to be requested, but also parse ALL the css if exist PARSE CSS RUN JS
Solution: It doesn’t block DOM construction and don’t have the
need to wait for the CSSOM event Async scripts
How Browsers display a page Build DOM Build CSSOM Render
Tree Layout Paint Get CSS Async JS
And CSS?
For building the CSSOM (step2), the CSS parser goes through
each selector (tag, class or ID) in the CSS file and gets the styles attributed to it.
How Browsers display a page Build DOM Build CSSOM Render
Tree Layout Paint Blocked Get CSS Get JS Until we do not have ALL the css file loaded and parsed, we can not start to build the CSSOM.
CSS is render blocking The browser blocks page rendering until
it receives and processes all the css files
How Browsers display a page Build DOM Build CSSOM Render
Tree Layout Paint Blocked Get CSS Get JS Until we do not have ALL the css file loaded and parsed, we can not start to build the CSSOM.
None
CSS is the “enemy”
That’s Critical Path Css
Solutions?
Solution 01: They does not block the render of the
page! Inline styles
None
Technically, inline styles not required any css file with extra
request, and they not “block” the DOM and CSSOM
But basically impossible to maintain ...
Solution 02: Load first only basic code, then the rest
Split CSS
“Ideally, the ATF (above the fold) content should fit under
14KB — this allows the browser to paint the page after just one round trip…” https://developers.google.com/speed/docs/insights/mobile Google Page Speed
So you have 14kb to use, for delivering the DOM
+ CSS. You can split the CSS in 2 files: - The basic stuff (above the fold) - The Fanciness Stuff
Load CSS by Filament Group
Solution 03: Set inline styles with automation Inline Styles by
Task Runner
Critical by Addy Osmani
Solution 04: Not load CSS at all (until JS will
do it for you) CSS in JS
React / Angular / Vue etc... They take care of
the CSS using JS A quick example: https://vue-nuxt-test-valerio.herokuapp.com/
The Future? JS take care of the rendering of the
page. No DOM + CSS loaded at first New Css Logic
The end. Thanks. github.com/valeriosillari @stellavalerio