En muchos casos cuando cargamos nuestro sitio web sabemos que vamos a hacer llamadas a elementos externos, a otros hostname, tanto nuestros como de terceros.
Estas llamadas a otros hostname requerirán que se hagan peticiones a las DNS en el momento en el que se encuentre el elemento. Para esto usaremos el sistema de preconnect que básicamente lo que harán es hacer una llamada para precalcular las DNS antes de que se haga la petición real.
Esta llamada, al hacerse previamente y en paralelo a otros elementos permitirá que se reduzca el tiempo a la hora de cargar el otro elemento.
Cualquier hostname que no sea el propio de dominio debería encontrarse en este sistema de preconnect.
Un ejemplo de llamada podría ser similar a esta:
<link rel="preconnect" href="//example.com/">Por otro lado, podemos presuponer que cuando un usuario entra en una página que no s la principal del sitio pueda llegar a entrar en ella. O por ejemplo que un artículo que tenemos paginado, tras la página 1 va a cargar la página 2, o que un usuario que está en una tienda acabará llegando al carrito.
Para estos casos podemos plantear cargar en la caché del navegador otra página o contenido para que, en caso de que ello ocurra, lo haga mucho más rápido.
Un ejemplo podría ser similar a este:
<link rel="prefetch" href="/index.html" as="document">Para acabar, también podemos precargar elementos que se van a usar posteriormente en la página. En este caso se puede aplicar con cierta frecuencia a elementos que sabemos que pueden bloquear la carga de la página, como ciertos scripts.
<link rel="preload" href="/critical.js" as="script">Los valores validos del parámetro “as” son:
- audio: <audio>
- document: <iframe> y <frame>
- embed: <embed>
- font: CSS @font-face
- image: <img> y <picture>
- object: <object>
- script: <script>
- style: <link rel=stylesheet> y CSS @import
- track: <track>
- video: <video>
- worker: Workers