Prefetch, preload, preconnect y prerender en WordPress

Cuando hablamos de rendimiento y optimización web pensamos en cosas como concatenación, minimizado, caché o gzip de recursos en el servidor para que la página se cargue más rápido, ofrecer una mejor experiencia de usuario y, de paso, mejorar el SEO.

La precarga de recursos es otra técnica que mejora el rendimiento. Podemos usarla para decirle al navegador qué recursos puede necesitar el usuario en el futuro, incluso antes de que los necesite.

La precarga es una forma de sugerir al navegador recursos que se utilizarán más adelante, algunas sugerencias se aplican a la página actual, otras a posibles páginas futuras.

A esta práctica de adivinar lo que necesitan los usuarios antes de que lo necesiten se le llama en ocasiones pre-navegación.

No hay una sola técnica, pueden usarse varias: prefetch, dns-prefetch, preload, preconnectprerender.

Vamos a ver qué hace cada una de ellas y cómo aplicarlas en WordPress.

Prefetch

Con esta técnica indicamos al navegador que recupere la siguiente página que creas que será necesaria mostrar cuando el usuario siga navegando.

Prefetch descargará todos los recursos necesarios y los almacenará en la caché local para servirlos rápidamente cuando se necesiten.

Hay dos tipos de prefetch.

  • DNS prefetch – Lo explico más abajo
  • Enlace prefetch – Se configura usando <link url ..>. Se utiliza para precargar el HTML o recursos estáticos. Puedes precargar recursos usando el atributo as.

Hay un montón de recursos que se pueden utilizar con el atributo as:

  • audio
  • video
  • script
  • track
  • style
  • font
  • object
  • document
  • iframe
  • etc.

DNS Prefetch

¿Cargas recursos de varios dominios que quieres resolver previamente sus DNS antes de que deban estar disponibles?

Esta técnica ayuda a resolver los dominios que pronto deberán mostrar recursos y los carga más rápido, lo que ayuda a reducir la latencia global de tus páginas..

Imagina, por ejemplo, que utilizas recursos de 5 dominios, y que cada uno tarda unos 100 milisegundos en realizar el DNS lookup, pues estarías ahorrando 500ms de latencia.

Mola ¿no?

Para hacerlo en WordPress simplemente añade algo así al archivo functions.php del tema o a tu plugin de personalizaciones varias:

En el ejemplo he incluido varias URLs típicas de las que muchos usamos recursos, y que mediante este método facilitaremos que el navegador haga un trabajo previo nada más cargar nuestra web y empiece a resolver las DNS de URLs donde hay dominios de los que vamos posteriormente a mostrar recursos, ya sea en forma de vídeos, tuits, anuncios, etc.

Si quieres saber de qué URLs utilizas recursos solo tienes que ver el llamado waterfall de los analizadores de velocidad como GTMetrix o Pingdom Tools. Ahí estarán los tuyos, que serán candidatos a incluir en tu lista de dns-prefetch.

Preload

Puedes usar la etiqueta preload para decirle al navegador que recupere lo antes posible recursos estáticos.

Pueden ser imágenes, fuentes, JavaScript, CSS, scripts, vídeo, etc, cualquier recurso cacheable.

Esta técnica ayuda a priorizar la carga de recursos, y en consecuencia se mejora el rendimiento y tiempos de carga.

Se suele utilizar cuando crees que tus usuarios van a ver varias páginas a continuación de la actual. Como en una tienda online, en la que los usuarios normalmente ven la página de un producto y luego los comparan con otros, van al carrito, pagan, ya sabes.

Lo mejor de preload es que el navegador no puede ignorarlo, debe atender la petición. Eso sí, antes de lanzarte con esta técnica revisa la lista de navegadores compatibles.

Para utilizarlo usa también el atributo as, y sería algo así:

Preconnect

¿Qué pasa cuando cargas recursos de otro dominio? ¿o de una CDN?

Preconnect insta al navegador a establecer una conexión con otro dominio para ahorrar tiempos de revisión de DNS, negociación de TLS y establecimiento de conexiones TCP.

Es bastante parecido a lo que hacen las técnicas de prefetch.

La idea es, de nuevo, reducir la latencia para ofrecer una carga de recursos más rápida cuando están disponibles en otro dominio diferente al tuyo.

¿Quieres un ejemplo?

¿Otro?

Prerender

Prerender es la madre de dragones de las técnicas de precarga, pues ayuda a cargar todos los recursos de una URL en segundo plano, y cuando el usuario hace clic en ella, se obtienen al instante.

Es como si abrieses la URL en una pestaña oculta, en la que se cargan todos sus recursos, se crea el DOM, se aplica el CSS, carga el JavaScript, todo.

Cuando el usuario hace clic en el enlace a esa URL ya está totalmente cargada y la experiencia de navegación no es rápida, es inmediata.

Se utiliza añadiendo el atributo prerender a los enlaces que quieras precargar completamente, así:

Lo mejor de todo es que Google Chrome ya es totalmente compatible por defecto con prerender.

Plugins para hacer prefetch, preload, preconnect y prerender fácilmente

Afortunadamente, en WordPress tenemos varios plugins que nos ayudan a aplicar estas técnicas de manera sencilla, sin tener que estar añadiendo atributos a enlaces ni etiquetas en las cabeceras de nuestras páginas.

Aquí tienes algunos de los mejores:

  • Google QuickLink – Aplica prefetch automáticamente.
  • Better Resource Hints – Permite aplicar preconnect, preload, prefetch y server push a voluntad.
  • Prerender and Prefetch – Este plugin de Fran Torres (que hace tiempo que no revisa, toma nota amigo) aplica prerender y prefetch de manera personalizada, lo que es un plus de control.
  • Simple DNS Prefetch – Puedes desactivar cualquier dns-prefetch o incluir una lista personalizada de los dominios a los que quieres aplicar esta técnica de precarga.
  • Pre* Party Resource Hints – El más completo hasta la fecha, pues permite aplicar todas las técnicas de recarga que hemos visto: dns-prefetch, prerender, preconnect, prefetch y preload de manera sencilla.

Mi conclusión

El núcleo de WordPress pesa poco y carga rápido, pero tu web se puede ralentizar si usas temas y plugins inadecuados, no está alojada en un hosting optimizado y especializado en WordPress, no utilizas técnicas adecuadas para optimizar y mejorar su rendimiento, o no aprovechas las ventajas de la caché en WordPress o utilizar una buena CDN.

Las técnicas de prefetch, preload, preconnect y prerender pueden ayudar a mejora los tiempos de carga de tu sitio y sus páginas, así que plantéate usar las que mejor se adapten a tus necesidades, con sensatez.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Ir al contenido