Publicité
Check these out next
Speed up! Critical css to the rescue
21 Oct 2016•0 j'aime•251 vues
1 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Télécharger pour lire hors ligne
Signaler
Technologie
Ami Reynoso
melidevelopersSuivre
Publicité
Publicité
Publicité
Speed up! Critical css to the rescue
- 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; }
- 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
- 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! *
- -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
Notes de l'éditeur
- 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
- Respuesta instantánea
- Atención completa. Pasado el segundo, comienza a sentir que pierde el control. Empieza a desenfocarse.
- 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.
- La forma que tenemos de mejorar la percepción del usuario es optimizar el rendering path.
- ¿Quiénes acá escucharon hablar del rendering path?
- Hasta que la página termina de renderizarse en pantalla.
- Términos simplistas. Serie de eventos que desarrolla el browser para cumplir este objetivo.
- En el camino hay un trayecto crítico. Repasemos en detalle el camino.
- Un poco más de control. Caso: HTML sencillo, algunas imágenes, una hoja de estilos y un archivo JS. Respuesta “pequeña”.
- 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.
- 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.
- 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).
- Layout o reflow. Calcula el tamaño y posición de cada elemento en el viewport.
- 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.
- Todo esto nos perjudica en performance. Veamos cómo hacerlo mejor.
- Evitemos tener múltiples requests. Cambia el paradigma con HTTP2
- Si pueden usar resource hints, sería un golazo. Preconnect y DNS-Prefetch.
- 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.
- 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
- Ya sabemos que es el rendering path, como lo podemos optimizar, ahora como entra CSS? Percepción del usuario
- 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?
- 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?
- 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.
- 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”.
- Estos son mis estilos críticos. Sólo cargamos esto en el head. No debería ser externo.
- Hay que hacer algo que nos dijeron siempre que no hagamos. Ponerlos en línea.
- Nos aseguramos que el navegador tiene todo lo que necesita en la primer respuesta del servidor.
- 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.
- 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.
- Buscar en cache los recursos luego de la primer visita. Acelera muchísimo las visitas posteriores.
- 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.
- Hasta ahora sólo teoría. La práctica depende del contexto. Necesidades y usuarios son diferentes.
- Adaptar a nuestras propias necesidades. Cualquiera de estos dos scripts no debería bloquear el render.
- 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.
- Adaptar a nuestras propias necesidades. Cualquiera de estos dos scripts no debería bloquear el render.
- 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.
- Tag <noscript> traemos los estilos completos.
- Diferentes maneras de generarlos. Depende del contexto y tamaño del proyecto.
- Herramientas automatizadas. Sumar a nuestro workflow. Task runner: Gulp, Grunt. Stand alone.
- También tiene un generador online.
- Critical de Addy Osmani. Out: mayor o menor medida, estas herramientas toman parámetros configurables, y extraen estilos que se renderizan en pantalla.
- Si trabajamos con un preprocesador. Nuestro código está bien organizado.
- 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.
- Finales del año pasado. Primer experiencia: desastrosa pero beneficiosa. Hermosa contradicción.
- Primera implementación. Más palos. Mejores resultados. Implementación en otros lados, experiencias más felices.
- Mejor experiencia basándonos en performance.
- A simple vista parece sencillo.
- Codebase viejo. A punto de arrancar el diseño actual. No teníamos buena modularización. Workflow de Gulp débil.
- Lo que sí teníamos era un deadline.
- Los generamos online.
- De manera artesanal. Dependencias: Estilos propios Librería UI Vendors
- Más de 20 compilaciones para todas las combinaciones. Siguieron apareciendo casos de uso.
- Se imaginarán el lío. Hasta acá todo más o menos bien. Hasta que se comenzaron a agregar fixes y features.
- Mantener los bundles de estilos críticos se tornó imposible. “mírame y no me toques”.
- Sin embargo...
- Excelentes resultados.
- Para una experiencia desastrosa.
- 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.
- Usuarios percibían la carga de la página, en promedio, un segundo entero antes.
- 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
- Punto de vista de negocio.
- Un poco más del 2% en la tasa de conversiones. Parece poco pero es muchísimo.
- Acelear significativamente la carga. Brindar mejor experiencia a nuestros usuarios.
- 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.
Publicité