SlideShare uma empresa Scribd logo
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 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
usuários felizesusuários felizes
WEBSITE RÁPIDO
usuários felizesusuários felizes
WEBSITE RÁPIDO
WEBSITE RÁPIDO ?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
WEBSITE RÁPIDO ?WEBSITE RÁPIDO ?
percepçaopercepção
1993 · Jakob Nielsen1993 · Jakob Nielsen
LIMITES NA
PERCEPÇAO
1993 · Jakob Nielsen1993 · Jakob Nielsen
LIMITES NA
PERCEPÇÃO
0.1 segundos0.1 segundos
0.1 segundos
1 segundo
0.1 segundos
1 segundo
0.1 segundos
1 segundo
10 segundos10 segundos
1 segundo
0.1 segundos
Rendering pathRendering path
Rendering pathRendering path
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 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
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á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;
}
Speed up! Critical css to the rescue
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ção
de carregamento
da página
O que
ter 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 estilos
Conservar 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 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
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
ferramentas
auto-mágicas
ferramentas
auto-mágicas
pré-processador +
boa base de código
pré-processador +
boa base de código
ferramentas
auto-mágicas
ferramentas
auto-mágicas
pré-processador +
boa base de código
pré-processador +
boa base de código
ferramentas
auto-mágicas
ferramentas
auto-mágicas
pré-processador +
boa base de código
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
Onde o
fizemos
Onde o
fizemos
Speed up! Critical css to the rescue
Mercado LivreMercado Livre
Search listingsSearch listings
Mercado LivreMercado Livre
Search listingsSearch listings
Web mobileWeb mobile
Mercado LivreMercado Livre
Search listingsSearch listings
Web mobileWeb mobile
Mercado LivreMercado Livre
Mercado LivreMercado Livre
Search listingsSearch listings
Web mobileWeb mobile
Mercado LivreMercado Livre
Search listingsSearch listings
Web mobileWeb mobile
Mercado LibreMercado Libre
Search listingsSearch listings
Web mobileWeb mobile
Como
fizemos
Como
fizemos
gerado on-linegerado on-line
++
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! *
Speed up! Critical css to the rescue
-56%
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
critical csscritical css
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

Mais conteúdo relacionado

Semelhante a Speed up! Critical css to the rescue

JS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front endJS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front end
iMasters
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
Zeno Rocha
 
LESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - IntroduçãoLESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - Introdução
Marcos César
 
Produtividade
ProdutividadeProdutividade
Produtividade
Elcio Ferreira
 
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixConheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Nayara Felix
 
Segredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App ManifestSegredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App Manifest
Eduardo Matos
 
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
iMasters
 
CSS Básico - Webdesign - 2021-01
CSS Básico - Webdesign - 2021-01CSS Básico - Webdesign - 2021-01
CSS Básico - Webdesign - 2021-01
Renato Melo
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMU
Thiago Ericson
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
Renato Melo
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
Leandro Nunes
 
O processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra SoaresO processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra Soares
Prodv Comunicação
 
Performance Front-end
Performance Front-endPerformance Front-end
Performance Front-end
Descomplica
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
Ivan Banov
 
Ruby On Rails
Ruby On RailsRuby On Rails
Ruby On Rails
Paulo César M Jeveaux
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
Caelum
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe
 
Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphone
Renato Nitta
 
Responsive design
Responsive designResponsive design
Responsive design
Guilherme Serrano
 

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

JS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front endJS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front end
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
LESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - IntroduçãoLESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - Introdução
 
Produtividade
ProdutividadeProdutividade
Produtividade
 
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixConheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
 
Segredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App ManifestSegredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App Manifest
 
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
 
CSS Básico - Webdesign - 2021-01
CSS Básico - Webdesign - 2021-01CSS Básico - Webdesign - 2021-01
CSS Básico - Webdesign - 2021-01
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMU
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
 
O processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra SoaresO processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra Soares
 
Performance Front-end
Performance Front-endPerformance Front-end
Performance Front-end
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
 
Ruby On Rails
Ruby On RailsRuby On Rails
Ruby On Rails
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphone
 
Responsive design
Responsive designResponsive design
Responsive design
 

Mais de melidevelopers

Mercado Envíos Ful
Mercado Envíos FulMercado Envíos Ful
Mercado Envíos Ful
melidevelopers
 
Fernando Adrian Scasserra
Fernando Adrian ScasserraFernando Adrian Scasserra
Fernando Adrian Scasserra
melidevelopers
 
Lucía Brizuela
Lucía BrizuelaLucía Brizuela
Lucía Brizuela
melidevelopers
 
Victor Piñal
Victor PiñalVictor Piñal
Victor Piñal
melidevelopers
 
Omar Galicia
Omar GaliciaOmar Galicia
Omar Galicia
melidevelopers
 
Daniel Gándara
Daniel GándaraDaniel Gándara
Daniel Gándara
melidevelopers
 
Mercado Pago para seller del on
Mercado Pago para seller del onMercado Pago para seller del on
Mercado Pago para seller del on
melidevelopers
 
Be Commerce
Be CommerceBe Commerce
Be Commerce
melidevelopers
 
Bling!
Bling!Bling!
Any Market
Any MarketAny Market
Any Market
melidevelopers
 
Aprendendo sobre o seu mercado
Aprendendo sobre o seu mercadoAprendendo sobre o seu mercado
Aprendendo sobre o seu mercado
melidevelopers
 
AWS
AWS AWS
Mercado Pago - SDK mobile
Mercado Pago - SDK mobile Mercado Pago - SDK mobile
Mercado Pago - SDK mobile
melidevelopers
 
sensedia - Design Sprint
sensedia - Design Sprint sensedia - Design Sprint
sensedia - Design Sprint
melidevelopers
 
VTEX
VTEX VTEX
Utilizando react em aplicações escaláveis
Utilizando react em aplicações escaláveisUtilizando react em aplicações escaláveis
Utilizando react em aplicações escaláveis
melidevelopers
 
UX @ Mercado Livre
UX @ Mercado LivreUX @ Mercado Livre
UX @ Mercado Livre
melidevelopers
 
Fazendo parte do nosso ecossistema
Fazendo parte do nosso ecossistemaFazendo parte do nosso ecossistema
Fazendo parte do nosso ecossistema
melidevelopers
 
Novidades - API Mercado Livre
Novidades - API Mercado LivreNovidades - API Mercado Livre
Novidades - API Mercado Livre
melidevelopers
 
Por que tecnologia e Mercado Livre ?
Por que tecnologia e Mercado Livre ?Por que tecnologia e Mercado Livre ?
Por que tecnologia e Mercado Livre ?
melidevelopers
 

Mais de melidevelopers (20)

Mercado Envíos Ful
Mercado Envíos FulMercado Envíos Ful
Mercado Envíos Ful
 
Fernando Adrian Scasserra
Fernando Adrian ScasserraFernando Adrian Scasserra
Fernando Adrian Scasserra
 
Lucía Brizuela
Lucía BrizuelaLucía Brizuela
Lucía Brizuela
 
Victor Piñal
Victor PiñalVictor Piñal
Victor Piñal
 
Omar Galicia
Omar GaliciaOmar Galicia
Omar Galicia
 
Daniel Gándara
Daniel GándaraDaniel Gándara
Daniel Gándara
 
Mercado Pago para seller del on
Mercado Pago para seller del onMercado Pago para seller del on
Mercado Pago para seller del on
 
Be Commerce
Be CommerceBe Commerce
Be Commerce
 
Bling!
Bling!Bling!
Bling!
 
Any Market
Any MarketAny Market
Any Market
 
Aprendendo sobre o seu mercado
Aprendendo sobre o seu mercadoAprendendo sobre o seu mercado
Aprendendo sobre o seu mercado
 
AWS
AWS AWS
AWS
 
Mercado Pago - SDK mobile
Mercado Pago - SDK mobile Mercado Pago - SDK mobile
Mercado Pago - SDK mobile
 
sensedia - Design Sprint
sensedia - Design Sprint sensedia - Design Sprint
sensedia - Design Sprint
 
VTEX
VTEX VTEX
VTEX
 
Utilizando react em aplicações escaláveis
Utilizando react em aplicações escaláveisUtilizando react em aplicações escaláveis
Utilizando react em aplicações escaláveis
 
UX @ Mercado Livre
UX @ Mercado LivreUX @ Mercado Livre
UX @ Mercado Livre
 
Fazendo parte do nosso ecossistema
Fazendo parte do nosso ecossistemaFazendo parte do nosso ecossistema
Fazendo parte do nosso ecossistema
 
Novidades - API Mercado Livre
Novidades - API Mercado LivreNovidades - API Mercado Livre
Novidades - API Mercado Livre
 
Por que tecnologia e Mercado Livre ?
Por que tecnologia e Mercado Livre ?Por que tecnologia e Mercado Livre ?
Por que tecnologia e Mercado Livre ?
 

Speed up! Critical css to the rescue

Notas do Editor

  1. Más de un año Plataforma líder de e-commerce en Latinoamérica. Lo que hacemos impacta a muchísimos usuarios / nuestra misión es mejorar su experiencia
  2. Respuesta instantánea
  3. Atención completa. Pasado el segundo, comienza a sentir que pierde el control. Empieza a desenfocarse.
  4. Acá perdió completamente la atención. Diferentes matices, puntos de quiebre. Feedback visual dentro del 1er segundo. Historia del usuario en el tiempo. Out: ¿qué podemos hacer para mejorar? Veamos que pasa detrás de escena.
  5. La forma que tenemos de mejorar la percepción del usuario es optimizar el rendering path.
  6. ¿Quiénes acá escucharon hablar del rendering path?
  7. Hasta que la página termina de renderizarse en pantalla.
  8. Términos simplistas. Serie de eventos que desarrolla el browser para cumplir este objetivo.
  9. En el camino hay un trayecto crítico. Repasemos en detalle el camino.
  10. Un poco más de control. Caso: HTML sencillo, algunas imágenes, una hoja de estilos y un archivo JS. Respuesta “pequeña”.
  11. El navegador procesa la respuesta de manera progresiva. Lo va traduciendo a nodos en un árbol que conocemos como DOM. “Viene parseando, se encuentra con un title, algunos tags meta, y un link con una referencia externa a un CSS”. Render blocking.
  12. Frena el renderizado porque entiende que necesita este recurso renderizar la página en pantalla. Con el CSS arma el CSSOM. También es un mapa de nodos. Continúa con el procesamiento del HTML y la construcción del DOM.
  13. Ambos modelos completos, se relacionan en el render tree. Combinación de todos los nodos con sus reglas computadas de estilos. No son todos los nodos, sólo los visibles en pantalla (por CSS o por tipo de tag).
  14. Layout o reflow. Calcula el tamaño y posición de cada elemento en el viewport.
  15. Instancia final, pintado o paint. Traducción de toda la información recopilada en pixeles en pantalla. El tiempo depende de lo que se pinta. Reglas de estilos más costosas que otras. Out: Página web visible en el browser.
  16. Todo esto nos perjudica en performance. Veamos cómo hacerlo mejor.
  17. Evitemos tener múltiples requests. Cambia el paradigma con HTTP2
  18. Si pueden usar resource hints, sería un golazo. Preconnect y DNS-Prefetch.
  19. Cargar los scripts antes del cierre del body. Usar atributos defer o async. Traer dependencias asincrónicamente después del on load. Mundo ideal: JS sólo como mejora.
  20. Achiquemos el tamaño de nuestros assets. Soluciones básicas a problemas básicos. Excavar más profundo. Usar estos conocimientos para mejorar la experiencia. Nuevo slide: Ya sabemos q es el rendering path, como lo podemos optimizar, ahora como entra css? Percepcion del usuario
  21. Ya sabemos que es el rendering path, como lo podemos optimizar, ahora como entra CSS? Percepción del usuario
  22. Ahora sí, lo que vinieron a escuchar. Seguramente con las mejoras anteriores ya bajaron tiempos de render. ¿Pero el usuario sigue esperando para tener feedback visual?
  23. Les presento una técnica. Sabemos lo que es el critical rendering path, y el CSS critical path. Camino que toma el navegador para interpretar nuestros estilos en pantalla. Estamos bloqueando el render de la manera en que lo solemos hacer. Out: Acá entra Critical CSS. ¿Qué es?
  24. Diferencia entre CSS Critical Path y Critical CSS. Critical CSS: CSS indispensable. No es negativo, es lo vital e importante. Para entender mejor la diferencia, pensar Critical CSS como una optimización sobre el CSS Critical Path.
  25. Declaraciones de estilos necesarias para renderizar lo que el usuario tiene que ver sí o sí. El usuario no va a ver todo enseguida. Sólo el primer pantallazo. Mundo editorial: “above the fold”.
  26. Estos son mis estilos críticos. Sólo cargamos esto en el head. No debería ser externo.
  27. Hay que hacer algo que nos dijeron siempre que no hagamos. Ponerlos en línea.
  28. Nos aseguramos que el navegador tiene todo lo que necesita en la primer respuesta del servidor.
  29. Escuchamos el evento on load e insertamos el tag link con nuestros estilos completos. El navegador entiende el cambio y va a buscar los estilos. No bloqueamos el render inicial. El usuario ya tiene feedback visual. Ejemplo de como hacerlo.
  30. Mejoramos la percepción del tiempo de carga. El usuario ve contenido casi final mucho tiempo antes. Él entiende que la página cargó más rápido. Los tiempos de carga reales son casi los mismos. Umbrales de Nielsen: esta mejora + otras optimizaciones = nos puede salvar de perder un usuario.
  31. Buscar en cache los recursos luego de la primer visita. Acelera muchísimo las visitas posteriores.
  32. Guardar en una cookie después de mostrar los estilos críticos. Estilos versionados: cookie = valor de la versión. Sin versionado: cookie = auto expirable a cantidad de tiempo de actualización. Reever con lo q se repite abajo.
  33. Hasta ahora sólo teoría. La práctica depende del contexto. Necesidades y usuarios son diferentes.
  34. Adaptar a nuestras propias necesidades. Cualquiera de estos dos scripts no debería bloquear el render.
  35. Nuevo resource hint preload. Indica al browser que cargue paralelamente nuestra hoja completa de estilos. Tiene evento de on load. Cuando carga el recurso, le indicamos al browser que es una hoja de estilos para que lo interprete normalmente. Versiones más recientes de Chrome.
  36. Adaptar a nuestras propias necesidades. Cualquiera de estos dos scripts no debería bloquear el render.
  37. Condicionar estilos críticos en base a lo que guardamos en la cookie. Server side. Si no existe o tiene un valor diferente a la versión que queremos, mostramos estilos críticos. Sino, el link a los estilos completos.
  38. Tag <noscript> traemos los estilos completos.
  39. Diferentes maneras de generarlos. Depende del contexto y tamaño del proyecto.
  40. Herramientas automatizadas. Sumar a nuestro workflow. Task runner: Gulp, Grunt. Stand alone.
  41. También tiene un generador online.
  42. Critical de Addy Osmani. Out: mayor o menor medida, estas herramientas toman parámetros configurables, y extraen estilos que se renderizan en pantalla.
  43. Si trabajamos con un preprocesador. Nuestro código está bien organizado.
  44. Estilos bien componentizados + módulos extraíbles = bundle con lo necesario con criterio. Out: Experiencia personal. Armado con preprocesador es lo que mejor escala. Más flexible. Sólo necesita armado inicial. Modularizar y pensar bien los estilos críticos. Herrmientas automáticas Sirven para un contexto chico, estático. Atadas al tamaño del viewport: limitante.
  45. Finales del año pasado. Primer experiencia: desastrosa pero beneficiosa. Hermosa contradicción.
  46. Primera implementación. Más palos. Mejores resultados. Implementación en otros lados, experiencias más felices.
  47. Mejor experiencia basándonos en performance.
  48. A simple vista parece sencillo.
  49. Codebase viejo. A punto de arrancar el diseño actual. No teníamos buena modularización. Workflow de Gulp débil.
  50. Lo que sí teníamos era un deadline.
  51. Los generamos online.
  52. De manera artesanal. Dependencias: Estilos propios Librería UI Vendors
  53. Más de 20 compilaciones para todas las combinaciones. Siguieron apareciendo casos de uso.
  54. Se imaginarán el lío. Hasta acá todo más o menos bien. Hasta que se comenzaron a agregar fixes y features.
  55. Mantener los bundles de estilos críticos se tornó imposible. “mírame y no me toques”.
  56. Sin embargo...
  57. Excelentes resultados.
  58. Para una experiencia desastrosa.
  59. Usuario ahora comienza a ver contenido a los 1.4 segundos. Antes veía alrededor de los 2.5 segundos. Mejora del 56% en el first render.
  60. Usuarios percibían la carga de la página, en promedio, un segundo entero antes.
  61. Percibir Tiempo de carga total bajó solo 8,5%. “Visually complete”, de 4.9 a 4.5 segundos. 2 tipos de hacer rapido el sitio
  62. Punto de vista de negocio.
  63. Un poco más del 2% en la tasa de conversiones. Parece poco pero es muchísimo.
  64. Acelear significativamente la carga. Brindar mejor experiencia a nuestros usuarios.
  65. Les conté: Nuestros errores. Nuestra victoria. Espero que puedan: Llevarse el aprendizaje. Sacarle lo mejor a la técnica en sus proyectos. Me gustaría que se lleven: No sólo el conocimiento de la técnica. Sino el foco puesto en performance. Siempre en la experiencia final de nuestros usuarios.