Tres umbrales definen una página que la documentación web.dev de Google califica como buena. Largest Contentful Paint, la métrica de carga, debe ocurrir dentro de los 2.5 segundos desde que la página empieza a cargarse. Interaction to Next Paint, la métrica de capacidad de respuesta, debe ser de 200 milisegundos o menos. Cumulative Layout Shift, la métrica de estabilidad visual, debe ser de 0.1 o menos.1 La misma página añade que la cifra que se debe medir es el percentil 75 de las cargas de página, separada entre teléfonos y computadoras de escritorio.1 Una página aprueba solo cuando tres de cada cuatro lectores obtienen la buena experiencia.
El registro publicado señala a los anuncios como causa en dos de las tres métricas
La página de web.dev sobre la optimización de Cumulative Layout Shift afirma que los anuncios son uno de los mayores causantes de desplazamientos de diseño en la web.2 Los widgets insertados, dice, a menudo no saben qué tamaño tiene su contenido antes de cargarse, por lo que las plataformas que los ofrecen no siempre reservan espacio.2 Su solución es reservar el espacio en el diseño inicial, con una altura mínima o una relación de aspecto en el espacio publicitario.2 El contenido que se inserta cerca de la parte superior de la ventana gráfica, agrega, suele causar el desplazamiento mayor.2 Cada solución supone que el anuncio es un rectángulo cuyo tamaño se desconoce hasta que llega.
Interaction to Next Paint mide el otro costo. Observa la latencia de cada clic, toque e interacción con el teclado a lo largo de la visita de un lector, y un INP igual o inferior a 200 milisegundos cuenta como buena capacidad de respuesta.3 La documentación atribuye parte de esa latencia a las tareas largas en el hilo principal.3 El Web Almanac 2024 de HTTP Archive agrupó los fotogramas de animación largos en computadoras de escritorio por categoría de script.4 La publicidad figuraba entre las categorías en las que la mayor parte del INP caía en el rango deficiente.4
Un anuncio asociado a una palabra de la página no tiene espacio que reservar
Un anuncio asociado a una palabra que ya está en el párrafo no necesita ningún rectángulo, y ese es el formato que vende AdBubbles. Un editor agrega un script, adbubbles.js, y las palabras compradas en sus artículos reciben un subrayado punteado suave. Pasar el cursor sobre la palabra o tocarla abre una pequeña burbuja que contiene una etiqueta "Ad" (anuncio), un título y un texto breves, el dominio del anunciante y un enlace. El script es un único archivo estático de JavaScript simple sin dependencias, y se carga cuando el DOM de la página está listo. Antes de que el lector actúe, la página no contiene ninguna burbuja ni ningún espacio vacío.
AdBubbles no coloca cookies, no guarda identificadores y no recopila datos personales de los lectores. El script incrustado envía tres balizas: una de visualización por carga de página, una de apertura cuando una burbuja ha permanecido visible durante un segundo y una de clic cuando se sigue un enlace. Nada más sale de la página. Lo que hace AdBubbles, como expone la página de cómo funciona, es hacer coincidir las palabras de una página con el anunciante que las compró. No elige qué personas ven un anuncio, no sigue a un lector de una página o un sitio a otro, y no promete ningún resultado. Lo que el script incrustado le hace a las métricas de un sitio es algo que solo las mediciones propias de ese sitio pueden mostrar.
La definición de Cumulative Layout Shift importa para la forma en que se abre una burbuja. La métrica cuenta los desplazamientos inesperados, y un desplazamiento que ocurre dentro de los 500 milisegundos posteriores a una entrada discreta, como un toque, un clic o una pulsación de tecla, se marca y puede excluirse.5 En un teléfono, un toque abre la burbuja, y en un teclado la abre Enter; ambas son entradas discretas. En una computadora de escritorio, la burbuja se abre tras una breve espera del cursor, y si algo se mueve cuando lo hace es una pregunta que deben responder los datos de campo del sitio.
El editor decide qué parte de una página puede leer el script incrustado. El alcance es el elemento que examina, por ejemplo el elemento article, y dentro de él el script incrustado omite los encabezados, los enlaces, el código, los controles de formulario, la navegación, el encabezado, el pie de página y todo lo que esté marcado con data-noads. Subraya la primera aparición de cada palabra comprada, nunca coloca dos burbujas en un mismo párrafo y se detiene en el máximo que fijó el editor. Las opciones de configuración son el alcance, el máximo por página y las categorías de anunciantes que se excluyen.
Una puntuación de 90 viene de un laboratorio y una aprobación viene de los lectores
El 90 de un objetivo de rendimiento designa una franja de Lighthouse, no un resultado de Core Web Vitals. La documentación de Chrome sobre la puntuación de rendimiento de Lighthouse colorea en verde una puntuación de 90 a 100 y la califica como buena; de 50 a 89 es naranja y de 0 a 49 es roja.6 PageSpeed Insights produce esa puntuación ejecutando Lighthouse en un entorno simulado, y llama al resultado datos de laboratorio.7 Los datos de campo de lectores reales aparecen junto a ellos en el mismo informe.7
La puntuación es un promedio ponderado de cinco puntuaciones de métricas.6 En la tabla de Lighthouse 10, Total Blocking Time pesa un 30%, Largest Contentful Paint y Cumulative Layout Shift un 25% cada una, y First Contentful Paint y Speed Index un 10% cada una.6 Interaction to Next Paint no está entre las cinco. Por lo tanto, una página puede estar en la franja verde mientras sus lectores esperan más de 200 milisegundos para que se registre un toque.
La evaluación de Core Web Vitals se construye desde el lado de campo. PageSpeed Insights toma sus datos de usuarios reales del Chrome User Experience Report y abarca el período de recopilación de los 28 días anteriores.7 Una página con datos suficientes aprueba la evaluación cuando los percentiles 75 de las tres métricas son buenos.7 Google Search Central dice que unas buenas Core Web Vitals, junto con otros aspectos de la experiencia en la página, se ajustan a lo que sus sistemas de clasificación principales buscan recompensar.8 Una aprobación es una afirmación sobre tres cifras de campo, y una puntuación de 90 es una afirmación sobre un promedio ponderado de laboratorio.
Chrome descarga un anuncio que usa demasiados recursos del dispositivo del lector
Chrome también impone un límite a los anuncios que consumen demasiado ancho de banda y procesador del lector. Su documentación sobre las intervenciones contra anuncios pesados establece tres condiciones.9 La primera es más de cuatro megabytes de ancho de banda de red, y la segunda, más de 15 segundos de tiempo del hilo principal en cualquier intervalo de 30 segundos. La tercera es más de 60 segundos de tiempo del hilo principal en total. Un marco de anuncio que supera cualquiera de ellas se descarga.9
Esas cifras describen un anuncio que se ejecuta en un marco propio, con su propio tráfico de red y su propio trabajo en el hilo principal. Una burbuja se muestra en un Shadow DOM dentro del propio documento de la página, no en un marco de anuncio. Los datos por sitio que lee el script incrustado son un archivo estático, que se regenera cuando cambia una campaña y se almacena en caché en el borde de la red. Por eso, una visita a la página no le cuesta nada al servidor de anuncios, y la única solicitud dinámica es la pequeña baliza.
La cifra que hay que comparar es el percentil 75 del propio sitio, no una puntuación
El Web Almanac 2024 ofrece las referencias con las que un editor puede comparar su propio origen. Informa que el 72% de los sitios web obtuvo buenas puntuaciones de CLS y el 11% tuvo puntuaciones deficientes.4 El INP bueno alcanzaba al 74% de los sitios web en teléfonos y al 97% en computadoras de escritorio.4 Las Core Web Vitals buenas en conjunto, medidas con INP, alcanzaban al 43% en teléfonos y al 54% en computadoras de escritorio.4
Configurar una cuenta de editor y el script incrustado no cuesta nada. La cifra que se debe leer después no es la franja verde. Para un origen con datos suficientes, PageSpeed Insights muestra el Interaction to Next Paint y el Cumulative Layout Shift del percentil 75 de los 28 días anteriores.7 El informe de Core Web Vitals de Search Console muestra el rendimiento de las páginas del sitio.8 Esas dos cifras de campo, leídas antes de agregar un script y de nuevo 28 días después, son los números que una puntuación de 90 no puede aportar.