Todo lo que aprenderás sobre optimización web

¿Vale el esfuerzo optimizar un sitio web?

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

Aprendiendo a medir

User Performance Metrics

Nuestro proyecto

Etapas de render del navegador

Network waterfall y recursos que bloquean el navegador

Priorización de recursos

Preloading y prefetching de recursos

Fases Paint y Layout del Critical Render Path

Detectando Paints costosos y optimizando animaciones

Bloqueos y complejidad en selectores

WebFonts y su impacto en rendimiento

Imágenes, formato y compresión

Imágenes y compresión

¿WebFont, Imagen o SVG?

Técnicas avanzadas con Lazy Loading

Técnicas avanzadas con Responsive Loading

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

Analizando el bundle de la aplicación

Reduciendo el tamaño del bundle

Code Splitting

Lazy Module Loading

Llevando los listeners a otro nivel

Instalando Modal video

Lazy loading del modal

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

Aplicando SSR

Pre-renderizando el contenido: Static Generation

Cómo funciona el Caché de recursos y CDN

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

Aplicando Github Actions

Interceptando los requests del navegador con Service Workers

Performance budget y auditorias automatizadas

Automatizando una auditoría con Lighthouse CI

Conclusiones