speed up! critical css to the rescue
Post on 09-Jan-2017
93 Views
Preview:
TRANSCRIPT
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
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
1993 · Jakob Nielsen
LIMITES NA PERCEPÇAO
1993 · Jakob Nielsen
1993 · Jakob NielsenLIMITES NA
PERCEPÇÃO
0.1 segundos0.1 segundos
0.1 segundos1 segundo
0.1 segundos1 segundo
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
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➔ Não bloqueie o caminho de
renderização!➔ Minify e gzip
➔ Embale seus recursos!➔ Utilize resource hints
➔ 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!
➔ 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
✔ 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?
✔ Critical Rendering Path✔ Como otimizá-lo CSS?
Percepção do usuário
✔ Critical Rendering Path✔ Como otimizá-lo CSS?
✔ 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?
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?
Mas, e quanto ao resto dos meus estilos?
Javascript mágica!
Javascript mágica!
Mas, e quanto ao resto dos meus estilos?
Mas, e quanto ao resto dos meus estilos?
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➔ Verificar a existência de cookie
e salvar➔<noscript> fallback!
➔ Script de carregamento➔ Resource hint: preload
<link rel="preload" href="path/to/full/styles.css" as="style" onload="this.rel='stylesheet'">
➔ 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
<?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; ?>
➔ 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!
<style> /* inline Critical CSS */ </style><noscript> <link rel="stylesheet" type="text/css"
href="styles.css"></noscript>
Como...gerar osestilos
Como...gerar os estilos
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
pré-processador + boa base de
código
ferramentas auto-mágicasferramentas auto-mágicas
pré-processador + boa base de
código
em Mercado Livre
em Mercado Livre
Critical CSSCritical CSS
Onde o fizemosOnde o fizemos
Mercado LivreMercado Livre
Search listingsSearch listings
Mercado LivreMercado Livre
Search listingsSearch listingsWeb mobileWeb mobile
Mercado LivreMercado Livre
Search listingsSearch listingsWeb mobileWeb mobile
Mercado LivreMercado Livre
Mercado LivreMercado Livre
Search listingsSearch listingsWeb mobileWeb mobile
Mercado LivreMercado Livre
Search listingsSearch listingsWeb mobileWeb mobile
Mercado LibreMercado Libre
Search listingsSearch listingsWeb mobileWeb mobile
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! *
resultados impressionantes! *
* mesmo vindo de uma má experiência!* mesmo vindo de uma má experiência!
resultados impressionantes! *
resultados impressionantes! *
antes
depois
antes
depois
-56%
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
Obrigada!Obrigada!amireynoso@gmail.comamireynoso@gmail.com@bakery@bakery
top related