Exploring Critical Rendering Path

~ Exploring Critical Rendering Path Why Performance Matters @raphamundi's

Raphael Amorim This guy seems like a nice person, but
he doesn’t. Seriously. He likes topics related to JavaScript, Python, Clojure, WebGL, Algorithms and sometimes force some git push.  Working most part of his time in useless open source projects. Works in globo.com, loves to create useful tiny modules to daily use. @raphamundi

We write the markup. . .    Then a page
comes out on the screen.

But how does the browser rendering engine work?

1# Constructing the Object Model

HTML markup is transformed into a Document Object Model (DOM)

CSS markup is transformed into a CSS Object Model (CSSOM)

CSS markup is transformed into a CSS Object Model (CSSOM) DOM and CSSOM are independent data structures

CSS markup is transformed into a CSS Object Model (CSSOM) DOM and CSSOM are independent data structures Bytes ! characters ! tokens ! nodes ! object model

<html> <head> <meta charset=“utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>The Astronaut</title>  <link href="style.css" rel="stylesheet"> </head> <body> <p>Neil Armstrong</p> <p><img src=“just-a-neil-picture.jpg”></p> </body> </html> How does the browser process this page?

3c68746d6c3ea20203c686561643ea202020203c6d65746120636861727365743d201c75746 62d38223ea202020203c6d657461206e616d653d2276696577706f72742220a20636f6e7465 6e743d2277696474683d6465766963652d77696474682c696e697469616c2d7363616c653d3 1223ea202020203c7469746c653e54686520417374726f6e6175743c2f7469746c653ea2020 20203c212d2d205374796c657368656574202d2d3e2020a202020203c6c696e6b2068726566 3d227374796c652e637373222072656c3d227374796c657368656574223ea20203c2f686561 643ea20203c626f64793ea202020203c703e4e65696c2041726d7374726f6e673c2f703ea20 2020203c703e3c696d67207372633d201c6a7573742d612d6e65696c2d706963747572652e6 a7067201d3e3c2f703ea20203c2f626f64793ea3c2f68746d6c3e <html><head>…</head>…</html>
Conversion

Tokenizing <html><head>…</head>…</html> StartTag: html StartTag: head EndTag: head EndTag: html

Lexing StartTag: html StartTag: head EndTag: head EndTag: html html
head *NodeType p body meta

DOM Mount head p body meta html link “Neil Arm…”
img

While browser was mounting the DOM. It encountered a link
tag in the head section referencing an external CSS

Then the Browser make a request for this resource.

We repeat the HTML process, but for CSS instead of
HTML: Bytes ! characters ! tokens ! nodes ! CSSOM

2# Render-tree Construction

The DOM and CSSOM trees are combined to form the
render tree

render tree Render tree contains only the nodes required to render the page

render tree Render tree contains only the nodes required to render the page Layout computes the exact position and size of each object

Captures all the visible DOM content on the page and
all the CSSOM style information for each node

head p body meta html link “Neil Arm…” img DOM

p img body CSSOM color: black background: #FFF color: black
*font-size: 14px *user agent styles *font-weight: normal padding: 10px

img body Render Tree color: black background: #FFF color: black
*font-size: 14px *user agent styles *font-weight: normal padding: 10px p “Neil Arm…”

3# Layout & Paint

Layout   Calculate nodes exact position and size within the
viewport of the device

Then all of the relative measurements are converted to absolute
pixels on the screen

Captures the exact position and size of each element within
the viewport <html> <head> <meta name="viewport" content="width=device-width,initial- scale=1"> <title>  My application  </title> </head> <body> <div style="width: 100%"> <div style="width: 50%">  JavaScript Rocks!  </div> </div> </body> </html>

Captures the exact position and size of each element within
the viewport <html> <head> <meta name="viewport" content="width=device-width,initial- scale=1"> <title>  My application  </title> </head> <body> <div style="width: 100%"> <div style="width: 50%">  JavaScript Rocks!  </div> </div> </body> </html> viewport size=device-width JavaScript Rocks!

After know what nodes are visible, and get their computed
styles and geometry, becomes Paint stage.

Paint   Converts each node in the render tree to
actual pixels on the screen

Time required to perform render tree construction, layout and paint
varies based on the size of the document, the applied styles, and the device it is running on.

rendering Document Object Model(DOM) CSS object model(CSSOM) Render Tree Layout
& Paint In resume:

"I want to reduce my   render time."

Probably   you can’t reduce a specific element render time*
[*] depends on case by case

However you can prioritize the display of content that relates
to the current user action

Critical Rendering Path

The goal of optimizing the critical rendering path is to
allow the browser to paint the page as quickly as possible.

Optimizing which resources are loaded and in which order we
can minimize the blank screen time.

Let’s dive in a simple request. Considering a use of
regular 3G, the network roundtrip (propagation latency) to the server will cost 100ms - 750kb/s ~ 250kb/s.

<html> <head> <meta name="viewport"   content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link
href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src="main.js"></script> </body> </html>

The HTML file took ~111ms to download

Once the HTML content becomes available, the browser has to
parse the bytes, convert them into tokens, and build the DOM tree

After the DOMContentLoaded trigger, the browser starts to build the
DOM tree

1# Note:   JavaScript wait til CSS files are downloaded
and parsed

and parsed Even with inline scripts?

and parsed Even with inline scripts? Inline scripts force browsers to intends to know what that script does. It blocks the CSS parse if it's placed above link or style tags

2# Note:   Images doesn’t block the initial render of
the page (including domContentLoaded event).

When we talk about the critical rendering path we are
typically talking about the HTML markup, CSS and JavaScript

More critical content is related with above the fold, page-loaded
and server-side rendered.

Less critical content is related with below the fold, lazy-loaded
and client-side rendered.

How I improve it?

Make critical assets as small as possible by minifying and
compressing both the html and css (obfuscation process)

Asynchronous strategies to unblock the parser

Async keyword

Specifies that the script will be executed asynchronously as soon
as it is available     (only for external scripts)

href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js"></script> </body> </html>

href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js"></script> </body> </html> DOMContentLoaded: 1.73s

href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js” async></script> </body> </html>

href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js"></script> </body> </html> DOMContentLoaded: 191ms

Script Loaders or Defer all of JavaScript

Script Loaders E.g: Requirejs, Yepnope.js, LABjs and Nautilus.js

Pros: Specify which scripts will be loaded according to the
interaction

Pros: Specify which scripts will be loaded according to the
interaction Better script dependencies management

Who use it? The Guardian (best perf case) - Requirejs
g1.globo.com - Nautilusjs

Inline Critical CSS

A good approach is to inline only the critical css,
and downloading the remaining css async

Concatenate and minify, always.

github.com/filamentgroup/loadCSS

Remove Unused CSS

github.com/giakki/uncss

Optimize Images

github.com/imagemin/imagemin

Inline Images

Remove a request by inlining a base64 image

Be Careful: Data URIs are slow on mobile devices!

Load fonts asynchronously

Load fonts asynchronous Use a fallback while fonts load "Unlimited"
Cache Use fewer fonts, Avoid repaints

npm i fontfaceonload

npm i fontfaceonload FontFaceOnload("My Custom Font Family", { success: function()
{ document.documentElement.className.add(“my-custom-font-family”); } });

Optimize HTTP

Turn on keep-alive

GZip all the text

For god sake: Make less requests!

Optimize TCP

Increase initial TCP cwnd size

Disable slow-start restart (SSR)

For god sake: Make less requests!

Measure your metrics

developers.google.com/speed/pagespeed/insights

webpagetest.org

Thank You @raphamundi

https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/constructing-the-object-model References: https://developers.google.com/web/fundamentals/ performance/critical-rendering-path https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/render-tree-construction https://speakerdeck.com/bevacqua/ high-performance-in-the-critical-path

Exploring Critical Rendering Path

Exploring Critical Rendering Path

More Decks by Raphael Amorim

Other Decks in Programming

Featured

Transcript