Entendiendo el rendimiento

1

Todo lo que aprenderás sobre optimización web

2

¿Vale el esfuerzo optimizar un sitio web?

3

¿Cuándo realmente un sitio es rápido o lento?

Antes de optimizar...

4

Aprendiendo a medir

5

User Performance Metrics

6

Nuestro proyecto

Crítical Rendering Path

7

Etapas de render del navegador

8

Network waterfall y recursos que bloquean el navegador

9

Priorización de recursos

10

Preloading y prefetching de recursos

11

Fases Paint y Layout del Critical Render Path

CSS

12

Detectando Paints costosos y optimizando animaciones

13

Bloqueos y complejidad en selectores

WebFonts

14

WebFonts y su impacto en redimiento

Imágenes, Iconos y SVG

15

Imágenes, formato y compresión

16

Imágenes y compresión

17

¿WebFont, Imagen o SVG?

18

Técnicas avanzadas con Lazy Loading

19

Técnicas avanzadas con Responsive Loading

Aplicaciones JavaScript

20

JavaScript y aplicaciones modernas y Utilizando un servidor de producción

21

Analizando el bundle de la aplicación

22

Reduciendo el tamaño del bundle

23

Code Splitting

24

Lazy Module Loading

25

Llevando los listeners a otro nivel

26

Instalando Modal video

27

Lazy loading del modal

28

Moviendo la carga de rendering hacia el servidor: Server Side Rendering

29

Aplicando SSR

30

Pre-renderizando el contenido: Static Generation

Caché

31

Cómo funciona el Caché de recursos y CDN

32

Deploy en Netlify y automatización de contenido en GitHub Actions

33

Aplicando Github Actions

34

Interceptando los requests del navegador con Service Workers

Performance Budget

35

Performance budget y auditorias automatizadas

36

Automatizando una auditoría con Lighthouse CI

37

Medidas reales y monitoreo constante

Conclusiones

38

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Fases Paint y Layout del Critical Render Path

11/38
Recursos

Aportes 12

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

🖌️ Fases Paint y Layout del Critical Render Path

<h4>Ideas/conceptos claves</h4>

El paint es la operación más costosa que puede hacer un navegador

<h4>Apuntes</h4>
  • Estas etapas son inevitables al momento de cargar CSS y JS
    • Podemos tener cuidado al momento de ejecución de ambos

Cualquier cambio en una propiedad que no sea opacity o transform genera un Paint

  • Toda la etapa de renderización se puede ver bloqueada y afectada por lo que pase en el paint

  • Podemos controlarlo con nuestras animaciones

  • Si tenemos cuidado con las animaciones y las reglas del CSS con los elementos de la pagina

    • Podemos ayudar que el navegador reduzca Complejidad y cantidad de procesos que debe hacer para volver a pintar los elementos
  • Facebook está consciente acerca de esto al punto que ellos para su navbar usan una sprites antes que una sombra

    • Esta técnica es usar una imagen pequeña y multiplicarla varias veces
    • Decidieron usar esta técnica debido a que el CSS causaba muchos problemas al momento de hacer scroll

RESUMEN: Debemos tener bastante cuidado con el paint debido a que es un proceso bastante pesado y puede afectar a la experiencia de nuestros usuarios para ello podemos usar técnicas como lo hizo Facebook

me dejo sin palabras la decisión de facebook por no usar box-shadow

Cualquier cambio en una propiedad que no sea opacity o transfom, genera un Paint

el repintado (repaint) realmente es menos costoso que el layout (reflow) , esto se debe porque en el repintado , lo que pasa es que hay un cambio de pixeles en la pantalla , claro esta que si es un cambio duro porque debe pasar por los elementos y determinar las diferentes propiedades visuales de dichos elementos (visibilidad , color , etc … ) , y luego actualiza las partes que cambiaron , pero el reflow o layout es mas costoso porque , tiene que volver a calcular , la posición y la dimension de los diferentes elementos , y este puede causar que los elementos ancestros a el , o hijos , tambien tengan un reflow , pero lo que pasa es que al final de todo este proceso , tiene que volver a hacer un repintado (repaint) , entonces en pocas palabras , para el repintado , es un proceso es costoso si , pero el reflow o layout son dos procesos , el analisis del calculo de diseño de elementos + repintado , entonces es mucho mas costoso , intentar no causar reflujos innecesarios , debido a que vas a tener que hacer los dos procesos mencionados .

Hace poco (Mayo de 2021) salió un curso de Transformaciones y transiciones en CSS, y en una clase en formato texto se habla de eso de las etiquetas no recomendadas para animar por el costo, es muy recomendada: https://platzi.com/clases/2336-transformaciones-transiciones-css/38126-propiedades-recomendadas-y-no-recomendadas-para-an/

Recordatorio: El Paint es la operación mas costosa.

<h4>Fases Paint y Layout del Critical Render Path</h4>

Cualquier cambio en una propiedad que no sea opacity o transform, genera un Paint.

Paint es la operación más costosa que puede hacer un navegador.

El paint es la operacion mas costosa que puede hacer un navegador

Que chévere ejemplo. Ojala hayan mas así a lo largo del curso 😄

Paint = Pain

haha que ironía, recuerdo hace años que usaba puros sprites en las webs que trabajaba, cuando llegó css3 me puse a reemplazar todas esas imágenes por box-shadow sin saber que en vez de una mejora era todo lo contrario.

👌