Navegación de Páginas Ultrarápida con Reglas de Especulación

Hola a todos. Espero que estén disfrutando de la conferencia hasta ahora. Estoy muy feliz hoy de hablar con ustedes sobre algo muy interesante para mí personalmente, y espero que lo sea para ustedes. Se trata de construir páginas que se pueden navegar casi instantáneamente entre ellas usando una nueva, relativamente nueva tecnología llamada roles de especulación. Permítanme presentarme rápidamente. Mi nombre es Matt Haddawoud. Soy un ingeniero de software senior que trabaja para una empresa llamada Miro. Y también soy un Experto Desarrollador de Google y Tecnólogo Web especializado en Rendimiento Web. Si les gusta lo que ven hoy, siéntanse libres de seguirme en Twitter o X en este handle o encontrar más enlaces sobre mí y más artículos sobre rendimiento en mi blog personal, MattHaddawoudDev. Así que sí, comencemos.

Comenzaré con un dato curioso. El dato curioso es que los humanos son lentos y al mismo tiempo, son una especie impaciente, que siempre están buscando algo que sea rápido. Sin embargo, son muy lentos. Y voy a demostrárselo. Primero, somos impacientes. En términos web, quiero decir, significa que en 1999, las personas percibían páginas que cargaban en ocho segundos como páginas de carga rápida. Y siete años después, se convirtió en solo la mitad, cuatro segundos en 2006. Y hoy en día, percibimos páginas que cargan en dos segundos como rápidas. Cualquier cosa por debajo de eso o que tome más tiempo se percibe. Todo es sobre la percepción de que sientes que esto es rápido o esto es lento. Y quién sabe hacia dónde vamos ahora. Usando la tecnología de la que estamos hablando hoy, esto podría mejorar también.

Hablando de lentitud, toma estáticamente entre uno y dos segundos para que cualquier usuario sin estrés haga clic en un enlace. Mover el ratón, tomarse su tiempo, asegurarse de que este es el enlace que quieren, y luego hacer clic. Esto también indica que somos muy lentos en Internet. Sin embargo, necesitamos, después de hacer clic, que sea agradablemente rápido. Y esto sin estrés. Imagina si estás en una situación similar a esta y necesitas que sea muy rápido. Pensarías dos veces o tal vez 10 veces antes de hacer clic en cualquier enlace. Pero aún así, toma tiempo. Entonces, ¿cómo podemos aprovechar esta lentitud para hacer que el usuario perciba esta navegación de página como muy rápida? De esto es de lo que vamos a hablar hoy.

Me gustaría dar un paso atrás y hablar sobre cómo las páginas web se cargan muy rápido, muy brevemente también. Estamos solicitando una página web. Así que simplemente solicitamos HTML. Comenzamos a analizarlo y descubrimos que hay algunos recursos para solicitar. Adelante, solicítalos. Y hay un tiempo de espera para que la red regrese con los recursos. Comienza el prerenderizado y boom, tienes estas páginas cargadas frente a ti. Esto toma unos pocos milisegundos, tal vez unos pocos segundos, y puede ser como tres segundos en promedio o algo así. Y cargar estos recursos podría ser el problema, cuán grande o pequeño es. Y también sobre la latencia que ocurre entre tu usuario y el servidor.

Y si el usuario decide hacer clic en P1, como otro enlace dentro de esta página, imagina lo que sucedería. Es exactamente lo mismo. Cargando HTML, analizándolo, obteniendo recursos, cargando recursos, renderizándolo. Y bam, tienes esta página. Esto podría tomar un poco menos de tiempo esta vez porque la mayoría de los recursos podrían haber sido almacenados en caché o algo así, pero tomará exactamente lo mismo.

Pero ¿y si sabes que esta página está siendo solicitada o hay una alta probabilidad de que el usuario vaya a hacer clic en ella y lo piensas? Así que la situación actual es que sin reglas de especulación, estás cargando la primera página, toma algo de tiempo, y haces algún evento de navegación a P1. Así que haces exactamente lo mismo. Otro evento de navegación, haces otro proceso de solicitar todo, otro evento de navegación, y así sucesivamente. Con reglas de especulación en realidad, no estamos afectando la primera carga porque es una optimización diferente en la que necesitas trabajar de una manera diferente.

Las reglas de especulación ayudan en las otras navegaciones, en las otras cargas de las páginas después de cargar la primera página. Así que imagina con reglas de especulación con algunas configuraciones que vamos a aprender hoy, vas a hacer que la carga sea un poco más rápida. Va a ser, sí, es una buena mejora, como la mitad del tiempo. Y con configuraciones Prover para reglas de especulación, puede ser así. Puede ser simplemente instantáneo. Cuando haces clic en cualquier navegación, sería simplemente cargar la página como si hubiera estado viviendo en el navegador del usuario durante mucho tiempo. Así que vamos a profundizar en eso. Queremos que el usuario pueda pasar entre las páginas como si estuviera pasando una página en un libro.

Imagina que estás sosteniendo un libro en tu mano, y esta tinta se está cargando de manera asíncrona. Estás esperando a que se cargue. Se ve bien, ¿verdad? Esto es de Harry Potter, de hecho. Pero imagina que esta experiencia placentera y divertida sería muy horrible si descubres esto, oops, cuatro, cuatro, tinta no encontrada. ¿Qué pasaría? En realidad, esto sería muy molesto para ti. Así que lo que harías es especular que el usuario probablemente va a pasar a la siguiente página para que podamos cargarla con anticipación y se sienta como pasar una página en un libro como lo tienes ahora.

Reglas de especulación al rescate. Así que puedes usar reglas de especulación para pre-renderizar páginas por adelantado, en realidad especulando o adivinando lo que el usuario va a hacer a continuación. Y basado en eso, vas a cargarla. Si recuerdas este ejemplo desde el principio que estás cargando la primera página o index HTML, no vamos a cambiar eso con reglas de especulación. Pero durante este análisis, encuentras que hay algunas reglas de especulación escritas para ti diciendo que tal vez P1 y P2, estas dos páginas, necesitamos especularlas, pre-renderizarlas en el fondo.

¿Qué pasaría? Aprenderemos cómo escribir reglas de especulación, pero imaginemos lo que está sucediendo con las reglas de especulación. El navegador toma eso y comienza a cargar estas dos páginas en el fondo. Imagina que están sucediendo en una pestaña oculta dentro del navegador. Y es realmente así. Te lo mostraré durante la demostración. Y todo está sucediendo, como solicitar HTML, analizar recursos, todo está sucediendo en el fondo. Si el usuario decide hacer clic en P1 ahora mismo, lo que sucedería es que instantáneamente solo el puntero se moverá del hilo principal o la pestaña principal a la pestaña analizada o la pestaña pre-renderizada, que estaba oculta. Ahora es visible, pero será instantáneo. Esto es simplemente cómo se comportan las reglas de especulación.

Así que las reglas de especulación para escribirlas, será como una etiqueta de script dentro de tu HTML con tipo de reglas de especulación. Y esto tendrá tres cosas principales. Necesitas decidir la acción. Será pre-renderizar o pre-fetch. También decidirás el objetivo. Y estos serán URLs, tal vez URLs que terminen con esto o incluyan esta parte. Expresiones regulares, selectores CSS, el cielo es el límite. Puedes elegir cualquier enlace que creas que necesitas pre-renderizar o pre-fetch por adelantado.

Y eagerness. Eagerness es interesante porque decide cómo sucederá este comportamiento. Aprenderemos sobre ello en un momento. Tenemos inmediata, moderada o conservadora. Así que pasando a eagerness un poco para que podamos profundizar en ello. Si decides que la eagerness sea conservadora, que es la menor de ellas, haces clic en cualquier enlace. El evento de hacer clic ocurre cuando K out, pero esto está sucediendo comenzando desde K down. Comenzando desde K down, estamos intentando pre-fetch o pre-renderizar por adelantado.

Esto te da una ventaja para la página antes de ir a la página con 100, 200 milisegundos. Y esto es grande. Esto no es una cosa pequeña. Ese es un número grande también. No es pequeño en el mundo del rendimiento. Tiene, para pre-fetch o pre-renderizar, ambos, tiene primero en entrar primero en salir.

Carga solo hasta dos enlaces con eagerness conservadora. Y esto significa que cuando haces clic en un tercer enlace, el primero será descartado y el nuevo será cargado, y así sucesivamente.

Si decides optar por eagerness moderada, y esto te da una mejor ventaja, que es si pasas el cursor sobre cualquier enlace por más de 200 milisegundos, significa que este usuario muy probablemente va a hacer clic en este enlace. No es 100% seguro, pero muy probablemente lo hará. Esto te da una ventaja de 400 milisegundos más o menos, y esto también es dos primero en entrar primero en salir para pre-fetch y pre-render.

Esto significa que un punto abajo o más de 200 milisegundos, comenzamos a cargar esta página en segundo plano en una pestaña oculta o algo hasta que el usuario haga clic. Recordamos que somos lentos. Así que toma un segundo hacer clic, pero obtenemos esta ventaja debido al pasar el cursor. Y finalmente, la eagerness, la más alta, que es inmediata. Esto significa que cualquier cosa que el objetivo no pueda fetch, como URLs o CSS o algo, puede ser maximizado porque cuando lo encontramos en la página, va a ser cargado, simplemente cargado. Como ejemplo, te lo acabo de dar. Así que cuando el usuario hace clic, no hay tiempo, tiempo de espera para cargar. Ya estará cargado.

responsabilidad. También necesitas pensar en la máquina del usuario. El pre-render puede ser hasta 10 páginas o 10 enlaces, pueden ser pre-renderizados, pre-fetched hasta 50. Esto es mucho, pero esto podría no ser una muy buena idea si la máquina del usuario o el navegador está consumiendo mucha memoria y esto podría no ser una gran idea. Solo piénsalo para que puedas tomar esto como una mejora progresiva. No es para todos los usuarios.

Entonces, ¿cómo podemos medir la ventaja inicial para ver cómo las reglas de especulación van a mejorar nuestra cosa? Para medir la ventaja inicial, tenemos algunas métricas para medir. Si el usuario dice, ¿está sucediendo? Esto significa que ven algo en la pantalla. Lo medimos en nuestras herramientas div como first contentful pins. Y si es útil, significa que el viewport ya tiene la mayor parte llena. Esto para nosotros se llama LCP o largest contentful event. Esto viene con algo llamado Core Vitals creado por Google.

Y afortunadamente, tenemos la investigación que nos muestra qué es un buen LCP, qué es un mal LCP, y qué es un LCP aceptable. Esto es importante. Solo me gustaría llamar tu atención a que las reglas de especulación no están completamente soportadas en todas partes todavía. Solo están soportadas en navegadores basados en Chromium, lo que significa que las personas que están usando Firefox o Safari en este momento no van a disfrutarlo. Así que como dije, necesitas hacerlo como una mejora progresiva para las personas que están usando navegadores que lo soportan.

Con eso, encontrarás que cualquier navegador basado en Chromium tiene estas herramientas div dentro de él. Las encontrarás útiles en tus herramientas div. Puedes abrirlas, depurar reglas de especulación, descubrirlo como vamos a ver en la demostración ahora mismo.

Así que es hora de una demostración rápida para verlo en acción. Y ahora es el momento de pasar a una demostración rápida para ver esto en acción. Vamos con la demostración. Esta es una demostración que ha sido creada por el equipo de Chromium o equipo de Chrome para probar las reglas de especulación. Para encontrar las reglas de especulación, encontrarás una aplicación. Encontrarás una pestaña llamada cargas de especulación. Y esto significa que tenemos algunas páginas que han sido codificadas por una regla.

Si haces clic en reglas, encontrarás que hay una regla. Si lo miras, esto es realmente lo que está dentro de esta página en una etiqueta de script de reglas de especulación en el HTML de frutas comunes. Esto significa que puede ajustarse a cualquier enlace excepto algunos enlaces. Así que sí, para una demostración rápida, hacemos clic en especulaciones. Encontrarás que todas estas páginas están esperando ser pasadas por encima para que podamos pre-renderizar. Así que, por ejemplo, comenzaré con speech como el primero. Hago clic en él. Ahora, como puedes ver aquí, se vuelve listo.

Sin hacer clic en él, me gustaría mostrarte también algo muy interesante. Aquí encuentras en la parte superior principal que esta es la página principal que se carga frente al usuario. Haces clic en ella, encontrarás pitch que está pre-renderizado. Ahora, si haces clic en él, en realidad esta herramienta de desarrollo se ha cambiado a esta pestaña oculta que carga pitch en todas partes. Si haces clic en la consola, encontrarás que sí, soy pitch HTML. Esto es fantástico. Puedes depurarlo como si estuviera cargado frente al usuario y ver lo que se ha pre-renderizado para el usuario sin cambiar.

Si vuelvo a cambiar a principal, esto significa que estamos en el principal. Vamos de regreso a la especulación y ahora pitch está listo. Si hago clic en él, mira esto. Toma 54 milisegundos. Esto es enorme. Para medir qué tan rápido es, voy a limpiar la caché y recargar completamente. Así que para la primera recarga completa, esto significa que no está usando reglas de especulación. Puedes ver normalmente el tiempo de LCP. Si hago clic aquí, encontrarás que toma un segundo para cargar. Con reglas de especulación, que es solo en navegación, toma como un 90 por ciento menos o tal vez más. Así que intentemos de nuevo.

Pitch está listo. Como puedes ver aquí, haz clic en él. Esto es incluso menos. Si hago clic en Apple, está listo. Haz clic en él. Muy pequeño. Si hago clic en tal vez Kiwi y ahí lo tienes. Si vuelvo, puedes ver en el lado derecho, cuando cargo algo, cuando cargo uno nuevo, un tercero, en realidad está descartando lo que hemos cargado antes y carga el nuevo a medida que avanzamos porque son dos de ellos, primero en entrar, primero en salir. Esto es fantástico y puedes aplicarlo muy fácilmente a tu aplicación hoy. Solo agrega una regla que coincida con el flujo de usuario que tienes y la expectativa. Especula el comportamiento del usuario y haz eso. Haces clic.

de usuario que tienes y la expectativa. Especula el comportamiento del usuario y haz eso. Haces clic. Obtienes muy, muy bien. Esto no está cargado realmente con reglas de especulación.

Puedes volver a Cherry y Cherry está listo. Ahí lo tienes. Estas son las reglas de especulación. Si recargo el pitch, esto solo está en caché. Si vacío la caché para la primera carga, LCP será un poco grande. Así de simple.

Las reglas de especulación tienen muchas más cosas que necesitas aprender. Pero es solo la punta del iceberg. Siguiendo adelante. Podrías pensar, ¿puedo pre-renderizar todos los enlaces por adelantado para poder dar al usuario la máxima experiencia en todas partes con un YOLO? La respuesta corta y simple es no. No debido a dos cosas. En primer lugar, tienes algunas regulaciones.

Chrome no lo abre para todo. Hay algunas regulaciones que detendrán esta especulación. Y también hay algunas recomendaciones de no hacerlo para algunos enlaces específicos. Comienza con las regulaciones. Chrome evitará especulaciones en casos que el usuario esté haciendo en su navegador, como datos guardados. Si están en una cuota limitada de datos, van a habilitar datos guardados. Así que no vamos a pre-renderizar cosas que el usuario no está realmente haciendo clic en ellas por adelantado. Las páginas se abren en la pestaña de fondo.

la especulación tomará más memoria, la especulación no funcionará. Así que también durante el plugin encontrarás eso. Los iframes de origen cruzado tampoco se pre-renderizarán. Así que ten cuidado con eso.

Estas son solo regulaciones. Así que Chrome no aplicará ninguna especulación que vayas a escribir en estos casos. Aquí vienen algunas recomendaciones. No se recomienda hacer eso en URLs de cierre de sesión o inicio de sesión que requieran como SMS o autenticación de dos factores o algo así.

No necesitas realmente especular los enlaces del cambiador de idioma porque sabes, no una página en inglés, otra en alemán, no harías eso. URLs que incrementan la asignación del usuario como, ya sabes, monedas o algo en la página. URLs de añadir al carrito no añaden cosas al carrito del usuario sin su permiso.

Para estos enlaces, podría o no ser especulado por error. Para depurar eso, descubrirás, como te mostré, que puedes cambiar a estas páginas en las herramientas de desarrollo y encontrarás en la pestaña de red si están especuladas o no. Y esto es usando estos encabezados. Encontrarás el propósito seguro y será prefetch o prefetch pre-render. Así que puedes descubrir que cualquier cosa que haya sido prefetch o pre-render por error. Simplemente cualquier cosa que no necesites que el motor de búsqueda encuentre usando el robots.txt tampoco será recomendado para ser prefetch o pre-render.

Así que el desafío para nosotros con las reglas de especulación ahora es el uso de los anchos de banda. Si estás usando, ya sabes, o pre-renderizando páginas que son bastante grandes, esto será un desafío para algunos usuarios y podría ser algo que les gustaría evitar. Y aquí vienen algunos pasos adicionales. Paso adicional número uno, compresión de diccionario. De hecho, es algo relativamente nuevo que también puedes habilitar en tu servidor. Así que puedes comprimir páginas muy, muy pequeñas si no se actualizan completamente. Así que puedes cargar, imagina que puedes cargar como 10 páginas con el costo de solo una página.

Si combinas esta compresión de diccionario con reglas de especulación, obtendrás una navegación extremadamente rápida entre páginas. Así que pruébalo. Esto reducirá los anchos de banda dramáticamente y no te preocuparás por usar un ancho de banda. Paso adicional número dos es usar APIs de transición de vista. Porque incluso para páginas grandes, si estás cambiando entre ellas, eso parpadeará un poco para tener el resto de la página cargando. Si obtienes un inicio rápido de como 400 milisegundos, o para que la página completa cargue toma un segundo, así que obtendrás como 600 milisegundos, un tiempo de carga parpadeante. Con la API de transición de vista, esto ayudará mucho.