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.
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.
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.
| 1 | <link rel="preload" href="main.js" as="script"> |
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.
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.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
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.
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:
| 1 | <link href="https://cdn.alvarofontela.com" rel="preconnect"> |
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.
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:
| 1 | <link rel="dns-prefetch" href="//cdn.alvarofontela.com"> |
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.
¿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:
| 1 | <link rel="prerender" href="https://alvarofontela.com/contacto/"> |
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.
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:
| 1 2 3 4 5 6 7 8 9 10 11 | <link rel="preload" href="estilos.css" as="styles"> <link rel="preload" href="documento.pdf" as="document"> <link rel="preload" href="fuente.woff" as="font"> <link rel="preload" href="imagen.png" as="image"> <link rel="preload" href="script.js" as="script"> <link rel="preload" href="video.mp4" as="video"> |
Y en caso de que tengamos CORS activado, debemos incluir la etiqueta con el siguiente atributo:
| 1 | <link rel="preload" href="fuente.woff" as="font" crossorigin> |
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:
| 1 | <link rel="prefetch" href="miscript.js" as="script"> |
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.
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:
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.
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.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
11 comentarios
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.
Hola Johanna, puedes usar uno de estos plugins siempre que el servidor web soporte HTTP/2
https://es.wordpress.org/pl…
Gracias Alvaro, los probare.
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!
Es que es un tema bastante complejo, no se suele hablar mucho de el.
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?
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.
Muy buen artículo, muchas gracias!
Gracias por el comentario Ricardo 🙂
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!
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.