Entendiendo el Critical Rendering Path en Navegadores Web

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:11

Entendiendo el Critical Rendering Path en Navegadores Web

Curso de Optimización Web

Clase 7 de 38

Clase 7 / 38

Recursos

¿Qué es el Critical Render Path y por qué es importante?

El Critical Render Path (CRP) es un concepto fundamental para cualquier persona interesada en optimizar sitios web. Esta técnica se refiere al proceso que utiliza el navegador para convertir el código HTML, CSS y JavaScript en píxeles visibles en la pantalla de un dispositivo. Entender el CRP es crucial para mejorar el rendimiento y la rapidez de carga de los sitios web. Este proceso implica cinco etapas que pueden resumirse en tres fases principales: el modelo de objetos, el renderizado y el layout con el painting.

¿Cómo se construye el object model?

En la fase inicial del CRP, se creación dos modelos de objetos fundamentales: el DOM (Document Object Model) y el CSSOM (CSS Object Model).

DOM (Document Object Model):
- Es un árbol jerárquico que representa la estructura del HTML.
- Analiza de arriba hacia abajo los elementos del HTML, como <body>, <h1>, y <p>.
- Ejemplo de HTML en un archivo index.html:
```
<body>
  <h1>Hola</h1>
  <p>Platzi</p>
</body>
```
CSSOM (CSS Object Model):
- Representa las reglas y estilos aplicados en CSS.
- También se estructura como un árbol que analiza etiquetas y reglas CSS desde arriba hacia abajo.
- Ejemplo de archivo de estilos styles.css:
```
h1 {
  color: salmon;
}
p {
  display: none;
}
```

Ambos modelos definen cómo se verá y comportará la página web. La construcción correcta de DOM y CSSOM es crucial para una carga eficiente del sitio.

¿Qué ocurre durante el renderizado?

Una vez creados el DOM y el CSSOM, el siguiente paso es fusionarlos. A esta etapa se le conoce como el render tree. En esta fase, el navegador determina qué elementos deben ser pintados en pantalla.

Render Tree:
- Se combina el contenido del DOM y del CSSOM.
- Se identifican los elementos de la página que tienen efectos visibles (por ejemplo, aquellos sin display: none).
- El árbol resultante contiene solo los elementos que necesitan ser visibles en la pantalla.

Por ejemplo, si un h1 tiene definido un color y el p está oculto, solo el h1 será mostrado. Este proceso reduce el trabajo necesario para renderizar la interfaz y optimiza el rendimiento del sitio.

¿En qué consiste el layout y el painting?

La fase final del CRP incluye las actividades de layout y painting donde efectivamente se pintan los elementos en la pantalla.

Layout (Geometría de la página):
- Se determina cuánto espacio ocuparán los elementos en la ventana o viewport.
- Se involucran cálculos geométricos basados en los estilos aplicados.
- Usa el modelo de caja CSS (Box Model) para definir el tamaño y posición de cada elemento visible.
Painting (Dibujo de los píxeles):
- Es el proceso de dibujar los elementos visibles identificados por el render tree.
- Se colorean los píxeles de la pantalla siguiendo las reglas CSS aplicadas.

Para ilustrar, si un h1 ocupa el 100% de ancho y está dentro del viewport, se dibujará de acuerdo a su estilo (por ejemplo, color salmón).

Consejos prácticos para optimizar tu sitio web

Minimización del CRP:
- Reduce la cantidad de archivos CSS y JS a cargar.
- Usa carga diferida (lazy loading) para imágenes o recursos no críticos.
- Minimiza el uso de @import en CSS, ya que pueden ser bloqueantes.
Pre-rendering y pre-fetching:
- Implementa técnicas como preload que cargan recursos críticos más rápido.
Revisar scripts y hojas de estilo:
- Evita el uso innecesario de scripts sincrónicos que bloquean el renderizado.

A través de estas estrategias, puedes lograr tiempos de carga más rápidos y una experiencia de usuario más suave, generando así un sitio web más eficaz y atractivo para los visitantes. Continúa expandiendo tus conocimientos en optimización web para lograr resultados aún más sorprendentes. ¡Sigue aprendiendo y mejorando tus habilidades!

Fernando Quinteros Gutierrez

Hace 6 años

🧭 Etapas de render del navegador

Ideas/conceptos claves

Critical Render Path. - es el proceso de tomar el código HTML, CSS y JS para convertirlos en pixeles en la pantalla

DOM. - Document Object Model

CSSOM. - un árbol similar al DOM, pero para CSS

Apuntes

Critical Render Path

Se compone de 5 etapas.

Object Model [etapas 1 y 2]

Tenemos un index.html

<body>
	<h2>Hallo</h2>
	<p>Hallo</p>
</body>

Tenemos un CSS

h1 {
	color: salmon;
}

p {
	display: none;
}

Se construye el DOM
Construye un árbol de arriba hacia abajo
También se construye el CSSOM

Render Tree [etapa 3]

Seguiríamos teniendo los mismos elementos HTML
solo que en este proceso se distingue que va a pintar y que no

Layout | Paint [etapas 4 y 5]

Lo primero que hace es ver el ancho disponible para pintar ⇒ Viewport ⇒ width-device
Dependiendo del ancho se estima algunas cosas como el box model

RESUMEN: Lo que ha sucedido aquí fue que se construyó el DOM [HTML], CSSOM [CSS], Se renderizo [HTML + CSS], Se hizo el layout [cálculos geométricos] y se pintó en la pantalla [Dibujar los pixeles en la pantalla].

Comentarios (14)14 comentarios

Nathaly Stefani Riaño Bejarano

Rodrigo Rodriguez

Hace 5 años

Luis Alejandro Vera Hernandez

Danilo Valenzuela

Sergio Alejandro Trejo Cuxim

Jonathan 🦑 Alvarez

Profesor

Mauricio Costanzo

Sergio Leonardo González Fonseca

Hace 4 años

Cindy Mora

Hace 3 años

Paolo Joaquin Pinto Perez

Ariel Chura

Héctor Eduardo López Carballo

Cesidio Antonio Di Benedetto Carri

Miguel Angel Reyes Moreno

Kenneth Angulo L

Hace un mes

Luis Ángel Morales Hernández

Hace 2 años

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Entendiendo el Critical Rendering Path en Navegadores Web