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. ”

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


Thank you!





Font used is Edmond Sans, by James T. Edmondson