Curso de Optimización Web
Curso de Optimización Web

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

Curso de Optimización Web

Curso de Optimización Web

Jonathan Alvarez

Jonathan Alvarez

Etapas de render del navegador

7/38
Recursos

Aportes 9

Preguntas 1

Ordenar por:

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

Fernando Quinteros Gutierrez

Fernando Quinteros Gutierrez

hace 2 años

🧭 Etapas de render del navegador

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4> <h3>Critical Render Path</h3>

Se compone de 5 etapas.

<h4>Object Model [etapas 1 y 2]</h4>
  • Tenemos un index.html
<body>
	<h1>Hallo</h1>
	<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
<h4>Render Tree [etapa 3]</h4>
  • Seguiríamos teniendo los mismos elementos HTML
  • solo que en este proceso se distingue que va a pintar y que no
<h4>Layout | Paint [etapas 4 y 5]</h4>
  • 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].

Danilo Valenzuela

Danilo Valenzuela

hace 2 años
Sergio Alejandro Trejo Cuxim

Sergio Alejandro Trejo Cuxim

hace 2 años
<h3>Ruta de acceso de representación crítica (Critical Rendering Path)</h3>

Optimización de la ruta de acceso de representación crítica hace referencia al hecho de priorizar la representación de contenido relacionado con la acción actual del usuario.

Les comparto enlaces de estudio:

  1. Modelo de objetos
  2. Construcción, diseño y pintura del árbol de representación

Gracias profesor

Nathaly Stefani Riaño Bejarano

Nathaly Stefani Riaño Bejarano

hace un año

Proceso de renderizado del navegador

Composite: Maneja las capas individuales y asegura el orden correcto de estas capas.
'
*: Los procesos que están marcados con un *, son procesos que podrían ser re ejecutados debido a cambios visuales, debido a que con JS, con CSS o con la API de Web Animations podemos hacer cambios visuales en la página, por ejemplo: ordenar una lista o agregar elementos al DOM.

Paolo Joaquin Pinto Perez

Paolo Joaquin Pinto Perez

hace un año

Critical Render Path

  1. Construye el DOM
  2. Construye el CSSOM
  3. Se renderiza, (Fusiona ambos)
  4. Layout (calcula el ancho segun el viewport le da un modelo de caja = box model)
  5. Pinta todo en la pantalla
ArielScc

ArielScc

hace 2 años
Luis Alejandro Vera Hernandez

Luis Alejandro Vera Hernandez

hace 10 meses

💻 Etapas de render del navegador

Es el proceso de tomar el codigo HTML CSS y JS para convertirlos en pixeles en la pantalla
.
5 etapas:
- Etapa 1 y 2: Object Model
- Etapa 3: Render Tree
- Etapa 4 y 5: Layout / Paint
.
Object Model

  • Es donde se construye el DOM
  • Construye un árbol de arriba hacia abajo
  • También se construye el CSSOM
    .
    Render Tree
  • En este proceso se distingue que va a pintar y que no
    .
    Layout / Paint
  • Calcula el ancho disponible del viewport para poder pintarlo
Miguel Ángel Reyes Moreno

Miguel Ángel Reyes Moreno

hace un año
<h4>Etapas de render del navegador</h4>

5 Etapas, resuminas en 3 fases:

1 y 2 -> Object model: Crea el DOM (Document Object Model) para el HTML y CSSOM para el CSS
3 -> Render tree: Fusiona el DOM y el CSSOM
4 y 5 -> Layout | Paint: Creamos el layout y pintamos los elementos en la pantalla

Archivo index.html:

<body>
  <h1>Hallo</h1>
  <p>Platzi</p>
</body>

Archivo .css

h1{
  color: salmon
}
p{
  display:none
}
Cesidio Antonio Di Benedetto Carri

Cesidio Antonio Di Benedetto Carri

hace 3 meses

Este puede ser un gran complemento para esta increible clase!

Critical Render Path