Evolución de las tácticas de Core Web Vitals con Cloudflare y WebpageTest

En nuestra guía de tácticas Core Web Vitals usando Cloudflare y WebpageTest, describimos los requisitos básicos para usar Cloudflare como un proxy inverso para probar cambios HTML tácticos con WebpageTest. Nuestra versión de la prueba se simplifica a partir del concepto original de Patrick Meenan, que utiliza HTMLRewriter() para seleccionar un elemento y modificar el código.

Profundizaremos en este tutorial, pero si solo está buscando el script de Cloudflare Worker, puede encontrarlo aquí.

Nuestra primera entrega señaló que no se mantendrá al día con los cambios en Search Engine Land. El LCP estaba codificado y lo necesitaríamos para interactuar con una página dinámica y sus valores. Si bien WebpageTest tiene, en el momento de la publicación, el gráfico de cascada mejor pensado y más detalles de los que pueda imaginar, no es la forma más rápida de obtener resultados.

Faro desde la línea de comandos

Ejecutar el programa Lighthouse CLI (Command Line Interpreter) con las opciones --extra-headers necesarias para la prueba nos permite simular también configuraciones estándar para Core Web Vitals de la forma en que lo hicimos con WebpageTest. Deberá trabajar desde un emulador de terminal.

La forma más fácil de instalar Lighthouse es con NPM (Node Package Manager). Una vez instalado, ejecute la siguiente instrucción:

$ lighthouse https://sel.deckart.workers.dev \
--extra-headers "{\"x-host\":\"searchengineland.com\", \"x-bypass-transform\":\"false\"}" \
--form-factor=mobile \
--throttling.cpuSlowdownMultiplier=4 \
--only-categories=performance \
--view

La evolución de nuestro banco de pruebas

Nuestro objetivo es demostrar una evolución desde un concepto original para un banco de pruebas hasta un proyecto adecuado para nuestros eventos y artículos futuros. El banco de pruebas no debe limitarse a ejecutar evaluaciones de rendimiento; ahí es donde empezaremos. Pero tiene que funcionar bastante bien para una serie de situaciones con sitios web y esto puede resultar bastante difícil. Proporcionaremos métodos para ayudar.

Por ejemplo, los sitios suelen utilizar rutas relativas a recursos de activos en lugar de rutas absolutas (con protocolo HTTP y todo). Proporcionaremos un bloque para que coincida con estos, por lo que HTML generalmente funcionará. Después de aplicar esto, cuando las cosas aún no funcionan, cambiar las referencias problemáticas entre los nombres de host de la prueba y el sujeto de la prueba a menudo funciona, incluso para las violaciones de la política de CORS.

Ahí es donde realmente brilla la belleza de HTMLRewriter() de Cloudflare. Los activos de todo el sitio generalmente se cargan como elementos secundarios HEAD de página. Con coincidencias de flexibilidad como jQuery, incluso sintaxis similar, podemos seleccionar elementos secundarios de HEAD cuando sea necesario. Puede utilizar selectores XPath y expresiones regulares. Simplifiquemos las cosas y busquemos rutas relativas que comiencen con "/" para los atributos src o href :

 return new HTMLRewriter() .on('link', { element: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on('script', { element: el => { const script_src = el.getAttribute('src'); if (script_src && script_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + script_src); } } }) .on('img', { element: el => { const img_src = el.getAttribute('src'); if (img_src && img_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + img_src); } } })

Estamos aprovechando el poder (y la rentabilidad) de Edge Computing para realizar pruebas muy útiles. Modifique el encabezado de la solicitud x-host para cargar diferentes sitios en el banco de pruebas y abra DevTools. Es posible que no se necesiten transformaciones, pero su kilometraje variará. La experiencia frontend te da una idea.

Los bloques de comentarios como los interruptores fallarán y requerirán un poco de experimentación (que puede ser todo lo que necesita). Por ejemplo, algunas referencias de activos pueden escribirse sin dos puntos HTTP. Debería escribir otro condicional para verificar las rutas donde href o src comienzan con "//" y luego modificar el valor del elemento seleccionado en el script. Intente terminar sin errores de consola que el sitio real no tenga.

Lighthouse te da LCP

Es relativamente fácil recuperar referencias LCP usando Lighthouse, PageSpeed ​​Insights o WebpageTest. Suponiendo que el LCP califica para la precarga, como cuando no es un <div> o un <p> , y cuando aún no se está cargando previamente, proporcione a nuestro script el valor href mediante la estructura URL 'query param' (o devuelva HTML con un formulario) para probar los cambios en el tiempo LCP de una página con precarga.

La mayoría de los profesionales técnicos de SEO son útiles para modificar los parámetros de consulta de solicitudes para procesar diferentes cosas en programas del lado del servidor, como los resultados de búsqueda de Google. Usando la misma interfaz, nuestro script precargará el LCP usando la ruta que aplica en el valor del parámetro "lcp" y lo pasa a una función llamada addPreloadAfter() para interpolar HTML para la prueba.

 async function handleRequest(request) { const { searchParams } = new URL(request.url); let lcpHref = searchParams.get("lcp"); return new HTMLRewriter() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse); }

La función addPreloadAfter() toma nuestro valor "lcpHref" de searchParams.get() y lo procesa como "href" para compilar HTML.

 const addPreloadAfter = (href) => ({ element: (el) => { el.after(`<link rel="preload" href="${href}" />`, { html: true }); } });

¿Observe la opción "html: verdadero"? Esta es una configuración de opción que Cloudflare requiere por seguridad cuando se usan trabajadores con métodos API HTMLRewriter() que escriben HTML. Querrá conocer sus capacidades y limitaciones para codificar sus propias pruebas.

KV de Cloudflare

Si alguna vez vamos a hacer algo remotamente interesante, necesitamos una forma de almacenar datos persistentes entre ejecuciones de scripts. Afortunadamente, Cloudflare también ofrece un pequeño mecanismo de almacenamiento de datos llamado KV que podemos vincular con nuestros trabajadores para almacenar un pequeño campo de " value " de datos, accesible por su " key ". Es sorprendentemente fácil de comprender e implementar. Para demostrar cómo usarlo, escribiremos un pequeño contador de visitas rápido.

 const counter = parseInt(await KV.get('counter') || 0); if (!host || counter > 1000) { return new Response('hit limit exceeded or x-host missing', {status: 403}); } else { await KV.put("counter", counter + 1); }

Busque el elemento del menú de navegación KV en Trabajadores.

Una vez que haya creado un espacio de nombres ("SEL" se usa en el ejemplo anterior), use la interfaz de usuario del tablero de KV para crear su primera clave (" counter " en el caso anterior) y asigne un value inicial. Una vez configurado, navegue de regreso al panel de Worker para encontrar la interfaz requerida para vincular nuestro nuevo espacio de nombres KV con Cloudflare Workers para que puedan acceder a las claves y los valores almacenados asociados.

Vincular espacios de nombres KV a trabajadores

Elija el Trabajador con el que desea vincularse y haga clic en su menú Configuración para encontrar el submenú de Variables (directamente debajo de General). Tenga en cuenta que puede definir variables de entorno, enlaces de objetos duraderos (que exploraremos en una entrega futura) y, finalmente, enlaces de espacio de nombres KV. Haga clic en Editar variables y agregue la variable que desea usar en el script.

En el siguiente caso, puede ver nuestra variable ' KV ' con nombre redundante que usaremos en el script Worker asociado, desde el que navegamos. Nuestro uso de ' KV ' se nombró con fines ilustrativos. Selecciónelo del menú desplegable, guárdelo e inmediatamente podrá usar su variable en el script. Cree tantas secuencias de comandos y combinaciones de espacios de nombres KV como desee.

El truco es recordar vincular una Variable que desea usar en el Trabajador. Es tan flexible que puedes sentirte libre de jugar y hacer un lío al principio. Probablemente podrá organizarlo en algo cohesivo en una fecha posterior, que es exactamente lo que desea para poder crear prototipos de aplicaciones o crear microservicios para usar en sus aplicaciones.

Una vez que haya configurado su servicio KV y los valores iniciales, navegue de regreso al Trabajador y abra la "Edición rápida" incorporada. Reemplace lo que hay allí con esta esencia actualizada, que incluye el contador de visitas y todo lo demás escrito en esta publicación. Haga clic en "Guardar e implementar" y debería tener el servicio en funcionamiento en su URL de demostración de trabajadores disponible públicamente.

por qué nos importa

Nuestra guía original estaba destinada a abrir el apetito, entusiasmarlo para comenzar y entusiasmarlo por un aprendizaje más valioso. Para proporcionar eso, tenemos una plataforma gratuita y una combinación de código que es lo suficientemente simple para entender por sí misma, junto con un proceso que debería ser lo suficientemente fácil de seguir y lograr un resultado de prueba.

La estandarización de las pruebas de sitios web para demostrar SEO a los desarrolladores no debería requerir la comprensión del código cuando puede copiar y pegar secuencias de comandos en Cloudflare, seguir los pasos y probar ciertas tácticas de SEO. Las pruebas de Core Web Vitals son tan confiables como las que obtendremos para mejorar los puntajes de rendimiento de RUM (Real User Metrics) para aumentar las clasificaciones, dado lo dependiente que es de las métricas.

¿Quieres más SEO para desarrolladores? Únase a nosotros para la capacitación SMX Master Class, dirigida por Detlef Johnson, del 8 al 9 de marzo de 2022.