Entendiendo el rendimiento
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?
Antes de optimizar...
Aprendiendo a medir
User Performance Metrics
Nuestro proyecto
Crítical Rendering Path
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
CSS
Detectando Paints costosos y optimizando animaciones
Bloqueos y complejidad en selectores
WebFonts
WebFonts y su impacto en rendimiento
Imágenes, Iconos y SVG
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
Aplicaciones JavaScript
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
Caché
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
Performance budget y auditorias automatizadas
Automatizando una auditoría con Lighthouse CI
Medidas reales y monitoreo constante
Conclusiones
Conclusiones
You don't have access to this class
Keep learning! Join and start boosting your career
To optimize the resource load of a web application, it is essential to understand how we can help the browser to anticipate and speed up these loads. Preload, prefetch and preconnect strategies allow us to tell the browser how to handle resource offloading, significantly improving performance and user experience. Below, we explore each strategy in detail.
Preload is a technique that allows developers to tell the browser to offload a specific resource along with the HTML of the page. It is particularly useful when we know which resources are critical for the initial rendering of our application, thus allowing them to be ready as soon as possible.
<link rel="preload"> element in the HTML, specifying the exact resource that needs to be loaded.Prefetch is another useful technique for improving performance, which suggests to the browser the possibility of needing a resource in the future. This strategy is more forward-looking and considers that the user might interact with page elements that require additional resources.
<link rel="prefetch">, anticipating possible but non-essential resources for the initial load.Next.js and Gatsby, two popular React frameworks, make aggressive and effective use of preload and prefetch. This is what makes them powerful options for applications with high performance demands:
preload efficiently through code splitting, dividing the JavaScript bundle into small modules that are loaded as needed.Preconnect is a strategy that works at the connection level, allowing an early connection to be established to servers that will provide future resources. This saves time in the HTTP handshake, especially for external domains.
<link rel="preconnect"> and optionally <link rel="dns-prefetch">, to resolve DNS and network connections before they are actually needed.To illustrate preconnect, in a typical project we might encounter the following connections:
fonts.gstatic.com to get fonts quickly.kitsu.io, used here to get data needed for specific functions of our application.media.kitsu.io, all under the same domain to simplify image loading.In HTML, they would be implemented as follows:
<link rel="preconnect" href="https://fonts.gstatic.com" /><link rel="dns-prefetch" href="https://fonts.gstatic.com" /><link rel="preconnect" href="https://kitsu.io" /><link rel="dns-prefetch" href="https://kitsu.io" /> />With these tools and techniques implemented, we significantly improve the performance of our web applications, enabling a smooth and fast user experience. It is crucial to experiment and adapt these strategies based on the specific behavior and needs of your application. Keep exploring and optimizing your projects!
Contributions 19
Questions 5
Esto no tiene nada que ver con el curso, es un dato curioso. ¿Han notado que cada que inicia un video y aparece la palabra “Platzi” también hay una voz muy leve susurrandote "Platzi?
jaja Regalame tu like si devolviste el video para tratar de escuchar.
Pdta: Es Cierto 😄
Preload: Recurso que se descarga junto con el html
Prefetch: recurso que se descarga para un uso futuro
preconnect: conexión anticipada a recursos de servidores remotos.
Preload. - Recurso que se descargue junto el HTML
Prefetch. - Recurso que en el futuro se podrá usar
Precconect. - Conexión anticipada a recursos de servidores remotos
<h4>Apuntes</h4>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
RESUMEN: Si le decimos al navegador de forma anticipada que recursos necesita o a que dominios se puede conectar de una forma anticipada podemos mejorar el rendimiento de nuestros sitios
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
<link rel="preconnect" href="https://kitsu.io/" crossorigin />
<link rel="dns-prefetch" href="https://kitsu.io/" />
no comprendo porque Next.js llama scrip con link?
que buen curso platzi!.. me encanta la voz del profe
Si desean saber mas acerca de , dns-prefetch , les dejo el enlace , donde explica un poco mas del porque de esto , y habla un poco tambien de que hace el preconnect , esta interesante , se los recomiendo.
3 Estrategias:
Next.js usa mucho preload, hace un muy buen trabajo diviendo el bundle de JS en partes muy pequeñas. Esta técnica se conoce como code spliting.
Para los que estén haciendo el curso después del sep 2021, pueden ver el efecto del preload en el footer, en more y general resources, ya que en el nav al menos a mi no me precargaba las cosas como al profe
El crossOrigin que quiere decir?
Excelente!!
Por si alguien mas quedó con la duda de que es http handshaking:
https://www.cloudflare.com/learning/ssl/what-happens-in-a-tls-handshake/
Estrategias
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
<link rel="preconnect" href="https://kitsu.io/" crossorigin />
<link rel="dns-prefetch" href="https://kitsu.io/" />
“DNS-prefetch es un intento de resolver los nombres de dominio antes de que se soliciten los recursos. Esto podría ser un archivo cargado más tarde o un destino de enlace que un usuario intenta seguir…”
Luego de aplicar el prefetch y el preconnect a nuestro codigo, como podemos “ver” el impacto que tiene esos cambios en el rendimiento de nuestra aplicacion?
y cómo aplicar estos recursos en frameworks, por ejemplo, en reacts?? Gracias por su ayuda.
jajaja este plugin de dark mode esta haceindo cosas locas miren estos estilos que me aparecieron en esta clase
Want to see more contributions, questions and answers from the community?