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

Speed up! Critical css to the rescue

Embed Size (px)

Citation preview

Page 1: Speed up! Critical css to the rescue

Speed up!TO THE RESCUE

CRITICAL CSS

TO THE RESCUE

CRITICAL CSS

Speed up!

Page 2: Speed up! Critical css to the rescue

Oi!Oi!

Page 3: Speed up! Critical css to the rescue

Oi!Oi!Sou Ami ReynosoSou Ami Reynoso

Page 4: Speed up! Critical css to the rescue

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

Oi!Oi!

Page 5: Speed up! Critical css to the rescue

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

Page 6: Speed up! Critical css to the rescue

usuários felizes

usuários felizes

Page 7: Speed up! Critical css to the rescue

usuários felizes

usuários felizes

Page 8: Speed up! Critical css to the rescue

WEBSITE RÁPIDO

usuários felizes

usuários felizesWEBSITE RÁPIDO

Page 9: Speed up! Critical css to the rescue

WEBSITE RÁPIDO ?

WEBSITE RÁPIDO ?

Page 10: Speed up! Critical css to the rescue

WEBSITE RÁPIDO ?

WEBSITE RÁPIDO ?

carrega literalmente rápido carrega literalmente rápido

Page 11: Speed up! Critical css to the rescue

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 ?

Page 12: Speed up! Critical css to the rescue

percepçao

percepção

Page 13: Speed up! Critical css to the rescue

1993 · Jakob Nielsen

1993 · Jakob Nielsen

Page 14: Speed up! Critical css to the rescue

LIMITES NA PERCEPÇAO

1993 · Jakob Nielsen

1993 · Jakob NielsenLIMITES NA

PERCEPÇÃO

Page 15: Speed up! Critical css to the rescue

0.1 segundos0.1 segundos

Page 16: Speed up! Critical css to the rescue

0.1 segundos1 segundo

0.1 segundos1 segundo

Page 17: Speed up! Critical css to the rescue

0.1 segundos1 segundo

10 segundos10 segundos1 segundo

0.1 segundos

Page 18: Speed up! Critical css to the rescue

Rendering pathRendering path

Page 19: Speed up! Critical css to the rescue

WTF?Rendering pathRendering path

WTF?

Page 20: Speed up! Critical css to the rescue

Do que estamos falando?

Do que estamos falando?

Page 21: Speed up! Critical css to the rescue

clique aqui!

Page 22: Speed up! Critical css to the rescue

clique aqui!

digite a URL

Page 23: Speed up! Critical css to the rescue

clique aqui!

digite a URL

Page 24: Speed up! Critical css to the rescue

clique aqui!

digite a URL

Page 25: Speed up! Critical css to the rescue

clique aqui!

digite a URL eventos

eventos

Page 26: Speed up! Critical css to the rescue

O que é realmente?

O que é realmente?

Page 27: Speed up! Critical css to the rescue

1 NETWORK REQUESTNETWORK REQUEST

1~ 600 milliseconds~ 600 milissegundos

2 RESPOSTA DO SERVIDOR

2 RESPOSTA DO SERVIDOR

Page 28: Speed up! Critical css to the rescue

PROCESSAMENTO DE HTML & CONSTRUÇÃO DE DOM

33 PROCESSAMENTO DE HTML & CONSTRUÇÃO DE DOM

Page 29: Speed up! Critical css to the rescue

PROCESSAMENTO DE CSS & CONSTRUÇÃO DE CSSOM

44 PROCESSAMENTO DE CSS & CONSTRUÇÃO DE CSSOM

Page 30: Speed up! Critical css to the rescue

5 RENDER TREERENDER TREE5

Page 31: Speed up! Critical css to the rescue

6 LAYOUTLAYOUT6

Page 32: Speed up! Critical css to the rescue

7 PINTADO7 PINTADO

Page 33: Speed up! Critical css to the rescue

Como podemos otimizar isso?

Como podemos otimizar isso?

Page 34: Speed up! Critical css to the rescue

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

renderização!➔ Minify e gzip

➔ Embale seus recursos!

Page 35: Speed up! Critical css to the rescue

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

renderização!➔ Minify e gzip

➔ Embale seus recursos!➔ Utilize resource hints

Page 36: Speed up! Critical css to the rescue

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

renderização!➔ Minify e gzip

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

renderização!

Page 37: Speed up! Critical css to the rescue

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

renderização!➔ Minify e gzip

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

renderização!➔ Minify e gzip

Page 38: Speed up! Critical css to the rescue

✔ Critical Rendering Path✔ Critical Rendering Path

Page 39: Speed up! Critical css to the rescue

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

Page 40: Speed up! Critical css to the rescue

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

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

Page 41: Speed up! Critical css to the rescue

Percepção do usuário

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

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

Page 42: Speed up! Critical css to the rescue

para o resgate!

para o resgate!

Critical CSSCritical CSS

Page 43: Speed up! Critical css to the rescue

O que é Critical CSS?

O que é Critical CSS?

Page 44: Speed up! Critical css to the rescue

O que é Critical CSS?

O que é Critical CSS?

Page 45: Speed up! Critical css to the rescue

necessáriopara nosso above the

fold

necessáriopara nosso above the

fold

Page 46: Speed up! Critical css to the rescue

.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;}

Page 47: Speed up! Critical css to the rescue

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

Page 48: Speed up! Critical css to the rescue
Page 49: Speed up! Critical css to the rescue

Mas, e quanto ao resto dos meus estilos?

Mas, e quanto ao resto dos meus estilos?

Page 50: Speed up! Critical css to the rescue

Javascript mágica!

Javascript mágica!

Mas, e quanto ao resto dos meus estilos?

Mas, e quanto ao resto dos meus estilos?

Page 51: Speed up! Critical css to the rescue

O que vamos alcançar?

O que vamos alcançar?

Page 52: Speed up! Critical css to the rescue

de carregamento da página

percepçãopercepçãode carregamento

da página

Page 53: Speed up! Critical css to the rescue

O queter em mente?

O que ter em mente?

Page 54: Speed up! Critical css to the rescue

1 DEPENDE DE JAVASCRIPT

1 DEPENDE DE JAVASCRIPT

Page 55: Speed up! Critical css to the rescue

2 BROWSER CACHEBROWSER CACHE2

Page 56: Speed up! Critical css to the rescue

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

2 BROWSER CACHEBROWSER CACHE2

Page 57: Speed up! Critical css to the rescue

Como...Como...

Page 58: Speed up! Critical css to the rescue

Como...carregar os estilos

Como...carregar os estilos

Page 59: Speed up! Critical css to the rescue

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

e salvar➔<noscript> fallback!

➔ Script de carregamento

Page 60: Speed up! Critical css to the rescue

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);});

Page 61: Speed up! Critical css to the rescue

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

e salvar➔<noscript> fallback!

➔ Script de carregamento➔ Resource hint: preload

Page 62: Speed up! Critical css to the rescue

<link rel="preload" href="path/to/full/styles.css" as="style" onload="this.rel='stylesheet'">

Page 63: Speed up! Critical css to the rescue

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

e salvar➔<noscript> fallback!

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

e salvar

Page 64: Speed up! Critical css to the rescue

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

Page 65: Speed up! Critical css to the rescue

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

e salvar➔<noscript> fallback!

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

e salvar➔<noscript> fallback!

Page 66: Speed up! Critical css to the rescue

<style> /* inline Critical CSS */ </style><noscript> <link rel="stylesheet" type="text/css"

href="styles.css"></noscript>

Page 67: Speed up! Critical css to the rescue

Como...gerar osestilos

Como...gerar os estilos

Page 68: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

Page 69: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

Page 70: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

Page 71: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

Page 72: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

pré-processador + boa base de

código

Page 73: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

pré-processador + boa base de

código

Page 74: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

pré-processador + boa base de

código

Page 75: Speed up! Critical css to the rescue

pré-processador + boa base de

código

ferramentas auto-mágicasferramentas auto-mágicas

pré-processador + boa base de

código

Page 76: Speed up! Critical css to the rescue

em Mercado Livre

em Mercado Livre

Critical CSSCritical CSS

Page 77: Speed up! Critical css to the rescue

Onde o fizemosOnde o fizemos

Page 78: Speed up! Critical css to the rescue
Page 79: Speed up! Critical css to the rescue

Mercado LivreMercado Livre

Page 80: Speed up! Critical css to the rescue

Search listingsSearch listings

Mercado LivreMercado Livre

Page 81: Speed up! Critical css to the rescue

Search listingsSearch listingsWeb mobileWeb mobile

Mercado LivreMercado Livre

Page 82: Speed up! Critical css to the rescue

Search listingsSearch listingsWeb mobileWeb mobile

Mercado LivreMercado Livre

Page 83: Speed up! Critical css to the rescue

Mercado LivreMercado Livre

Search listingsSearch listingsWeb mobileWeb mobile

Page 84: Speed up! Critical css to the rescue

Mercado LivreMercado Livre

Search listingsSearch listingsWeb mobileWeb mobile

Page 85: Speed up! Critical css to the rescue

Mercado LibreMercado Libre

Search listingsSearch listingsWeb mobileWeb mobile

Page 86: Speed up! Critical css to the rescue

Como fizemosComo fizemos

Page 87: Speed up! Critical css to the rescue

gerado on-linegerado on-line

Page 88: Speed up! Critical css to the rescue

++proceso artesanal

gerado on-lineproceso artesanal

gerado on-line

Page 89: Speed up! Critical css to the rescue

~20 bundles diferentesproceso artesanal

gerado on-line

~20 bundles diferentesproceso artesanal

gerado on-line++++

Page 90: Speed up! Critical css to the rescue

==

Page 91: Speed up! Critical css to the rescue

grande bagunça

grande bagunça

==

Page 92: Speed up! Critical css to the rescue

a longo prazoa longo prazo

==grande

bagunçagrande

bagunça

Page 93: Speed up! Critical css to the rescue

O que isto significou para nós

O que isto significou para nós

Page 94: Speed up! Critical css to the rescue

resultados impressionantes! *

resultados impressionantes! *

Page 95: Speed up! Critical css to the rescue

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

resultados impressionantes! *

resultados impressionantes! *

Page 96: Speed up! Critical css to the rescue

antes

depois

antes

depois

Page 97: Speed up! Critical css to the rescue

-56%

Page 98: Speed up! Critical css to the rescue

percepção dotempo de

carga

-56%

Page 99: Speed up! Critical css to the rescue

+2%-56%percepção do

tempo de carga

Page 100: Speed up! Critical css to the rescue

-56% +2%taxa de

conversãopercepção do

tempo de carga

Page 101: Speed up! Critical css to the rescue

critical csscritical css

Page 102: Speed up! Critical css to the rescue

otimizações de velocidade

otimizações de velocidade

++critical csscritical css

Page 103: Speed up! Critical css to the rescue

SUCESSO!SUCESSO!=++

critical csscritical css

=otimizações de

velocidadeotimizações de

velocidade

Page 104: Speed up! Critical css to the rescue

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