Preloading y prefetching de recursos

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.

🗃️ Preloading y prefetching de recursos

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

• Podemos decir al navegador cuales son los recursos y dominos que se debe conectar o descargar de forma anticipada
• Existen 3 estrategias para poderlo hacerlo
  • Preload (recursos)
  • Prefetch (recursos)
  • Preconnect (dominios)

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />

• podemos especificar con el atributo rel las estrategias para realizar este proceso

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.

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

1. Preload (recursos). Recursos que se descargan junto con el html.
2. Prefetch (recursos). Recursos que se descargan para un uso futuro.
3. Preconnect (dominios). Conexión anticipada a recursos de servidores remotos.

El crossOrigin que quiere decir?

3 Estrategias:

• Preload (recursos) se trata de un fetch declarativo en el que le decimos al navegador; "Este recurso tienes que descargarlo junto con el HTML.
• Prefetch (recursos) es una forma de decirle al navegador; “Este recurso en específico podrías necesitarlo después”.
• Preconnect (dominios) nos ayuda a solucionar el handshacking de HTTP que sucede entre el navegador y los servidores de forma anticipada.

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.

Excelente!!

https://github.com/Jonatan008Repo/css_media_query_example

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

• Preload (recursos)
• Prefetch (recursos)
• Preconnect (dominios)

<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…”

Documentacion

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