Inicio / Programación / Optimizar la carga de nuestra web usando DNS PREFETCH

Optimizar la carga de nuestra web usando DNS PREFETCH

Podría decir que en esta última semana me he dedicado a centrarme en el tema de la optimización de carga de páginas webs y buscar la forma de que estas carguen aún más rápido.

Al llevar algunos años desligado del mundo de la programación sobre todo en la parte Front End; sigo programando mis paneles para gestión bien sea de procesos automatizados, para gestionar el departamento o simplemente para no repetir tareas… No me había preocupado demasiado de actualizarme en todo esto de minificar ficheros CSS, JS, optimizar imágenes y etcétera… La realidad, es un mundo.

Poniéndonos en situación y partiendo de lo más básico, cuando un usuario abre su navegador e introduce la URL a la que quiere acceder, lo primero que este hace es traducir el nombre de esta URL en una dirección IP, lo cual, se conoce como resolución DNS.

Ejemplo:

Cuando en nuestro navegador escribimos https://www.google.es, la acción que realiza nuestro navegador es preguntar al servidor DNS que tengamos configurado la dirección IP de www.google.es.

Lo que sería lo mismo, abrir una consola y lanzar un ping a www.google.es

 

El tiempo que se tarda en realizar la resolución DNS de una dirección URL se mide normalmente en milisegundos ya que realmente es mínimo pero el problema viene cuando en una página web se hace referencia a direcciones URL externas para la carga de ficheros JavaScript (JS), CSS, imágenes, píxeles, fuentes de letras o etcétera; por lo que cada URL en la que se haga referencia a un contenido externo, se convertirá en una nueva petición por parte del equipo del usuario a su servidor DNS para conocer la dirección IP, lo que provocará que el tiempo de carga de la página aumente.

¿Qué es DNS Prefetch?

Si lo que estamos intentando es minimizar el tiempo de carga de la página web y no podemos prescindir de cargar de forma externa ficheros js,css, imágenes y etcétera, es cuando debemos emplear DNS Prefetch o precarga de DNS.

Esto nos va a permitir que el usuario obtenga la resolución DNS de las URL’s al comienzo y no mientras vamos cargando o renderizando la página web.

¿Cómo podemos aplicar DNS Prefetch?

Dentro de las etiquetas <head>, incluiremos los dominios a los que hacen referencia después el contenido externo que necesitamos, por tanto en mi blog, pondríamos los siguientes:

Estas direcciones URL, si utilizamos Chrome, las podemos ver pulsando F12 o agregando en Firefox el plugin “Firebug“.

Podéis ver en la imagen, que yo aún tendría que añadir algunas url’s más, aunque para algunas de ellas mostraré en otro artículo como mantener esos ficheros en nuestro propio servidor y actualizados con tareas cron.

 

Sobre Bosco López

/dev/null

Te puede interesar también

Actualizar MySQL Connector /Net 6.3.6 a 6.5.4

Se me ha dado la casualidad que en el equipo del trabajo tení­a el conector …

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *