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 rendimiento

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

Cómo funciona el Caché de recursos y CDN

31/38
Recursos

Aportes 7

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Es Content Delivery Network, pero eso no afecta para nada la explicación.

🕷️ Cómo funciona el Caché de recursos y CDN

<h4>Ideas/conceptos claves</h4>

CDN viene de Content Delivery Network, nos ayuda a poner servidores distribuidos por todo el mundo

latencia es el tiempo de ida y vuelta de un cliente hacia el servidor

<h4>Apuntes</h4>
  • Redes Distribuidas ⇒ CDN
  • Cuando tenemos nuestros sitios web, ese navegador se está conectando a un servidor que está en otro lugar
    • Con ayuda del servidor, el navegador sabe cuándo ha cambiado la información
  • Los servidores tienen diferentes métodos para indicar que el contenido cambio
    • Como ser HTTP 304 ⇒ El contenido no ha cambiado
    • ETAG
    • Headers del navegador para dar un tiempo de vida para manejar el tiempo de vida
  • Cuando únicamente tenemos un servidor, podemos tener un cliente bastante lejos del mismo eso significara que tomara más tiempo que uno que esté más cerca del cliente
    • CDN se encarga de este tipo de operaciones para mejorar la velocidad de carga
  • Eso nos ayuda a reducir la latencia

RESUMEN: Podemos mejorar el tiempo de carga de nuestros sitios utilizando un CDN de tal forma que se pueda encontrar un servidor lo más cerca posible del usuario para mandarle la información y reducir la latencia

Sera por eso que en el reproductor de platzi hay server A, B y C? 🤔

Resumen

Son redes distribuidas por el mundo que nos ayudan a optimizar nuestras paginas.

Memoria Caché es un componente de hardware o software que guarda datos para que las solicitudes futuras de esos datos se puedan atender con mayor rapidez. Generalmente, da velocidad de acceso mas rápido a la información porque es mas fácil la lectura de esta que volver a calcular un resultado o leer desde un almacén de datos mas lento como un disco duro.
|
De esta manera, se llama caché web a la memoria que almacena documentos web para reducir el ancho de banda consumido, la carga de los servidores y retardos en la descarga. Este almacena copias de los documentos que pasan por él, de forma que subsiguientes peticiones puedan ser respondidas mas rápidamente.
|
Tipos de cachés web:

  • User Agent caché: presente en los navegadores, son caches privados que funcionan para un único usuario.
  • proxy-caches directos: son implementados por intermediarios en la comunicación cliente servidor para servir paginas a varios usuarios.
  • proxy-caches inversos: también llamada cache del lado del servidor, funcionan reteniendo las respuestas de los servidores web ante los que se encuentra, reduciendo eficazmente su carga y latencia. Puede hacerse funcionar conjuntamente varias cachés pasarela para implementar una red CDN

|
CDN (Content Delivery Network) es una red formada por un grupo de servidores distribuidos geográficamente que trabajan juntos para ofrecer una entrega rápida de contenido de Internet. la CDN no aloja contenido y no puede reemplazar la necesidad de un alojamiento web adecuado. Pero en su lugar ayuda a almacenar en caché el contenido en el perímetro de la red, lo que mejora el rendimiento
|
¿Cuáles son los beneficios de utilizar una CDN?

  • Mejora de los tiempos de carga del sitio web: al distribuir el contenido más cerca de los visitantes del sitio web mediante un servidor de CDN cercano (entre otras optimizaciones), los visitantes se benefician de tiempos de carga de página más rápidos.
  • Reducción de los costes de ancho de banda: Mediante el almacenamiento en caché y otras optimizaciones, las CDN pueden reducir la cantidad de datos que debe proporcionar el servidor de origen
  • Aumento de la disponibilidad de contenido y la redundancia: Gracias a su naturaleza distribuida, una CDN puede gestionar más tráfico y tolerar fallos de hardware mejor que muchos servidores de origen.
  • Mayor seguridad del sitio web: una CDN puede reforzar la seguridad, ya que ofrece mitigación de DDoS, mejoras de los certificados de seguridad y otras optimizaciones.

Latino América No tiene servidores 😭

👌