Understanding the critical rendering path, rendering pages in 1 second

0–100 ms — Instant feel, constant flow;
100–300 ms —
Slight percetible delay;
300–1000 ms — Loss of task focus, perceptible delay;
1 s+ — Mental context switch;
10s+ — User leaves;

How does the browser rendering engine work?

Timeline recorded with Chrome DevTools

Dealing with Javascript

Optimizing the critical rendering path

…the server can send up to 10 TCP packets on a new connection (~14KB) in first roundtrip, and then it must wait for the client to acknowledge this data before it can grow its congestion window and proceed to deliver more data.

Due to this TCP behavior, it is important to optimize your content to minimize the number of roundtrips required to deliver the necessary data to perform the first render of the page. Ideally, the ATF (above the fold) content should fit under 14KB — this allows the browser to paint the page after just one roundtrip…

https://developers.google.com/speed/docs/insights/mobile#delivering-the-sub-one-second-rendering-experience

--

--

A frontend developer that can handle its dose of UX and design.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store