Web Performance Workshop

by Diego Cardozo @ JSConfUY 2016

View the Project on GitHub diegocard/web-performance-workshop

Unblock rendering

Goal: progressive rendering

Progressive rendering

Critical Rendering Path

The Critical Rendering Path contains follows these steps (in order):

  1. Parse the HTML and construct the DOM
  2. Fetch the CSS and construct the CSSOM
  3. Combine the DOM and CSSOM to create the render tree
  4. On the layout step elements are positioned on the page taking viewport size into account
  5. Finally, there’s the paint step

Important notes

Debugging the timeline

Use media queries on link tags

By default CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">

Inline CSS

> gulp inline-css

[00:41:51] Using gulpfile ~\Documents\GitHub\web-performance-workshop\gulpfile.js
[00:41:51] Starting 'inline-css'...
[00:42:12] Finished 'inline-css' after 20 s

Inline JS

By default, JavaScript execution is parser blocking

When the browser encounters a script in the document it must pause DOM construction, hand over the control to the JavaScript runtime and let the script execute before proceeding with DOM construction

Just like before, sometimes we want to inline critical JavaScript to prevent roundtrips