En el sitio web que se volvió a lanzar, también se observa un aumento de más del 75% en la visibilidad de los anuncios, una reducción del 50% en el porcentaje de rebote y un aumento del 27% en las vistas de página.
Cuando Google anunció la iniciativa de Métricas web esenciales, el publicador alemán Netzwelt se dio cuenta rápidamente del potencial de estas métricas nuevas para ofrecer una excelente experiencia de página y mejorar la monetización basada en la publicidad. Emprendieron un viaje para reiniciar su sitio web y, al mismo tiempo, aplicaron las prácticas recomendadas de rendimiento más comunes y, al mismo tiempo, optimizaron las etiquetas de anuncios y las posiciones. Comprometerse con una UX excelente y páginas rápidas demostró ser una forma de optimizar la participación y los ingresos publicitarios, con un aumento del 27% en las vistas de página, la visibilidad del anuncio en más del 75% y un aumento del 18% en los ingresos publicitarios.
El 27%
de aumento en las vistas de página
El 18%
de aumento en los ingresos publicitarios
El 75%
Visibilidad del anuncio
El desafío
Al igual que muchos otros editores de noticias, Netzwelt se esforzó por encontrar el equilibrio adecuado entre la optimización de la experiencia del usuario y la velocidad de la página, a la vez que mantenía altos ingresos publicitarios. Los principales desafíos que encontraron fueron los siguientes:
- Cambio de diseño acumulado (CLS) alto debido a cambios de diseño activados por anuncios, en especial de banners superiores y espacios de varios tamaños.
- El Procesamiento de imagen con contenido más grande (LCP) llega tarde debido a que los anuncios son el procesamiento de imagen más grande o porque quita el ancho de banda de la carga de la hero image.
- Un retraso de primera entrada (FID) alto causado por el código JavaScript de terceros necesario para la publicidad, las ofertas de encabezado y otros fines.
- Efectos secundarios en las Métricas web esenciales provenientes de diálogos de consentimiento controlados por proveedores externos, que también se agregaron a cambios de diseño y podrían detectarse como pinturas más grandes tardías.
Optimiza un sitio web de noticias para las Métricas web esenciales
Cuando Netzwelt comenzó a trabajar en las métricas web esenciales, enseguida notó que la optimización de las Métricas web esenciales no necesita afectar la publicidad de manera negativa, pero puede usarse como una oportunidad para mejorar la visibilidad del anuncio. Por lo tanto, el equipo de Netzwelt optimizó las Métricas web esenciales para aumentar la visibilidad de los anuncios en más del 75% y atraer publicidad de mayor valor (el promedio global para los anuncios gráficos es inferior al 50%).
Optimiza CLS
Los anuncios suelen cargarse tarde (a veces, de forma consciente mediante la carga diferida) y, a menudo, su tamaño real no se conoce de antemano debido a los tamaños múltiples y la colocación fluida de los anuncios.
El problema se puede dividir en dos: anuncios en la mitad superior e inferior de la página.
Los anuncios en la mitad superior de la página pueden provocar saltos de diseño masivos debido a que se cargan tarde con tamaños desconocidos. Si se bloquea el espacio más grande que puedan necesitar, se puede generar una UX deficiente, mientras que solicitar a los anunciantes tamaños fijos puede reducir los ingresos publicitarios. Para solucionar este problema, Netzwelt hizo fijo el anuncio superior y quitó algunos de los tamaños de banner más grandes permitidos. Los anuncios superpuestos evitan que se activen saltos de diseño para anuncios de diferentes tamaños. Si bien los tamaños aptos reducidos afectan la venta de anuncios, la mejor visibilidad compensa esto fácilmente.
Los datos históricos y las pruebas A/B ayudaron a Netzwelt a encontrar el tamaño y el posicionamiento adecuados para diferentes dispositivos y tamaños de pantalla, así como a las reglas de medios de CSS que se usan para reservar espacio.
Los anuncios en la mitad inferior de la página ofrecen posibilidades de mejora significativa:
- Si un banner no se ve, sino que se carga, genera una visibilidad del anuncio deficiente y empeora la experiencia en la página.
- Un banner que se carga cuando un usuario se desplaza por él puede agregar saltos de contenido adicional.
Para mantener una buena experiencia de página y una alta visibilidad de los anuncios, NetApp implementó la carga diferida y reservó el espacio para el tamaño del denominador común más bajo. En una zona de varios tamaños, los banners solicitados en los tamaños de 300 x 250 a 300 x 600, pero con una altura de 250 px De esta forma, se eliminaron los cambios de diseño para los tamaños más pequeños y se redujeron enormemente para banners más grandes. Este enfoque no es óptimo, pero es un punto de partida y un buen compromiso.
Para optimizar aún más, NetApp utilizó Intersection Observer y la API de Network Information para controlar las colocaciones de anuncios y reducir los cambios de diseño. Se usan diferentes posiciones de anuncios y estrategias de carga diferida según la posición de desplazamiento y la calidad de la conexión de red. Además, los anuncios se pueden cambiar de varios tamaños a tamaños fijos. El objetivo del algoritmo es siempre maximizar la visibilidad de los anuncios y, al mismo tiempo, minimizar los cambios de diseño. Los navegadores que no admiten la API de NetworkInfo usan un valor de proxy basado en una combinación de tipo de red derivada de IP y dispositivo. Esta estrategia de carga adaptable reduce en especial el CLS para los usuarios con conexiones a Internet lentas.
Optimiza FID
El retraso de primera entrada puede parecer un problema para los editores de noticias, ya que los anuncios suelen incluir muchas bibliotecas de JavaScript adicionales. Y parece haber un impacto negativo cuando se analizan datos de laboratorio como Lighthouse. Sin embargo, si se analizan los datos de campo en el Almanacán web de 2020, muchos sitios web cuentan con una respuesta lo suficientemente rápida. En parte, esto se debe a que la publicidad de JavaScript se carga tarde (después de la primera entrada), a que se almacena en caché (por ejemplo, a obtener el tratamiento del almacenamiento en caché de código v8) o a que los proveedores de anuncios lo optimizan de forma adecuada. Los rastreadores de visibilidad de proveedores garantizan evitar tareas largas, por lo que incluso cuando la suma del tiempo de ejecución es larga, el Tiempo de bloqueo total (TBT) y los FID no se ven afectados. Si bien FID no era un gran problema para Netzwelt, todavía había que realizar algunas optimizaciones:
- Reducir las secuencias de comandos de anuncios y los proveedores, concentrándose en una única pila si es posible
- Carga de todas las secuencias de comandos con aplazamiento o asíncrono.
- Usar webpack o tecnologías similares para la reducción y la desagregación de árboles
- Usar reglas de CSS simples similares a las de BEM
- Evitar tareas de larga duración y usar el patrón inactivo hasta que sea urgente
- Trabaja con RequestAnimationFrame en cualquier lugar que se vea afectado.
Cómo optimizar el LCP
La métrica Largest Contentful Paint puede verse influenciada por los anuncios de dos maneras: de forma explícita si se reconoce un anuncio como el procesamiento de imagen más grande y, de forma indirecta, si congestiona el ancho de banda de la red o afecta la ruta crítica para que el procesamiento de imagen más grande real (por ejemplo, una imagen hero) no se pueda cargar lo suficientemente rápido.
Netzwelt ya había quitado los anuncios rectangulares medianos de los espacios publicitarios superiores mientras realizaba optimizaciones para CLS. Esto tenía el beneficio adicional de que los anuncios no se convirtieran en el elemento más grande.
Netzwelt se rige por una política estricta de priorizar el contenido por encima de los anuncios. Netzwelt priorizó las imágenes hero y las fuentes utilizadas en la mitad superior de la página y optimizó la ruta de acceso crítica para que tuviera prioridad sobre las secuencias de comandos y los anuncios publicitarios. Esta priorización ayudó al LCP a no verse afectado por los anuncios.
Además de estas optimizaciones, Netzwelt siguió otras prácticas recomendadas:
- Se separó el CSS para la ruta de acceso de renderización crítica y se lo colocó en el encabezado.
- Precargar las fuentes, las secuencias de comandos y las imágenes más importantes
- Se evitó la carga diferida de imágenes en la parte superior de la página.
- Se usó
font-display="swap".
Consentimiento del GDPR y Métricas web esenciales
A menudo, los diálogos de consentimiento tienen un impacto negativo en las Métricas web esenciales. Al igual que con los anuncios, un cuadro de diálogo de consentimiento puede influir en las Métricas web esenciales de dos maneras:
- De forma explícita si se detecta como la pintura más grande o si causa cambios de diseño.
- De manera implícita, el robo de ancho de banda del procesamiento de imagen más grande real, el bloqueo de la ruta de acceso crítica al procesamiento de imagen más grande o el retraso de los anuncios hasta que se obtenga el consentimiento, lo que, a su vez, puede activar cambios de diseño.
Netzwelt trabaja con un proveedor de consentimiento externo, que también implementó optimizaciones. En primer lugar, Netzwelt se aseguró de evitar las dificultades sencillas:
- Las secuencias de comandos de consentimiento se cargan de forma asíncrona para no bloquear recursos críticos.
- El consentimiento tiene un formato de modo que los elementos grandes no sean aptos como los más grandes en el LCP.
- La superposición de consentimiento usa
position: fixedpara evitar cambios. - Si bien los anuncios solo se muestran después de otorgar el consentimiento, se conserva de antemano el espacio en blanco adecuado para evitar cambios de diseño cuando se cargan los anuncios.
- Asegúrese de que la visualización y el posicionamiento del cuadro de diálogo de consentimiento no activen los cambios de diseño. Un problema que se encontró y se solucionó aquí fue la opción de bloqueo de desplazamiento del proveedor de servicios, que inhabilitaba el desplazamiento mientras se mostraba el consentimiento, ya que se movía el contenido principal del artículo cuando se desplazaba, lo que provocaba cambios de diseño.
Después de este trabajo, todavía había grandes discrepancias entre el CLS de campo y el de laboratorio. Si bien el CLS del lab estuvo cerca de cero, los valores de campo estuvieron significativamente por encima de los umbrales. Después de la investigación, la causa fue los cambios de diseño dentro del iframe de consentimiento, que actualmente solo se capturan correctamente en los datos de campo. Netzwelt sigue trabajando con el proveedor de consentimiento externo para mejorar este problema.
Modelos de suscripción a noticias y Métricas web esenciales
Los editores de noticias están migrando a modelos de suscripción para financiar el periodismo. Este modelo es relevante para las Métricas web esenciales, ya que las personas no se suscribirán a sitios web con una experiencia del usuario deficiente. Además, los suscriptores no esperan ver anuncios en el contenido pagado, pero ocultarlos puede provocar cambios en el diseño. El sitio web debe verificar si los usuarios tienen derecho a ver el contenido y si deben mostrar anuncios. Estas verificaciones pueden causar latencias adicionales, lo que genera cambios en el contenido o una experiencia del usuario deficiente.
Netzwelt usa un modelo en el que el contenido es siempre gratuito, pero los suscriptores no verán anuncios. Investigaron diferentes formas de consultar y almacenar derechos para reducir las latencias y los cambios de diseño.
Una consulta inicial de derechos siempre causaba latencias y, por lo tanto, si la consulta de derechos tarda demasiado, el sitio mostrará el último estado almacenado en caché. Para los suscriptores nuevos, esto significa un pequeño riesgo de que un usuario que paga vea los anuncios una vez. Es posible que los usuarios que finalizan una suscripción vean una carga sin anuncios antes de que se actualicen los derechos almacenados de forma local. Una vez que se conocen los derechos, se almacenan de forma local con la API de LocalStorage para evitar latencias adicionales y cambios de diseño durante la navegación futura.
Resultados de la optimización
Los resultados de las optimizaciones de Netzwelt hablan por sí mismos. Su puntuación de PageSpeed Insights no tiene comparación en editores de noticias de todo el mundo:
Las optimizaciones mejoraron la experiencia de página, pero se realizaron teniendo en cuenta la empresa, la experiencia del anuncio mejorada, la visibilidad de los anuncios y los ingresos. Después de reiniciar la página optimizada, la plataforma observó aumentos de CPM del 20 al 30%, con una visibilidad del anuncio superior al 75%. Sin embargo, Netzwelt supone que el aumento general de los ingresos es aún mayor. El tráfico aumentó desde el relanzamiento, posiblemente debido a una mayor participación de los usuarios y menores porcentajes de rebote debido a una UX mejorada. Son difíciles de cuantificar y establecer en relación causal con el relanzamiento, ya que el tráfico fluctúa de forma natural. También hay efectos de la pandemia global. Estos efectos indirectos son una de las razones por las que Netzwelt siempre analiza todas las cifras cuando revisa su sitio, no solo el CPM, lo que puede ser engañoso. Las Métricas web esenciales y las métricas de UX, combinadas con todas las métricas relacionadas con los anuncios, proporcionan un panorama real.
Una mirada al futuro
Netzwelt cree que, en un futuro sin cookies de terceros, la segmentación contextual a través del contenido, combinada con una buena UX y una buena experiencia de página (incluida la visibilidad del anuncio), es la clave del éxito como editor de noticias.
Por lo tanto, Netzwelt no se detiene en las Métricas web esenciales, sino que implementa muchas funciones web modernas, como las apps web progresivas (AWP), el contenido sin conexión, el modo oscuro, la API de Web Share y Trusted Web Activities (TWA) con la nueva API de Digital Goods.