Funciones para Core Web Vitals Tactics con HTMLRewriter de Cloudflare

Nuestra Guía de pruebas A/B para Core Web Vitals explicó una serie de pequeños pasos con dos servicios y una extensión de navegador para escribir pruebas para tácticas de código frontend. Hace treinta años, copiábamos la fuente sin procesar de una página para ejecutar operaciones de búsqueda y reemplazo hasta que pudiéramos administrar un facsímil de una página colocada en una carpeta habilitada para la web para demostrar los mismos tipos de recomendaciones.

Ya no tenemos que hacer eso.

Hace veinte años, configurar un proxy inverso y escribir software para realizar SEO estaba limitado a un pequeño grupo de empresas que construían y alojaban la infraestructura. Cloudflare ahora nos brinda una solución llave en mano. Puede ponerse en marcha con una cuenta gratuita. Para cambiar el código de interfaz, use la API de JavaScript HTMLRewriter() de Cloudflare.

El código es relativamente fácil de comprender.

Con Core Web Vitals, es la inmediatez, la necesidad percibida y la rapidez de poder pasar por diferentes pruebas lo que finalmente muestra valor y realmente impresiona. La plataforma fundamental está disponible para usted a través de los pasos descritos en nuestra guía. Escribiremos funciones para realizar cambios comunes para que pueda comenzar a probar tácticas reales de inmediato.

HTMLReescritor()

Si ha estado siguiendo, es posible que sepa que nuestro script ofrece la opción de precargar un elemento que puede especificar en un parámetro de solicitud para LCP. Devolvemos un formulario cuando falta el valor, solo para facilitar la adición de su referencia. También hay un marcador de posición para algo llamado importancia , que también abordaremos. Lo importante es entender lo que vamos a hacer.

La API HTMLRewriter() nos brinda la capacidad de usar selectores de elementos de estilo jQuery para adjuntar elementos HTML en la fuente de la página sin procesar para ejecutar JavaScript desde ese punto de apoyo. Podrás modificar elementos, un grupo completo de elementos o incluso el documento base de formas poderosas. Puede editar el título de una página, por ejemplo. En producción, su edición se convierte en el título y es lo que se indexa en Google y Bing.

Una complicación que encontrará es que solo puede editar la fuente sin procesar, no un modelo de objeto de documento (DOM) hidratado. Una forma rápida de ver la fuente sin procesar es con la funcionalidad de vista de fuente integrada del navegador. Con Firefox, view-source resalta los errores de validación en rojo, por ejemplo. Incluso cuando los navegadores "arreglan" HTML roto, esto generalmente se puede arreglar con nuestro Worker.

Trabajando dentro de DevTools, la pestaña "Fuentes" brinda acceso a la fuente sin procesar. Use la configuración de preferencias para siempre "imprimir bastante" la fuente, lo que la formateará para que pueda escanear el código para buscar optimizaciones. Otro consejo de preferencia es una configuración para omitir el caché cuando DevTools está abierto. Este flujo de trabajo lo ayudará a medida que avanza para que sus optimizaciones no generen errores de referencia.

Selectores de elementos

Cuando detecte algo que desee corregir con HTMLRewriter() , necesitará limitar los cambios y aislar el elemento para evitar alterar más código del que pretende. Use el selector más exclusivo posible, que puede ser muy fácil cuando los elementos tienen ID únicos. De lo contrario, busque un signo revelador, como una referencia a una ubicación única en los atributos href o src .

Encontrará la capacidad de usar comodines y expresiones regulares de estilo vim en "modo de comando" que coincidan con los valores de los atributos. También puede proporcionar más de un criterio, incluso con el mismo nombre de atributo. Usa tus poderes de vim para limitar las coincidencias a elementos individuales o unir un grupo de elementos con expresiones más amplias. La lógica puede entonces separar las preocupaciones entre los cambios.

Ejemplo de coincidencia de elementos de enlace de búsqueda previa "fonts.g" comodín para eliminar los de: fonts.googleapis.com.

 .on(`link[rel="dns-prefetch"][href*="fonts.g"]`, removeEl())

Ejemplo que muestra dos coincidencias para el atributo href , limitándolo a un solo archivo entre muchos.

 .on('link[href^="https://example.com/static/version"][href$="/print.css"]', unblockCSS())

El primer ejemplo anterior usa esa coincidencia de comodín en la que la cadena "fonts.g" puede aparecer en cualquier lugar del atributo href de los elementos de enlace. Es un ejemplo de una coincidencia amplia que podría asociarse a más de un elemento de enlace para una acción adecuada, como eliminar los elementos que coinciden, si los hay.

El segundo ejemplo de arriba muestra cómo puede seleccionar un elemento de enlace particular que comienza con una cadena y termina con otra cadena, pero que puede tener cualquier cosa en el medio. Esto es útil para seleccionar un único elemento que forma parte de un sistema de compilación en el que puede haber un directorio de tokens de control de versiones para la eliminación de caché del navegador que se nombra dinámicamente.

Elementos de enlace

Los elementos de enlace son multifacéticos en virtud de sus diversos atributos. Por lo tanto, pueden servir para varios propósitos. No debe confundirse con los enlaces (como en los anclajes), los elementos de enlace suelen ser el lugar donde comienza a buscar estrategias de rendimiento de impacto rápido. Algunos elementos de enlace de precarga y preconexión pueden estar estorbando o pueden ser completamente innecesarios.

Solo obtiene un máximo de seis hosts para conectarse simultáneamente. Tu primera estrategia será aprovecharlos al máximo. Intente eliminar todas las declaraciones de elementos de enlace de sugerencia de prioridad y pruebe el resultado. Si los tiempos salen mal, entonces agréguelos de uno en uno y pruebe el impacto real de cada uno. Tendrá que aprender a leer en profundidad el gráfico de cascada de WebpageTest.

Después de esto, las tácticas se dirigen a la carga de recursos, que también involucra elementos de enlace en gran medida, pero no exclusivamente. En este punto, también queremos ver los guiones. El orden en que se cargan los recursos puede afectar las cosas muy negativamente. Nuestro banco de pruebas es perfecto para probar varias tácticas obtenidas al leer el gráfico de cascada. Mantenga abierto el cajón de la consola de DevTools para comprobar si hay errores mientras trabaja.

Quitar elementos

Eliminar elementos es excepcionalmente simple de hacer. Una vez que haya seleccionado un elemento, o un grupo de ellos, el siguiente campo en las HTMLRewriter().on() es donde escribe un bloque de script. Puede hacer esto en su lugar con llaves. Puede hacer referencia a una función con nombre. O puede crear una nueva instancia de class para un objeto definido anteriormente, que en este contexto puede ser un exceso de ingeniería.

Cuando encuentre un código Worker de muestra, es posible que vea inicializadores class . Todo lo que realmente se necesita para eliminar un elemento es la siguiente función. Cualquier cosa que se haga con un objeto de clase con nombre se puede hacer con una función simple (objeto) usando menos código, menos errores, con una sintaxis más legible y mucho más enseñable. Volveremos a visitar los constructores class cuando profundicemos en Objetos duraderos.

 element: (el) => { el.remove(); }

En pocas palabras, este bloque define una variable "el" en referencia a la instancia del elemento y el bloque de código llama al método de elemento integrado remove() , que encontrará detallado en la documentación correspondiente. Todos los métodos de elementos HTMLRewriter() están disponibles para su uso con instancias de sus coincidencias de elementos. Eliminar elementos es uno de los más simples de comprender.

Desbloqueo de recursos de bloqueo de renderizado

Desbloquear elementos de script es mucho más fácil que desbloquear recursos de hojas de estilo. Por suerte, tenemos un atributo booleano para señalar al navegador que queremos cargar un script de forma asincrónica o diferirlo por completo (para cuando hay tiempo de inactividad). ¡Eso es ideal! Las hojas de estilo, por otro lado, necesitan un pequeño "truco" para desbloquearlas; requieren algo de Javascript en línea.

Esencialmente, convertimos una referencia de elemento de enlace de hoja de estilo en precarga para desbloquearlo. Pero eso cambia la naturaleza del elemento de enlace a uno en el que no se aplicarán las reglas de estilo. Precarga los recursos de descarga para almacenarlos en la memoria caché local, listos para cuando los necesites, pero eso es todo. DevTools le advierte cuando un recurso está precargado y no se usa adecuadamente; ¡entonces es cuando sabe que puede eliminarlo!

Precargar y luego usar un atributo de onload para ejecutar JavaScript para volver a cambiarlo de precarga a hoja de estilo es el "truco" de CSS para desbloquear lo que de otro modo es un recurso de bloqueo de renderizado natural. El uso de this palabra clave de JavaScript le permite cambiar sus propiedades, incluido el atributo rel (y el propio atributo onload ). El patrón también tiene un relleno para sesiones que no son de JavaScript.

Aquí está nuestra función unblockCSS() que implementa la estrategia utilizando métodos de elementos ya preparados.

 const unblockCSS = () => ({ element: (el) => { el.removeAttribute('media'); el.setAttribute('rel', 'preload'); el.setAttribute('as', 'style'); el.setAttribute('onload', "this.onload=null;this.rel='stylesheet';this.media='all'"); el.after(` `, { html: true }); }});

Seleccione las referencias de la hoja de estilo del elemento de enlace que bloquean el renderizado y llame a esta función en ellas. Permite que el navegador comience a descargar la hoja de estilo al cargarla previamente. Una vez cargado, el atributo rel vuelve a cambiar a la hoja de estilo y las reglas CSS se aplican de inmediato. Si se producen problemas de estilo después de este cambio, es necesario cargar una o más hojas en el orden de solicitud normal.

La función actúa como un bloque de código reutilizable. Alterne sus selecciones de elementos usando HTMLRewriter() y pruebe la diferencia desbloqueando hojas CSS una a la vez, o en grupos, según su enfoque. Utiliza la táctica para lograr una estrategia general desbloqueando todo lo que puedas. Sin embargo, recuerde siempre buscar problemas derivados de cambios en los recursos CSS y Script.

Prioridades del guión

El orden en que carga los estilos puede estropear el diseño. Las reglas de hoja de estilo de carga inesperadamente rápida se sobrescribirán con otras que se carguen más lentamente. También debe observar mientras carga los scripts en orden alternativo para que se evalúen y residan en la memoria cuando se evalúe el documento. Los errores de referencia pueden convertirse en cascada en docenas o cientos de errores de script.

La mejor manera de comprobar si hay problemas es mirar el cajón de la consola y simular conexiones de red lentas. Esto puede exagerar los problemas hasta el punto de que deberían ser evidentes en DevTools. Si los recursos de la secuencia de comandos se procesan con CPU más potentes y se cargan a la velocidad del módem de cable, o más rápido, es posible que se pierda un error crítico. Las solicitudes también se espacian muy bien.

Aquí está nuestra función cambiando o agregando atributos asíncronos y diferidos.

 const makeAsyncJS = () => ({ element: (el) => { el.removeAttribute("defer"); el.setAttribute("async", "async"); } });

 const makeDeferJS = () => ({ element: (el) => { el.removeAttribute("async"); el.setAttribute("defer", "defer"); } });

Si una secuencia de comandos originalmente no tiene async o diferir, es inofensivo ejecutar el método del elemento removeAttribute() para obtener un bloque de código más reutilizable. Puede ignorar esto con seguridad si está trabajando rápidamente en un proyecto único en el que podría estar escribiendo esto en línea en lugar de llamar a una función que definió previamente en el script.

Atributos alternativos para SEO

Como se mencionó, nuestra Guía de tácticas A/B Core Web Vitals fue, por diseño, destinada a que tuviéramos un banco de pruebas de Edge Computing en pleno funcionamiento para demostrar contenido con futuros artículos de SEO para desarrolladores y eventos futuros. Durante nuestro evento SMX West el año pasado (2021), demostramos el uso de Cloudflare Workers para un sitio web, logrando los fuegos artificiales Lighthouse (con una puntuación de 100 en todas sus pruebas).

Hay muchas cosas que deben estar en su lugar para obtener los fuegos artificiales. Un aspecto importante es que todas las imágenes deben tener atributos alt válidos. La prueba puede detectar cuándo el texto en los atributos alt es "anónimo" o está presente, pero vacío. Necesita palabras que representen lo que hay en la imagen asociada. Una forma de hacerlo podría ser analizar el nombre del archivo desde el atributo src .

Aquí hay una función que extrae texto de los atributos img src para potenciar el texto alt de los nombres de archivo con guiones.

 const img_alt = element.getAttribute('alt'); const img_src = element.getAttribute('src'); if (!img_alt) { element.setAttribute('alt', img_src.replace('-', ' ')); }

En pocas palabras, esto buscará la condición en las imágenes donde no hay un valor de atributo alt . Cuando existe la posibilidad de que su nombre de archivo de atributo src esté separado por guiones, reemplazará los guiones con espacios para formular lo que puede ser un valor adecuado. Esta versión no funcionará en la mayoría de los casos. No reemplaza las barras diagonales ni el protocolo y el dominio. Esto solo sirve como punto de partida.

Prueba para un mejor rendimiento y una mayor visibilidad

Tener un banco de pruebas para probar varias tácticas de optimización del rendimiento de Core Web Vitals es increíblemente impresionante para los propietarios de sitios. Debería tener esta capacidad en el arsenal de su agencia. Un ligero aumento en las clasificaciones de Google con buenos puntajes es medible y en gran medida alcanzable para la mayoría de los sitios a través de las tácticas que discutiremos y demostraremos. Sintonice para una presentación en vivo el 8 y 9 de marzo.

Los técnicos de SEO han recomendado durante mucho tiempo mejoras de rendimiento para la clasificación de los motores de búsqueda. El beneficio para las clasificaciones nunca ha sido más claro. Google definió literalmente las métricas y publica sobre su efecto. Contamos con trabajadores de Cloudflare para implementar soluciones de Edge SEO, como se demuestra aquí con los atributos alt para las imágenes. Nuestro banco de pruebas de proxy inverso en virtud de Cloudflare prepara el escenario para una comunicación rica con los desarrolladores.