Baixar para ler offline
![<?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; ?>](https://image.slidesharecdn.com/03-mercadolivre-speedupcriticalcsstotherescue-161021175308/85/Speed-up-Critical-css-to-the-rescue-64-320.jpg)
Carregado pormelidevelopers
Speed up! Critical css to the rescue
O documento discute técnicas para melhorar o desempenho de carregamento de páginas web, como o uso de Critical CSS. Critical CSS extrai apenas os estilos CSS necessários para renderizar a parte acima do fold, melhorando a percepção do usuário sobre a velocidade de carregamento. O documento também explica como gerar e implementar corretamente o Critical CSS, incluindo o uso de ferramentas e pré-processadores, e como a técnica foi aplicada com sucesso no Mercado Livre, resultando em reduções significativas nos tempos de carregamento
Speed up! Critical css to the rescue
- 1. Speed up! TO THERESCUE CRITICAL CSS TO THE RESCUE CRITICAL CSS Speed up!
- 2.
- 3. Oi!Oi! Sou Ami ReynosoSouAmi Reynoso
- 4. Sou Ami ReynosoSouAmi Reynoso Engenheira frontend no Mercado Livre Engenheira frontend no Mercado Livre Oi!Oi!
- 5. - A FrontEnd 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.
- 6.
- 7.
- 8. WEBSITE RÁPIDO usuários felizesusuáriosfelizes WEBSITE RÁPIDO
- 9. WEBSITE RÁPIDO ?WEBSITERÁPIDO ?
- 10. WEBSITE RÁPIDO ?WEBSITERÁPIDO ? carrega literalmente rápidocarrega literalmente rápido
- 11. carrega literalmente rápido usuáriopercebe que carrega rápido carrega literalmente rápido usuário percebe que carrega rápido WEBSITE RÁPIDO ?WEBSITE RÁPIDO ?
- 12.
- 13. 1993 · JakobNielsen1993 · Jakob Nielsen
- 14. LIMITES NA PERCEPÇAO 1993 ·Jakob Nielsen1993 · Jakob Nielsen LIMITES NA PERCEPÇÃO
- 15.
- 16. 0.1 segundos 1 segundo 0.1segundos 1 segundo
- 17. 0.1 segundos 1 segundo 10segundos10 segundos 1 segundo 0.1 segundos
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. clique aqui! digite aURL eventoseventos
- 26. O que é realmente? Oque é realmente?
- 27. 1 NETWORK REQUESTNETWORKREQUEST1 ~ 600 milliseconds~ 600 milissegundos 2 RESPOSTA DO SERVIDOR 2 RESPOSTA DO SERVIDOR
- 28. PROCESSAMENTO DE HTML &CONSTRUÇÃO DE DOM 33 PROCESSAMENTO DE HTML & CONSTRUÇÃO DE DOM
- 29. PROCESSAMENTO DE CSS &CONSTRUÇÃO DE CSSOM 44 PROCESSAMENTO DE CSS & CONSTRUÇÃO DE CSSOM
- 30. 5 RENDER TREERENDERTREE5
- 31.
- 32.
- 33.
- 34. ➔Embale seus recursos! ➔Utilizeresource hints ➔Não bloqueie o caminho de renderização! ➔Minify e gzip ➔Embale seus recursos!
- 35. ➔Embale seus recursos! ➔Utilizeresource hints ➔Não bloqueie o caminho de renderização! ➔Minify e gzip ➔Embale seus recursos! ➔Utilize resource hints
- 36. ➔Embale seus recursos! ➔Utilizeresource 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!
- 37. ➔Embale seus recursos! ➔Utilizeresource 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
- 38. ✔ Critical RenderingPath✔ Critical Rendering Path
- 39. ✔ Critical RenderingPath ✔ Como otimizá-lo ✔ Critical Rendering Path ✔ Como otimizá-lo
- 40. ✔ Critical RenderingPath ✔ Como otimizá-lo CSS? ✔ Critical Rendering Path ✔ Como otimizá-lo CSS?
- 41. Percepção do usuário ✔Critical Rendering Path ✔ Como otimizá-lo CSS? ✔ Critical Rendering Path ✔ Como otimizá-lo CSS? Percepção do usuário
- 42. para o resgate!parao resgate! Critical CSSCritical CSS
- 43. O que é Critical CSS? Oque é Critical CSS?
- 44. O que é Critical CSS? Oque é Critical CSS?
- 45. necessário para nosso above thefold necessário para nosso above the fold
- 46. .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; }
- 47. <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; }
- 49. Mas, e quantoao resto dos meus estilos? Mas, e quanto ao resto dos meus estilos?
- 50. Javascript mágica!Javascript mágica! Mas,e quanto ao resto dos meus estilos? Mas, e quanto ao resto dos meus estilos?
- 51.
- 52. de carregamento da página percepçãopercepção decarregamento da página
- 53. O que ter em mente? Oque ter em mente?
- 54. 1 DEPENDE DE JAVASCRIPT 1DEPENDE DE JAVASCRIPT
- 55. 2 BROWSER CACHEBROWSERCACHE2
- 56. Conservar se ousuário já tem os estilos Conservar se o usuário já tem os estilos 2 BROWSER CACHEBROWSER CACHE2
- 57.
- 58.
- 59. ➔Script de carregamento ➔Resourcehint: preload ➔Verificar a existência de cookie e salvar ➔<noscript> fallback! ➔Script de carregamento
- 60. 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); });
- 61. ➔Script de carregamento ➔Resourcehint: preload ➔Verificar a existência de cookie e salvar ➔<noscript> fallback! ➔Script de carregamento ➔Resource hint: preload
- 62.
- 63. ➔Script de carregamento ➔Resourcehint: 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
- 64. <?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; ?>
- 65. ➔Script de carregamento ➔Resourcehint: 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!
- 66. <style> /* inlineCritical CSS */ </style> <noscript> <link rel="stylesheet" type="text/css" href="styles.css"> </noscript>
- 67.
- 68. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas
- 69. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas
- 70. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas
- 71. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas
- 72. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas pré-processador + boa base de código
- 73. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas pré-processador + boa base de código
- 74. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas pré-processador + boa base de código
- 75. pré-processador + boa basede código ferramentas auto-mágicas ferramentas auto-mágicas pré-processador + boa base de código
- 76. em Mercado LivreemMercado Livre Critical CSSCritical CSS
- 77.
- 79.
- 80. Search listingsSearch listings MercadoLivreMercado Livre
- 81. Search listingsSearch listings WebmobileWeb mobile Mercado LivreMercado Livre
- 82. Search listingsSearch listings WebmobileWeb mobile Mercado LivreMercado Livre
- 83. Mercado LivreMercado Livre SearchlistingsSearch listings Web mobileWeb mobile
- 84. Mercado LivreMercado Livre SearchlistingsSearch listings Web mobileWeb mobile
- 85. Mercado LibreMercado Libre SearchlistingsSearch listings Web mobileWeb mobile
- 86.
- 87.
- 88. ++ proceso artesanal gerado on-line procesoartesanal gerado on-line
- 89. ~20 bundles diferentes procesoartesanal gerado on-line ~20 bundles diferentes proceso artesanal gerado on-line ++ ++
- 90.
- 91.
- 92. a longo prazoalongo prazo == grande bagunçagrande bagunça
- 93. O que isto significou paranós O que isto significou para nós
- 94.
- 95. * mesmo vindode uma má experiência!* mesmo vindo de uma má experiência! resultados impressionantes! * resultados impressionantes! *
- 97.
- 98. percepção do tempo decarga -56%
- 99.
- 100. -56% +2% taxa de conversão percepçãodo tempo de carga
- 101.
- 102. otimizações de velocidadeotimizaçõesde velocidade critical csscritical css
- 103. SUCESSO!SUCESSO! critical csscritical css otimizaçõesde velocidadeotimizações de velocidade
- 104.
Notas do Editor
- #5 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
- #16 Respuesta instantánea
- #17 Atención completa. Pasado el segundo, comienza a sentir que pierde el control. Empieza a desenfocarse.
- #18 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.
- #19 La forma que tenemos de mejorar la percepción del usuario es optimizar el rendering path.
- #20 ¿Quiénes acá escucharon hablar del rendering path?
- #25 Hasta que la página termina de renderizarse en pantalla.
- #26 Términos simplistas. Serie de eventos que desarrolla el browser para cumplir este objetivo.
- #27 En el camino hay un trayecto crítico. Repasemos en detalle el camino.
- #28 Un poco más de control. Caso: HTML sencillo, algunas imágenes, una hoja de estilos y un archivo JS. Respuesta “pequeña”.
- #29 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.
- #30 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.
- #31 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).
- #32 Layout o reflow. Calcula el tamaño y posición de cada elemento en el viewport.
- #33 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.
- #34 Todo esto nos perjudica en performance. Veamos cómo hacerlo mejor.
- #35 Evitemos tener múltiples requests. Cambia el paradigma con HTTP2
- #36 Si pueden usar resource hints, sería un golazo. Preconnect y DNS-Prefetch.
- #37 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.
- #38 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
- #39 Ya sabemos que es el rendering path, como lo podemos optimizar, ahora como entra CSS? Percepción del usuario
- #43 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?
- #44 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?
- #45 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.
- #46 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”.
- #47 Estos son mis estilos críticos. Sólo cargamos esto en el head. No debería ser externo.
- #48 Hay que hacer algo que nos dijeron siempre que no hagamos. Ponerlos en línea.
- #49 Nos aseguramos que el navegador tiene todo lo que necesita en la primer respuesta del servidor.
- #51 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.
- #53 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.
- #56 Buscar en cache los recursos luego de la primer visita. Acelera muchísimo las visitas posteriores.
- #57 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.
- #58 Hasta ahora sólo teoría. La práctica depende del contexto. Necesidades y usuarios son diferentes.
- #60 Adaptar a nuestras propias necesidades. Cualquiera de estos dos scripts no debería bloquear el render.
- #62 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.
- #63 Adaptar a nuestras propias necesidades. Cualquiera de estos dos scripts no debería bloquear el render.
- #64 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.
- #66 Tag <noscript> traemos los estilos completos.
- #68 Diferentes maneras de generarlos. Depende del contexto y tamaño del proyecto.
- #69 Herramientas automatizadas. Sumar a nuestro workflow. Task runner: Gulp, Grunt. Stand alone.
- #71 También tiene un generador online.
- #72 Critical de Addy Osmani. Out: mayor o menor medida, estas herramientas toman parámetros configurables, y extraen estilos que se renderizan en pantalla.
- #73 Si trabajamos con un preprocesador. Nuestro código está bien organizado.
- #76 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.
- #77 Finales del año pasado. Primer experiencia: desastrosa pero beneficiosa. Hermosa contradicción.
- #78 Primera implementación. Más palos. Mejores resultados. Implementación en otros lados, experiencias más felices.
- #82 Mejor experiencia basándonos en performance.
- #83 A simple vista parece sencillo.
- #86 Codebase viejo. A punto de arrancar el diseño actual. No teníamos buena modularización. Workflow de Gulp débil.
- #87 Lo que sí teníamos era un deadline.
- #88 Los generamos online.
- #89 De manera artesanal. Dependencias: Estilos propios Librería UI Vendors
- #90 Más de 20 compilaciones para todas las combinaciones. Siguieron apareciendo casos de uso.
- #92 Se imaginarán el lío. Hasta acá todo más o menos bien. Hasta que se comenzaron a agregar fixes y features.
- #93 Mantener los bundles de estilos críticos se tornó imposible. “mírame y no me toques”.
- #94 Sin embargo...
- #95 Excelentes resultados.
- #96 Para una experiencia desastrosa.
- #97 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.
- #98 Usuarios percibían la carga de la página, en promedio, un segundo entero antes.
- #99 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
- #100 Punto de vista de negocio.
- #101 Un poco más del 2% en la tasa de conversiones. Parece poco pero es muchísimo.
- #103 Acelear significativamente la carga. Brindar mejor experiencia a nuestros usuarios.
- #104 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.