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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Medidas reales y monitoreo constante

37/38
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

🚇 Medidas reales y monitoreo constante

<h4>Ideas/conceptos claves</h4>

RUM viene de Real User Metric

medidas de laboratorio Son aquellas las cuales tenemos pleno control de lo que está sucediendo y el proyecto este o en local o en el servidor propio

<h4>Apuntes</h4>
  • Nuestras medidas actuales son llamadas medidas de laboratorio
  • Esto no representa la realidad para nuestros usuarios
  • Por ello debemos tomar medidas reales de nuestro sitio
<h3>Métricas reales</h3>
  1. Medidas en el sitio de producción
  2. Monitoreo constante e histórico
  3. Cumplir las métricas para los usuarios del percentil 75

RESUMEN: Deberíamos medir nuestro sitio en producción debido a que las métricas vistas son de laboratorio

Existe tambien un medidor por parte de Google: https://developers.google.com/speed/pagespeed/insights/?hl=es

👌