Make any website load faster with 6 lines of HTML | DocuSeal

https://www.docuseal.com/blog/make-any-website-load-faster-with-6-lines-html • Aug 2, 2025 17:21

Extracto

Discover how to significantly boost your website's loading speed by adding just 5 lines of HTML. Simple steps for faster websites.

Resumen

Resumen Principal

La API de Reglas de Especulación de Chrome representa un avance significativo en la optimización de la velocidad de navegación web, permitiendo experiencias de carga casi instantáneas. Esta innovadora característica posibilita a los desarrolladores instruir al navegador, mediante un sencillo marcado HTML, qué páginas deben ser precargadas (prefetch) o prerrenderizadas (prerender) en segundo plano. La funcionalidad de prefetch descarga únicamente el documento HTML superior, almacenándolo en caché para una rápida disponibilidad sin consumir demasiados recursos. Por otro lado, prerender va un paso más allá, descargando y renderizando la página por completo, incluyendo todos los subrecursos como CSS, JavaScript e imágenes, y ejecutando su lógica, lo que resulta en un cambio de página prácticamente sin demoras al hacer clic. Este mecanismo se activa de forma inteligente, a menudo con un pequeño retardo tras detectar que el usuario coloca el cursor sobre un enlace, minimizando activaciones accidentales y garantizando que las páginas más relevantes estén listas para el acceso inmediato.

Elementos Clave

API de Reglas de Especulación de Chrome para Navegación Instantánea: Esta API permite a los desarrolladores especificar declarativamente qué páginas debe el navegador precargar o prerrenderizar. Su objetivo principal es ofrecer una experiencia de navegación "casi instantánea", eliminando los tiempos de espera perceptibles para el usuario y mejorando drásticamente la fluidez en la interacción con el sitio web.
Diferenciación entre prefetch y prerender: La API ofrece dos modos clave. prefetch descarga solo el documento HTML de la página enlazada, siendo menos intensivo en recursos y almacenando el HTML en caché para una disponibilidad rápida. En contraste, prerender es un proceso más profundo que no solo descarga, sino que también renderiza completamente la página en segundo plano, incluyendo todos sus subrecursos (CSS, JavaScript, imágenes) y ejecutando el código JavaScript, lo que permite un cambio de página prácticamente instantáneo al hacer clic.
Mecanismo de Activación Inteligente con 'eagerness': 'moderate': La propiedad "eagerness": "moderate" indica al navegador que inicie la acción de precarga o prerrenderización 200 milisegundos después de que el usuario pause el cursor sobre un enlace. Este breve retardo es crucial para distinguir la intención del usuario de un movimiento accidental del ratón, asegurando que las acciones de pre-carga se activen solo cuando hay una alta probabilidad de que el usuario vaya a hacer clic en el enlace.
Transición Tecnológica y Optimización del Rendimiento: La implementación de estas reglas permitió la eliminación de dependencias previas, como Hotwired Turbo, que se utilizaba para lograr una navegación similar a la de las SPA (Single Page Applications) y precargar páginas. Al adoptar la API de Reglas de Especulación, sitios como docuseal.com lograron cargar páginas pesadas de manera más rápida a través de la prerrenderización nativa del navegador, simplificando la arquitectura y mejorando la eficiencia.

Análisis e Implicaciones

Esta API transforma la experiencia del usuario al eliminar la latencia percibida en la navegación, lo que fomenta una interacción más fluida y satisfactoria. Para los desarrolladores, representa una herramienta poderosa para optimizar el rendimiento sin la complejidad de soluciones de terceros, mejorando la métrica clave de LCP (Largest Contentful Paint) y la percepción general de velocidad. La adopción de estas técnicas es un claro indicio de la evolución hacia una web más reactiva y eficiente.

Contexto Adicional

Para asegurar una experiencia óptima en naveg

Contenido

Put this HTML tag into the <head> of your website for near-instant navigation.

Ever clicked a link and had the next page appear almost instantly? That magical, speedy experience is becoming easier to achieve thanks to the Chrome Speculation Rules API. This new browser feature helps make navigation feel instant with just a few lines of HTML.

How does it work?

The Chrome Speculation Rules API allows developers to declaratively tell the browser which pages to preload and prerender, providing a near-instant loading experience:

"prefetch" tells the browser to only download the top-level HTML document for a linked page. It doesn’t render the page or fetch its sub-resources. This is less resource-intensive than prerendering but still saves time by having the HTML ready in the cache.
"prerender" instructs the browser to not only download a page but also to fully render it in background. This includes fetching all sub-resources like CSS, JavaScript, and images, and executing the JavaScript. When the user clicks the link, the page can be swapped into view almost instantly.
"eagerness": "moderate" is interpreted by browsers as: “Start the action 200ms after the user hovers their mouse pointer over a link.”

Speculation Rule Performance

Here’s a typical scenario:

A user is reading a page on your website.
They move their mouse cursor and let it rest over a link (e.g., “Services”).
The browser interprets this hover as a sign of intent. After a very brief delay (e.g., ~200 milliseconds, to avoid firing on accidental mouse-overs), it triggers the prerender or prefetch action for the “Services” page.
If the user then clicks the link, the page is already loaded (or at least partially loaded) in the background, resulting in a near-instant navigation.

Previously, for the docuseal.com website, we used Hotwired Turbo to achieve SPA-like navigation and to preload pages when hovering over links. Now, our website implements speculation rules, which allowed us to remove the Hotwired Turbo dependency and load heavy pages faster through prerendering.

Limitations

Speculation Rules API is supported only in Chrome 121 and later versions.

Speculation Rule Limitations

For Firefox and Safari users, we created a short script to preload pages on hover so that they can be cached by the browser and reused once the hovered link is clicked. This also allows for near-instant navigation on browsers that do not support the Speculation Rules API. Heavy pages like the API might take a bit longer to load comparing to Chrome due to the lack of a pre-rendering mechanism natively supported by other browsers.

In order for this script to work on Firefox and Safari, pages should contain a Cache-Control header with a max-age value so that the preloaded page is cached on hover and then reused on link click.