Speed up! Critical css to the rescue

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

Oi!Oi!
Sou Ami ReynosoSou Ami Reynoso

Sou Ami ReynosoSou Ami Reynoso
Engenheira frontend
no Mercado Livre
Engenheira frontend
no Mercado Livre
Oi!Oi!

- A Front End Engineer’s
EM PRIMEIRO LUGAREM PRIMEIRO LUGAR
USUÁ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
Mais importante ainda, e acima de tudo,
vou colocar as necessidades do
sobre as minhas próprias necessidades como
desenvolvedor.

usuários felizesusuários felizes

WEBSITE RÁPIDO
usuários felizesusuários felizes
WEBSITE RÁPIDO

WEBSITE RÁPIDO ?WEBSITE RÁPIDO ?

carrega literalmente rápidocarrega literalmente rápido

carrega literalmente rápido
usuário percebe
que carrega rápido
carrega literalmente rápido
usuário percebe
que carrega rápido

1993 · Jakob Nielsen1993 · Jakob Nielsen

LIMITES NA
PERCEPÇAO
1993 · Jakob Nielsen1993 · Jakob Nielsen
LIMITES NA
PERCEPÇÃO

0.1 segundos
1 segundo
0.1 segundos
1 segundo

0.1 segundos
1 segundo
10 segundos10 segundos
1 segundo
0.1 segundos

Do que
estamos
falando?
Do que
estamos
falando?

clique aqui!
digite a URL eventoseventos

O que é
realmente?
O que é
realmente?

1 NETWORK REQUESTNETWORK REQUEST1 ~ 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

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

renderização!
➔Minify e gzip

renderização!
➔Minify e gzip
renderização!

renderização!
➔Minify e gzip
renderização!
➔Minify e gzip

✔ Critical Rendering Path✔ Critical Rendering Path

✔ Critical Rendering Path
✔ Como otimizá-lo

CSS?
CSS?

Percepção do usuário
CSS?
CSS?
Percepção do usuário

para o resgate!para o resgate!
Critical CSSCritical CSS

O que é
Critical
CSS?
O que é
Critical
CSS?

necessário
para nosso
above the fold
necessário
para 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?
Mas, e quanto ao

Javascript mágica!Javascript mágica!
Mas, e quanto ao
Mas, e quanto ao

O que
vamos
alcançar?
O que
vamos
alcançar?

de carregamento
da página
percepçãopercepção
de carregamento
da página

O que
ter em
mente?
O que
ter em
mente?

1 DEPENDE DE
JAVASCRIPT
1 DEPENDE DE
JAVASCRIPT

Conservar se o usuário já
tem os estilos
Conservar se o usuário já
tem os estilos
2 BROWSER CACHEBROWSER CACHE2

Como...
carregar os
estilos
Como...
carregar os
estilos

➔Script de carregamento
➔Resource hint: preload
➔Verificar a existência de cookie
e salvar
➔<noscript> fallback!

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

e salvar

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

e salvar
e salvar

Como...
gerar os
estilos
Como...
gerar os
estilos

pré-processador +
boa base de código
ferramentas
auto-mágicas
ferramentas
auto-mágicas

pré-processador +
boa base de código
ferramentas
auto-mágicas
ferramentas
auto-mágicas
pré-processador +
boa base de código

em Mercado Livreem Mercado Livre
Critical CSSCritical CSS

Search listingsSearch listings
Mercado LivreMercado Livre

Web mobileWeb mobile

Mercado LibreMercado Libre

++
proceso artesanal
gerado on-line
proceso artesanal
gerado on-line

~20 bundles diferentes
proceso artesanal
gerado on-line
~20 bundles diferentes
proceso artesanal
gerado on-line
++
++

grande bagunçagrande 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! *
resultados
impressionantes! *

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

percepção do
tempo de carga
-56%

+2%-56%
percepção do
tempo de carga

-56% +2%
taxa de
conversão
percepção do
tempo de carga

otimizações de velocidadeotimizações de velocidade
critical csscritical css

SUCESSO!SUCESSO!
critical csscritical css
otimizações de velocidadeotimizações de velocidade

Obrigada!Obrigada!
amireynoso@gmail.comamireynoso@gmail.com
@bakery@bakery

Speed up! Critical css to the rescue

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Speed up! Critical css to the rescue

Semelhante a Speed up! Critical css to the rescue (20)

Mais de melidevelopers

Mais de melidevelopers (20)

Speed up! Critical css to the rescue

Notas do Editor