Why performance?

By Chen Hui Jing / @hj_chen

“a slowdown of 3 seconds on page load time caused a mean percentage drop of 7.9% in article views over a period of 28 days”
—Financial Times Technology Department

“53% of mobile site visits are abandoned if pages take longer than 3 seconds to load”
—DoubleClick by Google

“...led to a 40% decrease in Pinner wait time, a 15% increase in SEO traffic and a 15% increase increase in conversion rate to signup.”
—Pinterest Engineering

“...for every additional second a page takes to load, 10 per cent of users leave. ”
—BBC

Performance is a pillar of good user experience

Rendering engines 101

CSS engines — Reads HTML and CSS files and turns them into pixels on the screen

Images and explanations by Lin Clark

Parsing files into objects — Parse the files into objects the browser can understand, including the DOM

Images and explanations by Lin Clark

Apply styles and values to elements — Figure out what the elements should look like

Images and explanations by Lin Clark

Create and layout boxes on screen — Figure out dimensions for each node and where it goes on the screen

Images and explanations by Lin Clark

Paint the boxes on the screen — Paint the different boxes

Images and explanations by Lin Clark

Composite and render layers as one image — Composite the different layers into one image and render on screen

Images and explanations by Lin Clark

network
parsing
DOM
style
layout
paint
compose

How fast/slow is your site?

Images are huge

Use the right format
Always optimise images
Consider lazy-loading

CSS is render-blocking

Keep stylesheet size small
Combine & compress stylesheets

Javascript is parser-blocking

Make Javascript asynchronous
Defer loading of Javascript
Choose libraries wisely

Web fonts affect rendering speed

Limit weights and styles
Consider subsetting
Use formats with better compression
Lazy-load font files

Resources

Thank you!

https://www.chenhuijing.com

Font used is Edmond Sans, by James T. Edmondson