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

No tienes acceso a esta clase

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

Crear cuenta

Si ya tienes una cuenta,

Iniciar sesión
Curso de Optimización Web

Curso de Optimización Web

Jonathan Alvarez

Jonathan Alvarez

Automatizando una auditoría con Lighthouse CI

36/38
Recursos

Aportes 4

Preguntas 0

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 un año

👾 Performance budget y auditorias automatizadas

<h4>Ideas/conceptos claves</h4>

Performance badged ⇒ Presupuesto del performance del sitio, con auditorias constantes, además que el sitio deba cumplir estos presupuestos

<h4>Apuntes</h4>
  • Debemos asegurar las optimizaciones a lo largo del tiempo
  • No vale la pena, se vean opacadas por nuevos cambios

No se controla lo que no se continúa midiendo

  • El Performance budget trata tres puntos
    1. Elige tus métricas
    2. Establece un límite
    3. Automatiza la auditoría
  • Automatizar:
    • Lighthouse
    • Webpack
    • Scripts
  • Podemos mandar todo este trabajo al CI

RESUMEN: Podemos automatizar el proceso de medir nuestro sitio mediante lighthouse CLI el cual puede funcionar en GitHub Actions. Para eso debemos tener claro cuáles son nuestras métricas y establecer los límites de las mismas

Adrian Manrique Manrique

Adrian Manrique Manrique

hace 2 años

Super funcional integrarlo al CI !!

Sebastián Buitrago

Sebastián Buitrago

hace un año

no hagan el push force ajajajja dejen que el profesor lo haga que es un experto pero nosotros los novatos no jajajaja

Naldo Duran

Naldo Duran

hace un año

👌