En esta nueva entrada vamos a ver el meta tag (meta etiqueta) DNS prefetch con el que podemos optimizar la carga de nuestra web con resolviendo previamente los DNS que usamos en el código.
¿Qué es DNS prefetch y qué mejora obtenemos?
Pueden ser una o varias meta etiquetas que se colocan dentro del head, en ellas se establecen los dominios de los cuales vamos a necesitar cargar recursos en nuestra web.
Estos recursos pueden ser desde Java Script, CSS, imágenes, CDN o códigos externos como las semillas de Google Analytics, plugins de Facebook…
De esta manera precargamos los dominios (DNS) para que se resuelva la IP de la cual se descargarán los recursos requeridos, y así evitamos que esa resolución de la IP se haga justo cuando se requiera la carga del recurso.
Una vez insertados los códigos obtendremos un tiempo de carga de página menor, quizás a simple vista no lo notemos pero a nivel de servidor los milisegundos se harán notar y mejoramos el WPO (Web Page Optimization).
Código de ejemplo
Os muestro un código de ejemplo de la meta etiqueta DNS prefetch:
En el caso que usemos la librería de jQuery alojada en los servidores de Google https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js el código de precarga sería el siguiente:
|
1 |
<link rel="dns-prefetch" href="//ajax.googleapis.com"> |
Podemos poner tantas etiquetas necesitemos dentro del head.