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

,

preconnect

prerender

.

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

    . 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:

function ayudawp_dns_prefetch() {
echo '







}
add_action('wp_head', 'ayudawp_dns_prefetch', 0);

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.

La entrada Prefetch, preload, preconnect y prerender en WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero

Copywriter, Redactora de Content SEO.
Laura D´Cuero
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

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