Speed up! Critical CSS to the rescue

Speed up! TO THE RESCUE CRITICAL CSS TO THE RESCUE
CRITICAL CSS Speed up!

Hola! Hola!

Hola! Hola! I’m Ami Reynoso I’m Ami Reynoso

Hola! Hola! I’m Ami Reynoso I’m Ami Reynoso Frontend dev
at Mercado Libre Frontend dev at Mercado Libre

over my own needs as a developer USER FIRST Most
importantly, and above all, I will put the needs of the over my own needs as a developer Most importantly, and above all, I will put the needs of the USER FIRST - A Front End Engineer’s Manifesto - A Front End Engineer’s Manifesto

happy users happy users

happy users happy users FAST WEBSITE FAST WEBSITE

FAST WEBSITE ? FAST WEBSITE ?

loads literally fast FAST WEBSITE ? FAST WEBSITE ? loads
literally fast

loads literally fast user perceives it loads fast FAST WEBSITE
? FAST WEBSITE ? loads literally fast user perceives it loads fast

perception perception

1993 · Jakob Nielsen 1993 · Jakob Nielsen

LIMITS IN PERCEPTION 1993 · Jakob Nielsen 1993 · Jakob
Nielsen LIMITS IN PERCEPTION

0.1 seconds 0.1 seconds

0.1 seconds 0.1 seconds 1 second 1 second

0.1 seconds 0.1 seconds 1 second 1 second 10 seconds
10 seconds

Rendering path Rendering path

WTF? Rendering path Rendering path WTF?

What are we talking about? What are we talking about?

click here!

click here! type URL

click here! type URL events events

What is it really? What is it really?

1 NETWORK REQUEST NETWORK REQUEST 1 ~ 600 milliseconds ~
600 milliseconds 2 SERVER RESPONSE 2 SERVER RESPONSE

3 HTML PROCESSING & DOM BUILDING HTML PROCESSING & DOM
BUILDING 3

4 CSS PROCESSING & CSSOM BUILDING CSS PROCESSING & CSSOM
BUILDING 4

5 RENDER TREE RENDER TREE 5

6 LAYOUT LAYOUT 6

7 PAINT PAINT 7

How can we optimize this? How can we optimize this?

➔ Bundle your assets up! ➔ Use resource hints ➔
Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up!

Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up! ➔ Use resource hints

Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up! ➔ Use resource hints ➔ Don’t block the rendering path!

Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up! ➔ Use resource hints ➔ Don’t block the rendering path! ➔ Minify & gzip

✔ Critical Rendering Path ✔ Critical Rendering Path

✔ Critical Rendering Path ✔ How to optimize it ✔
Critical Rendering Path ✔ How to optimize it

✔ Critical Rendering Path ✔ How to optimize it CSS?

User perception ✔ Critical Rendering Path ✔ How to optimize it CSS? User perception

to the rescue! Critical CSS Critical CSS to the rescue!

What is Critical CSS? What is Critical CSS?

necessary to our above the fold necessary to our above
the fold

.my-awesome-header { background-color: #eee; font-size: 1.5em; color: #111; } .my-awesome-container
{ max-width: 90%; font-size: 1.2em; color: #333; } .my-awesome-title { font-size: 1.3em; font-weight: bold; }

<head> <head> .my-awesome-header { background-color: #eee; font-size: 1.5em; color: #111;
} .my-awesome-container { max-width: 90%; font-size: 1.2em; color: #333; } .my-awesome-title { font-size: 1.3em; font-weight: bold; }

But, what about the rest of my styles? But, what
about the rest of my styles?

Javascript magic! But, what about the rest of my styles?
But, what about the rest of my styles? Javascript magic!

What will we achieve? What will we achieve?

page loading perception page loading perception

What to keep in mind? What to keep in mind?

1 JAVASCRIPT DEPENDENT JAVASCRIPT DEPENDENT 1

2 BROWSER CACHE BROWSER CACHE 2

2 BROWSER CACHE BROWSER CACHE 2 Store if user has
styles! Store if user has styles!

How to... How to...

How to... load the styles How to... load the styles

➔ Loading script ➔ Resource hint: preload ➔ Check for
cookie and store ➔ <noscript> fallback! ➔ Loading script

window.addEventListener("load", function(event) { // create element var elem = document.createElement("link");
// make it a stylesheet link elem.setAttribute("rel", "stylesheet"); elem.setAttribute("type", "text/css"); elem.setAttribute("href", "path/to/full/styles.css"); // append to head document.querySelector("head").appendChild(elem); });

cookie and store ➔ <noscript> fallback! ➔ Loading script ➔ Resource hint: preload

cookie and store ➔ <noscript> fallback! ➔ Loading script ➔ Resource hint: preload ➔ Check for cookie and store

<?php if(isset($_COOKIE["css"]) && $_COOKIE["css"] = $version): ?> <link href="styles.<?php $version;
?>.css" rel="stylesheet"> <?php else : ?> <style> /* inlined Critical CSS */ </style> <script> var version = <?php $version; ?>; function cookie(key, value, expires) { … } if(!cookie("css") || cookie("css") !== version) { // load styles cookie("css", version); } </script> <?php endif; ?>

cookie and store ➔ <noscript> fallback! ➔ Loading script ➔ Resource hint: preload ➔ Check for cookie and store ➔ <noscript> fallback!

How to... generate the styles How to... generate the styles

preprocessor + cool codebase preprocessor + cool codebase auto-magic tools
auto-magic tools

preprocessor + cool codebase auto-magic tools auto-magic tools preprocessor +
cool codebase

at Mercado Libre Critical CSS at Mercado Libre Critical CSS

Where we did it Where we did it

Mercado Libre Mercado Libre

Mercado Libre Mercado Libre Search listings Search listings

Mercado Libre Mercado Libre Search listings Search listings Web mobile
Web mobile

How we did it How we did it

generated online generated online

+ hand-crafted process generated online generated online hand-crafted process +

+ ~20 different bundles hand-crafted process generated online generated online
hand-crafted process ~20 different bundles + + +

= huge mess huge mess =

in the long run = huge mess in the long
run huge mess =

What this meant for us What this meant for us

awesome results! * awesome results! *

* even coming from a bad experience! awesome results! *
awesome results! * * even coming from a bad experience!

before after after before

load time perception -56%

+2% load time perception -56%

-56% +2% load time perception conversion rate

critical css critical css

speed optimizations speed optimizations + + critical css critical css

= WIN! speed optimizations speed optimizations + + critical css
critical css WIN! =

Thank you! Thank you! [email protected] [email protected] @bakery @bakery

Speed up! Critical CSS to the rescue

Speed up! Critical CSS to the rescue

Other Decks in Programming

Featured

Transcript