Precarga de recursos o resource hints

Dificultad del post: facilmediadificil
resource hints

Aunque la técnica WPO de la que vamos a hablar en este post lleva tiempo con posibilidades de aplicación, la verdad es que nunca se ha tenido mucho en cuenta debido a que no hace milagros.

En algunos casos donde se dan ciertas circunstancias, la precarga de recursos o resource hints puede ser una técnica WPO decisiva en la teoría, pero en la práctica nunca va a llegar a ser tan decisiva como la implementación de un sistema de cache de página o la implementación de un servicio CDN.

resource hints

En un entorno normal web sin el push de HTTP/2, primero se interpreta el HTML en el navegador web del visitante y después se van descargando los recursos que están enlazados en ese archivo HTML: imágenes, CSS, JavaScript, etc.

Si eres capaz de configurar correctamente la precarga de recursos o resource hints, vas a poder eliminar ciertos cuellos de botella en la carga de un sitio web.

¿En qué consiste? Pues en que, mediante una serie de etiquetas en el HTML del sitio web (normalmente en las cabeceras), le decimos al navegador web del visitante que realice algunas acciones necesarias para empezar a cargar partes de contenido antes de encontrarse con el elemento enlazado en el HTML.

resource hints

En el caso de WordPress, vamos a explicar un poco más abajo como aplicar esta técnica WPO, pero para cualquier web podemos utilizar la etiqueta <link> con el atributo “rel” en la cabecera, es decir, dentro de las etiquetas <head> del sitio web o en las cabeceras HTTP.

Aunque se pueden precargar recursos, elementos o archivos alojados en el mismo hosting que el sitio web, a mí me parece que la precarga de recursos o resource hints es una técnica WPO efectiva si la aplicamos a la carga de elementos externos desde servidores externos. Por ejemplo, la carga de archivos Javascript desde los servidores de Facebook para cargar elementos sociales.

resource hints

La precarga de recursos como técnica WPO se engloba dentro del concepto prebrowsing, un concepto con el que se intenta preparar el contenido para los visitantes antes de que lo necesiten. De este modo, para cuando les haga falta ya estará preparado o cargado en su navegador web.

Ahora que ya hemos explicado en qué consiste la precarga de recursos o resource hints como técnica WPO aplicable a un sitio web, vamos a empezar por el principio y a intentar estructurar este artículo de la mejor forma posible.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

RESPONSABLE:

RAIOLA NETWORKS, S.L.

C.I.F.: B27453489

Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

Telefono: +34 982776081

e-mail: info@raiolanetworks.es

FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:

No se ceden datos a terceros, salvo obligación legal.

Personas físicas o jurídicas directamente relacionadas con el Responsable

Encargados de Tratamiento adheridos al Privacy Shield

DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.

 

Tipos de precarga de recursos

Existen 5 tipos de resource hints o precarga de recursos que podemos utilizar en un sitio web dependiendo de las necesidades que tengamos.

No tiene ningún sentido utilizarlos todos a la vez ya que unos se solapan con otros y, si no los combinamos bien, estaremos tirando recursos a la basura.

Nos encontramos los siguientes resource hints o tipos de precarga de recursos:

  • Preconnect
  • Prefetch DNS
  • Prerender
  • Preload
  • Prefetch

Algunos navegadores web (sobre todo de dispositivos móviles) pueden no ser compatibles con algunos de estos resource hints. Google Chrome es compatible con todos.

Si necesitas más documentación sobre el tema, Google tiene más información para ti: https://developers.google.com/web/fundamentals/performance/resource-prioritization

 

Preconnect – Resource Hints

Con el preconnect se realiza la conexión al dominio o subdominio que nosotros le indiquemos. Esto incluye la parte que se realiza en el prefetch dns, que vamos a comentar en la siguiente sección. De este modo, cuando hagamos hint preconnect para una petición no será necesario realizar prefetch dns para esa petición, ya que preconnect llega más lejos.

Si le indicamos al navegador web del visitante un listado de hostnames a los que se tiene que preconnectar, podremos ahorrar algunas milésimas de segundo en la carga, sobre todo cuando hablamos de conexiones HTTPS donde es necesario “negociar” el certificado SSL.

Con preconnect también conseguimos reducir el tiempo perdido en establecer la conexión en caso de realizar varias peticiones al mismo hostname durante la carga de la web.

precarga de recursos

Lo que nos queda claro es que cuanto más lenta sea la conexión a Internet del visitante y más latencia tenga, más notaremos el hint preconnect en la velocidad de carga.

Este es un ejemplo sobre la etiqueta con el atributo para utilizar el preconnect en la petición al CDN de mi sitio web:

 

 

Prefetch DNS o DNS Prefetch – Resource Hints

El prefetch DNS o DNS prefetch es el resource hint más conocido y también el más “común” que podemos encontrar ya en algunos plugins de cache para WordPress como, por ejemplo, WP Rocket.

El DNS prefetch es mucho más simple que el hint preconnect, ya que simplemente le indica al navegador web que realice la petición de resolución DNS. Esto nos permite ahorrar el tiempo de resolución DNS cuando se realiza una petición o carga de un elemento externo posteriormente.

preload

Evidentemente, el prefetch DNS o DNS prefetch es un hint que se realiza sobre peticiones externas, es decir, peticiones a hostnames externos a nuestro sitio web.

Aunque el tiempo de resolución DNS de los diferentes hostnames desde donde se carga contenido de una web es poco si lo comparamos con la carga general de la web, a veces en casos donde el visitante tiene una conexión con mucha latencia nos ayuda a agilizar la velocidad de carga general del sitio web.

En el siguiente ejemplo puedes ver la etiqueta con el atributo para utilizar el prefetch DNS o DNS prefetch con la petición al hostname del CDN de mi sitio web:

 

Prerender – Resource Hints

El prerender es el resource hint que menos he utilizado, ya que hay que usarlo con muchísimo cuidado. Yo personalmente nunca lo he utilizado en producción, ya que no lo he necesitado o he considerado que era necesario.

Con el prerender, se cargará en el navegador la página que nosotros le indiquemos en la cabecera del HTML. Esto hace que cuando un visitante hace clic en un enlace, la página esté cargada ya en el navegador y el tiempo de visualización sea mínimo.

prefetch

¿Por qué es diferente el prerender al resto de resource hints? Pues porque, normalmente, el uso del prerender debe realizarse después de establecer un patrón de comportamiento de los visitantes, es decir, es necesario saber que el usuario tiene muchas posibilidades de cargar la página que cargamos por prerender o estaremos consumiendo recursos de forma innecesaria en el navegador del visitante, tanto en la descarga de elementos como en el renderizado.

Como he dicho anteriormente, para utilizar el prerender es necesario tener claro lo que queremos hacer y cómo lo queremos hacer. De lo contrario, estaremos desperdiciando recursos.

A diferencia de los resource hints anteriormente mencionados, el prerender se utiliza con páginas de nuestro propio sitio web, por lo que la URL utilizada será una de nuestra arquitectura.

En el siguiente ejemplo puedes ver la etiqueta con el atributo para utilizar el prerender con la petición para precargar la supuesta página de contacto de nuestro sitio web ejemplo:

 

Preload – Resource Hints

El resource hint preload se utiliza para precargar un recurso sin retrasar la carga general del sitio web. En resumen, con el hint preload podemos adelantar la carga de ciertos elementos necesarios para la carga de la página, lo que nos permite definir prioridades en la carga de elementos.

preload

Para que veas un ejemplo, podemos precargar ciertos scripts javascript para ser interpretados posteriormente durante la carga del sitio web. Otro ejemplo es el preload de fuentes, ya que nos permite agilizar la carga de fuentes desde servidores externos como Google Fonts, esquivando así posibles cuellos de botella.

Para que el hint preload funcione necesitamos especificar en un parámetro el tipo de recurso que estamos cargando. A continuación, puedes ver varias líneas de ejemplo con los distintos tipos de recurso, aunque hay más:

Y en caso de que tengamos CORS activado, debemos incluir la etiqueta con el siguiente atributo:

Por otro lado, también es necesario aclarar que el hint preload es el único OBLIGATORIO para el navegador de todos los resource hints que estamos mencionando en este artículo.

El preload es uno de los hints más utilizados, sobre todo para temas de javascript y CSS. El motivo es que nos permite agilizar la carga de elementos.

 

Prefetch – Resource Hints

El resource hint prefetch tiene una forma de funcionar distinta a los que ya hemos comentado.

Con prefetch podemos especificarle al navegador web del visitante una serie de recursos y páginas que queremos que se carguen en segundo plano cuando finalice la carga general de la página.

Las cargas con el hint prefetch se realizan en segundo plano y eso hace que podamos aprovechar ciertos espacios de tiempo muerto mientras que el visitante este viendo la página después de cargarse.

En el siguiente ejemplo puedes ver la etiqueta con el atributo para utilizar el prefetch con la petición para cargar estos elementos en background:

 

Precarga de recursos en WordPress

Ahora te preguntarás cómo puedes aplicar los resource hints anteriormente mencionados a un sitio web WordPress.

Como has visto, mediante etiquetas en el <head> y teniendo claro lo que queremos hacer podemos especificar los resource hints y las precargas, pero… ¿y en WordPress?

En WordPress podemos hacerlo con plugins, claro, aunque existen pocos complementos que nos permitan hacer esto. De los que voy a mencionar en este artículo, los primeros son los más específicos para implementar resource hints en WordPress. El otro plugin es general y permite implementar algunos resource hints.

 

Better Resource Hints para WordPress

El plugin Better Resource Hints es gratuito y puede ser encontrado en el repositorio de WordPress. Permite realizar tres resource hints: Preload, Prefetch y Preconnect.

La principal ventaja de Better Resource Hints es que puede ser bastante automático, aunque en determinadas circunstancias quizá necesitemos especificar manualmente los scripts y recursos que queremos optimizar.

better resource hints

En “Ajustes” encontraremos una sección de configuración del plugin donde tendremos una sección para cada tipo de resource hint y podremos elegir qué scripts y hojas de estilo se cargarán con preload y prefetch. En el caso del hint preconnect, podemos elegir la opción para que se aplique a todas las conexiones externas:

better resource hints

Si tenemos HTTP/2 en el servidor podremos activar la funcionalidad server push para que sea el servidor web el que preenvíe de forma proactiva los recursos al navegador del visitante.

A mí personalmente me encanta Better Resource Hints y es el plugin que más suelo utilizar para WPO donde no puedo dedicarle horas a realizar una auditoría de peticiones para añadir los resource hints manualmente utilizando un plugin como el siguiente de la lista.

Puedes encontrar más información sobre Better Resource Hints para WordPress en la siguiente URL: https://wordpress.org/plugins/better-resource-hints/

 

Pre* Party Resource Hints para WordPress

Como he comentado, el plugin anteriormente mencionado lo utilizo en casos en los que no realizo una auditoría de peticiones.

Cuando tengo disponibilidad para hacer una buena auditoría de peticiones con la que configurar correctamente los resource hints o la precarga de recursos, utilizo el plugin Pre* Party Resource Hints.

Como puedes ver en la siguiente captura, el plugin Pre* Party Resource Hints es mucho más completo y adaptable, pero también requiere más tiempo y más conocimientos para dejar una buena configuración.

better resource hints

Otra de las ventajas de este plugin es que nos permite configurar TODOS los resource hints: DNS prefetch, Prefetch, Prerender, Preconnect y Preload.

También podemos elegir si se enviarán los resource hints en el <head> o en las cabeceras HTTP enviadas por el servidor web, es decir, podemos elegir doónde se ejecutará la precarga de recursos.

Cuando trabajo con casos más complejos y tengo disponibilidad de tiempo para dedicar a una auditoróa completa de las peticiones realizadas por el sitio web, utilizo este plugin.

Puedes encontrar más información acerca de Pre* Party Resource Hints para WordPress en el repositorio oficial de WordPress: https://wordpress.org/plugins/pre-party-browser-hints/

 

Perfmatters para WordPress

Sí, otra vez menciono Perfmatters en un post, ¿se nota que soy fan? Me encanta Perfmatters.

Entre sus funciones, Perfmatters incluye la posibilidad de realizar preconnect y prefetch DNS, es decir, no permite implementar todos los resource hints, pero algo es algo.

Lo malo es que la interfaz para configurar el preconnect y el prefetch DNS con Perfmatters es básica y tendremos que realizar la auditoría de peticiones primero con una herramienta como las de desarrolladores de Google Chrome o Pingdom Tools.

Si quieres más información acerca de Perfmatters para WordPress, he escrito un post sobre él y puedes verlo aquí: https://alvarofontela.com/perfmatters-tweaks-optimizaciones-wordpress/

 

HTTP/2 push VS Resource Hints

Si conoces la funcionalidad HTTP/2, puedes pensar que algunas funcionalidades de los resource hints pueden solaparse con la función push de HTTP/2.

Pero no, ya que son funcionalidades que se complementan y que tienen bastantes diferencias entre sí.

  • Con HTTP/2 push el servidor web puede empezar a enviar recursos al navegador del visitante incluso antes de descargarse el HTML, mientras que con la precarga de recursos o resource hints primero debe descargarse el HTML y leerse el <header>, que es donde están las etiquetas que precargan contenido.
  • HTTP/2 push no puede ser utilizado para peticiones cargadas desde servidores de terceros, como las peticiones a los recursos de Facebook para cargar elementos sociales.
  • La funcionalidad HTTP/2 push no puede tener en cuenta cookies guardadas en el navegador del visitante ni tampoco el cache del navegador.

Donde no llega la funcionalidad push de HTTP/2, podemos jugar con los resource hints para conseguir un WPO perfecto en nuestro sitio web.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

RESPONSABLE:

RAIOLA NETWORKS, S.L.

C.I.F.: B27453489

Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

Telefono: +34 982776081

e-mail: info@raiolanetworks.es

FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:

No se ceden datos a terceros, salvo obligación legal.

Personas físicas o jurídicas directamente relacionadas con el Responsable

Encargados de Tratamiento adheridos al Privacy Shield

DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

11 comentarios

  1. Excelente información Alvaro, te agradezco mucho que la compartas y que nos indiques los plugins que podemos utilizar, lo único que no me quedo claro fue lo del HTTP/2 push. No se como implementarlo.

  2. Hola Álvaro,
    Me parece un árticulo muy interesante y del que no encuentro información tan clara y concreta como me ha parecido este.
    Genial!

  3. Muchísimas gracias Álvaro por este artículo. Ahora puedo entender y gestionar mucho mejor la conversación con nuestro programador de Wordpress. Tenemos unos scripts (básicamente Intercom y GTM) que dan siempre mucho por saco en los Lighthouse Report y vamos a ver si podemos usar alguno de estos resource hints. ¿Cuál ha sido tu experiencia al respecto?

    1. Hola Elena, con Intercom ni idea porque no lo conozco, pero con GTM…pues algo se puede hacer, pero poco, ya que si no lo cargas donde “deberías” dejaria de contar… el resource hints es útil para casos donde puedes cargar el contenido mas adelante, pero lo precargas al principio para que este disponible.

      Al final, por decirlo de alguna manera, el navegador web tiene tiempo libre y se rellena con resource hints para mejorar la eficiencia de la carga.

  4. Hola! Interesante artículo.
    Tengo una página de inicio estática y quería saber cómo podría implementar con líneas de código, sin plugin vamos, el que se cargue lo primero la imagen de “portada” y las potenciales siguientes imágenes de portada de las otras dos páginas a las que se puede llegar desde inicio.
    Y ya puestos a preguntar, ¿alguna idea de cómo añadir el típico “cárgame más tarde” esta imagen, que está al final de la pantalla? (sin plugins)

    Gracias!

    1. Hola Lucas, justo si te lees el articulo completo te dice como hacerlo en el HTML, lo unico que en lugar de autodetectar, tienes que ser tu el que busque los recursos cargados y los añada.

      En cuanto al infinite scroll, hay una librería JS para eso: https://infinite-scroll.com/
      Lo único que la implementación debes hacerla tu en el HTML cargando la libreria JS.

Deja una respuesta

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

Artículos destacados

Optimizar la carga de JavaScript y CSS en WordPress

WebP en WordPress

Optimizar la carga de Google Fonts en WordPress

Server Timing – Analizar peticiones HTTPS y HTTP (WPO)

WP Rocket para acelerar WordPress con cache de página

Limpiar la base de datos de WordPress

Artículos más comentados

WP Rocket para acelerar WordPress con cache de página

Optimizar la carga de JavaScript y CSS en WordPress

WebP en WordPress

Optimizar la carga de Google Fonts en WordPress

CloudFlare CDN para optimizar tu web o blog

Cache en WordPress – Plugins y tipos de cache