Speed up! Critical css to the rescue

Speed up!TO THE RESCUE

CRITICAL CSS

TO THE RESCUE

CRITICAL CSS

Speed up!

Oi!Oi!

Oi!Oi!Sou Ami ReynosoSou Ami Reynoso

Sou Ami ReynosoSou Ami ReynosoEngenheira frontendno Mercado LivreEngenheira frontend no Mercado Livre

Oi!Oi!

- A Front End Engineer’s Manifesto

EM PRIMEIRO LUGAREM PRIMEIRO LUGARUSUÁRIOUSUÁRIO

sobre as minhas próprias necessidades como desenvolvedor.

Mais importante ainda, e acima de tudo,vou colocar as necessidades do

- A Front End Engineer’s Manifesto

Mais importante ainda, e acima de tudo,vou colocar as necessidades do

sobre as minhas próprias necessidades como desenvolvedor.

usuários felizes

usuários felizes

WEBSITE RÁPIDO

usuários felizes

usuários felizesWEBSITE RÁPIDO

WEBSITE RÁPIDO ?

WEBSITE RÁPIDO ?

WEBSITE RÁPIDO ?

WEBSITE RÁPIDO ?

carrega literalmente rápido carrega literalmente rápido

carrega literalmente rápidousuário percebe

que carrega rápido

carrega literalmente rápidousuário percebe

que carrega rápido

WEBSITE RÁPIDO ?

WEBSITE RÁPIDO ?

percepçao

percepção

1993 · Jakob Nielsen


LIMITES NA PERCEPÇAO


1993 · Jakob NielsenLIMITES NA

PERCEPÇÃO

0.1 segundos0.1 segundos

0.1 segundos1 segundo



10 segundos10 segundos1 segundo

0.1 segundos

Rendering pathRendering path

WTF?Rendering pathRendering path

WTF?

Do que estamos falando?

Do que estamos falando?

clique aqui!

clique aqui!

digite a URL

clique aqui!

digite a URL eventos

eventos

O que é realmente?

O que é realmente?

1 NETWORK REQUESTNETWORK REQUEST

1~ 600 milliseconds~ 600 milissegundos

2 RESPOSTA DO SERVIDOR

2 RESPOSTA DO SERVIDOR

PROCESSAMENTO DE HTML & CONSTRUÇÃO DE DOM

33 PROCESSAMENTO DE HTML & CONSTRUÇÃO DE DOM

PROCESSAMENTO DE CSS & CONSTRUÇÃO DE CSSOM

44 PROCESSAMENTO DE CSS & CONSTRUÇÃO DE CSSOM

5 RENDER TREERENDER TREE5

6 LAYOUTLAYOUT6

7 PINTADO7 PINTADO

Como podemos otimizar isso?

Como podemos otimizar isso?

➔ Embale seus recursos!➔ Utilize resource hints➔ Não bloqueie o caminho de

renderização!➔ Minify e gzip

➔ Embale seus recursos!



➔ Embale seus recursos!➔ Utilize resource hints




renderização!

✔ Critical Rendering Path✔ Critical Rendering Path

✔ Critical Rendering Path✔ Como otimizá-lo✔ Critical Rendering Path✔ Como otimizá-lo

✔ Critical Rendering Path✔ Como otimizá-lo CSS?


Percepção do usuário


✔ Critical Rendering Path✔ Como otimizá-lo CSS? Percepção do usuário

para o resgate!

para o resgate!

Critical CSSCritical CSS

O que é Critical CSS?

O que é Critical CSS?

necessáriopara nosso above the

fold

necessáriopara nosso 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;}

Mas, e quanto ao resto dos meus estilos?


Javascript mágica!

Javascript mágica!



O que vamos alcançar?

O que vamos alcançar?

de carregamento da página

percepçãopercepçãode carregamento

da página

O queter em mente?

O que ter em mente?

1 DEPENDE DE JAVASCRIPT

1 DEPENDE DE JAVASCRIPT

2 BROWSER CACHEBROWSER CACHE2

Conservar se o usuário játem os estilosConservar se o usuário já tem os estilos

2 BROWSER CACHEBROWSER CACHE2

Como...Como...

Como...carregar os estilos

Como...carregar os estilos

➔ Script de carregamento➔ Resource hint: preload➔ Verificar a existência de cookie

e salvar➔<noscript> fallback!

➔ Script de carregamento

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", "styles.css"); // append to head document.querySelector("head").appendChild(elem);});



➔ Script de carregamento➔ Resource hint: preload




e salvar

<?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; ?>

Como...gerar osestilos

Como...gerar os estilos

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas


código

ferramentas auto-mágicasferramentas auto-mágicas


código

em Mercado Livre

em Mercado Livre

Critical CSSCritical CSS

Onde o fizemosOnde o fizemos

Mercado LivreMercado Livre

Search listingsSearch listings


Search listingsSearch listingsWeb mobileWeb mobile


Mercado LibreMercado Libre


Como fizemosComo fizemos

gerado on-linegerado on-line

++proceso artesanal

gerado on-lineproceso artesanal

gerado on-line

~20 bundles diferentesproceso artesanal

gerado on-line

~20 bundles diferentesproceso artesanal

gerado on-line++++

grande bagunça

grande bagunça

==

a longo prazoa longo prazo

==grande

bagunçagrande

bagunça

O que isto significou para nós

O que isto significou para nós

resultados impressionantes! *


* mesmo vindo de uma má experiência!* mesmo vindo de uma má experiência!



antes

depois

antes

depois

percepção dotempo de

carga

-56%

+2%-56%percepção do

tempo de carga

-56% +2%taxa de

conversãopercepção do

tempo de carga

critical csscritical css

otimizações de velocidade

otimizações de velocidade

++critical csscritical css

SUCESSO!SUCESSO!=++

critical csscritical css

=otimizações de

velocidadeotimizações de

velocidade

[email protected]@gmail.com@bakery@bakery

Speed up! Critical css to the rescue

Technology

Transcript of Speed up! Critical css to the rescue