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

Priorización de recursos

9/38
Recursos

Aportes 15

Preguntas 7

Ordenar por:

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

¿Si estamos en React, y usamos algo como Styled components, que se puede usar allí para emular este comportamiento?

💇‍♀️ Priorización de recursos

<h4>Ideas/conceptos claves</h4>

Se debe tener un balance entre lo que necesita la app y como le podemos ayudar al navegador

Todas las herramientas que serán vistas dentro de todo el curso serán de doble filo como podemos ayudar al navegador también podemos hacer que su trabajo sea más duro

<h4>Apuntes</h4>
  • No todos los recursos tienen la misma prioridad
  • Por ejemplo, en el CSS pasa que metemos todos los estilos para todos los casos que se pueden llegar a dar
    • Estilos dark mode
    • Estilos de desktop
    • Estilos de tablet
    • Estilos de mobile
  • Pénesenos en el caso de alguien que navega en el móvil, el deberá descargar todos estos estilos, así no le sea de interés o relevantes
  • Con la priorización de recursos en CSS podemos ayudarle a navegador a darles “pistas” para decirle cual tiene mayor prioridad
<!-- Especificamos el atributo media -->
<link
  rel="stylesheet"
  href="/desktop.css"
  media="screen and (min-width: 600px)"
/>
  • Esta técnica es simple pero eficiente
  • Nos ayuda bastante a decirle al navegador que puede ser importante que cargue y que no
  • Se debe considerar que cada vez que hagamos esto sera un nuevo request que debamos hacer hacia el servidor

RESUMEN: Podemos decirle al navegador que recursos tengan una prioridad mayor con el atributo media en los elementos link, pero se debe tener cuidado porque cada archivo nuevo sera una nueva petición HTTP

Lo bueno que si utilizamos http2 eso favorece a la descarga asíncrona de varios archivos a la vez. Cosa que antes no sucedia y que mejor era recomendable tener la menor cantidad de requests posibles. Obvio, en algunas cosas siempre aplica lo de menos es más.

Yo siempre había colocado los medias al final del css. Siempre hay algo nuevo que aprender.

Yo creo que no es necesario hacerlo siempre y cuando los códigos de css en la media query para desktop sean muchos, si son unas simples líneas no hay necesidad de hacerlo!

WOOOOOWWWm esto no lo sabia, que genial

El código que utilizó el maestro para el dark mode es:

<link media="(prefers-color-scheme: dark)" rel="stylesheet" href="/css/dark.css">

Es la misma media query pero con diferente valor.

wooooo, el profe es una máquina, su sitio web esta increible

Increíble clase, en resumen, un gran poder conlleva una gran responsabilidad.

Si conocia lo de los media queries en los link, pero no sabia lo de la prioridad

instale un plugin en el navegador que cambia el tema de los sitios webs y miren como se ve platzi

esta genial, como se haria esto con webpack?

excelente herramienta las aplicadas… voy a trabajar en eso

Tengo el siguiente error, ¿a qué se deberá?

👌