Prefetch (carga de recursos web)

De Seobility Wiki
Saltar a: navegación, buscar

¿Qué es el Prefetch o Prefetching?

Básicamente, prefetch o prefetching es la capacidad que tiene un software de cargar recursos por adelantado, es decir, antes de que una usuaria/o los solicite. Esto permite que las/los desarrolladoras/es establezcan qué recursos se necesitarán probablemente en un futuro próximo y cargarlos por adelantado, optimizando la velocidad de carga y la experiencia de usabilidad.

En este contexto, el prefetching se enfoca en los recursos que se necesitan en el futuro, como por ejemplo, el contenido que aparecerá en la siguiente página, pantalla, etc.

Aunque el prefetching es una funcionalidad que mejora la experiencia de usabilidad de una página si se emplea de manera adecuada, también requiere de mucho poder computacional, por lo que debe ser utilizado con moderación.

¿Para qué se utiliza el prefetch?

Por lo general, el prefetch se utiliza para mejorar los tiempos de carga de un sitio y de otros recursos online, indicándole a los navegadores qué recursos se van a necesitar próximamente para cargarlos antes de que sean requeridos.

Sin embargo, aunque pueda incrementar la velocidad de carga de las páginas posteriores, puede ralentizar la carga de la página actual si no se usa de manera adecuada, pues esto consume recursos adicionales.

Algunos de los ejemplos de un uso adecuado del valor prefetch, pueden ser:

  • Prefetching de las páginas o recursos de un embudo. Si tomamos un embudo de ventas, por ejemplo, veremos que se compone de diferentes páginas secuenciales que cubren todo el proceso de ventas. En este caso, el valor prefetch puede agilizar este proceso al precargar las páginas siguientes antes de que la clienta/e las solicite.
  • Prefetching de recursos de una página web después de inciar sesión: cuando una usuaria/o navega en una página de inicio de sesión, lo más común es que el siguiente paso sea el ingreso a sus cuentas. De tal forma, al obtener los recursos necesarios para las siguientes páginas, puede asegurar que el portal se cargue con mayor velocidad.
  • Prefetching de documentos importantes: si hay algún link de un documento en la página actual, el valor prefetch puede ayudarlo a cargar desde el inicio para tenerlo listo para su uso, mejorando considerablemente los tiempos de carga cuando se trata de ingresar en ellos.

Prefetching de enlaces

Cuando se utiliza un valor prefetch para enlaces, se puede predecir cuáles serán los posibles vínculos que una usuaria/o puede utilizar o hacer clic, de manera que los navegadores pueden cargar, previamente, todas las páginas, reduciendo los tiempos de espera en la carga de cada link.

Por tal motivo, un prefetching de enlaces puede resultar muy efectivo si la página presenta una tasa de cliqueo alta. Por el contrario, si la site no genera tantos clics o contiene demasiados links, el valor prefetch no será tan efectivo.

Sintaxis

<link rel="prefetch" href="/images/big.jpeg">

Prefetching de DNS

El prefetching de DNS realiza una búsqueda de DNS antes de que las usuarias o usuarios puedan clicar en algún link, reduciendo así la latencia al resolver el nombre de dominio antes de que se solicite el recurso.

Así como en otras formas del prefetching, este tipo de precarga emplea recursos adicionales dentro de la página actual, lo cual puede resultar ineficaz o incluso perjudicial si un/a desarrollador/a no es selectiva/o con los recursos a precargar.

Sintaxis

<html>
  <head>
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
    <!-- y todos los demás elementos de encabezado -->
  </head>
  <body>
    <!-- El contenido de la página web -->
  </body>
</html>

Prefetching de Caché

El prefetching de caché permite obtener, de manera anticipada, los recursos o instrucciones de un portal o app para moverlos a un área más local y accesible en la memoria caché, por ejemplo, de un servidor, haciendo a los sitios más rápidos y de fácil acceso en comparación a si se obtuvieran desde una memoria principal. Por lo tanto, se reducen los tiempos de carga de cualquier información o recurso.

¿Qué recursos consume el prefetching?

Como se ha mencionado, el prefetching ayuda a las y los desarrolladoras/es a optimizar el rendimiento de un sitio, pero para lograrlo también consume recursos. En otras palabras, todas las solicitudes prefetch que se desperdician, es decir, se precargan sin necesidad y luego no son usadas por la usuaria/o, afectan negativamente los tiempos de carga de la página actual.

Los recursos que el prefetching consume incluyen:

  • Poder de procesamiento.
  • Ancho de banda.
  • Ancho de banda del servidor.
  • Espacio de caché.

Compatibilidad con los navegadores

El prefetching es compatible con la mayoría de navegadores, como:

  • Google Chrome.
  • Mozilla Firefox.
  • Microsoft Edge.
  • Internet Explorer.
  • Android Browser.
  • Opera.

Diferencias entre el prefetch y el preload

Aunque ambos recursos son populares, hay una diferencia considerable entre el prefetch y el preload.

Por una parte, el prefetch precarga recursos que posiblemente sean necesarios durante la navegación por las páginas siguientes a la actual. Mientras que el preload, por otra parte, carga los recursos que se necesitan inmediatamente en la página actual, priorizándolos por encima de otros. Además, el navegador entiende que los recursos preload son más importantes que los prefetch y los carga primero.

Importancia para el SEO y el marketing

El prefetching juego un papel importante en la optimización del tiempo de carga de una página, lo cual influye en la experiencia de usabilidad y es también un factor de rankeo relevante para los buscadores.

Por otro lado, permite a las y los desarrolladoras/es y las/los SEOs añadir una lógica de carga mejor elaborada, asegurando que los navegadores puedan mostrar los recursos con la mayor eficiencia posible.

Ampliar conocimientos

Sobre las autoras y autores:
Seobility S
El equipo de Seobility Wiki está formado por expertas y expertos SEO, profesionales del marketing digital y especialistas en negocios con experiencia en SEO, marketing online y desarrollo web. Todos nuestros artículos pasan por un proceso editorial de varios niveles para proporcionarte la mejor calidad posible e información relevante y de utilidad. Conoce a la gente que hay detrás de la Wiki de Seobility.

Contenidos relacionados