El sitio web relanzado también tiene una visibilidad de anuncios superior al 75%, una reducción del 50% en los porcentajes 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 nuevas métricas para lograr una excelente experiencia de página y mejorar la monetización basada en la publicidad. Se embarcaron en un proceso para relanzar su sitio web y aplicar prácticas recomendadas de rendimiento comunes mientras optimizaban las etiquetas de anuncios y las posiciones en paralelo. Comprometerse con una UX excelente y páginas rápidas demostró ser una forma de optimizar la participación y los ingresos publicitarios de la mano, con un aumento del 27% en las vistas de página, una visibilidad de anuncios superior al 75% y una mejora del 18% en los ingresos publicitarios.
27%
Aumento en las vistas de página
18%
Aumento de los ingresos publicitarios
75%
Visibilidad de los anuncios
El desafío
Al igual que muchos otros editores de noticias, Netzwelt tuvo dificultades para encontrar el equilibrio adecuado entre la optimización de la experiencia del usuario y la velocidad de la página y, al mismo tiempo, mantener altos ingresos publicitarios. Los principales desafíos que encontraron fueron los siguientes:
- Cambio de diseño acumulado (CLS) alto debido a los cambios de diseño activados por los anuncios, especialmente de los espacios de varios tamaños y los banners superiores.
- El procesamiento de imagen con contenido más grande (LCP) llega tarde porque los anuncios son la pintura más grande o porque toman ancho de banda de la carga de la imagen hero.
- 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 de los diálogos de consentimiento controlados por proveedores externos, que también se agregaron a los cambios de diseño y podrían detectarse como pinturas más grandes tardías.
Cómo optimizar un sitio web de noticias para las Métricas web esenciales
Cuando Netzwelt comenzó a trabajar en las métricas web esenciales, rápidamente notaron que optimizarlas no tiene por qué afectar negativamente a los anuncios, sino que puede usarse como una oportunidad para mejorar la visibilidad de los anuncios. Por lo tanto, el equipo de Netzwelt optimizó las Métricas web esenciales para aumentar la visibilidad de los anuncios por encima del 75% y atraer publicidad de mayor valor (el promedio global de los anuncios gráficos es inferior al 50%).
Cómo optimizar la métrica CLS
Los anuncios suelen cargarse tarde (a veces de forma consciente a través de la carga diferida) y, a menudo, su tamaño real no se conoce de antemano debido a las posiciones de anuncios fluidas y de varios tamaños.
El problema se puede dividir en dos: anuncios en la mitad superior de la página y en la mitad inferior.
Los anuncios en la mitad superior de la página pueden causar saltos masivos del diseño debido a que se cargan tarde con tamaños desconocidos. Bloquear el espacio más grande que podrían necesitar puede generar una UX deficiente, mientras que pedirles a los anunciantes tamaños fijos puede reducir los ingresos publicitarios. Para resolver este problema, Netzwelt hizo que el anuncio superior fuera fijo y quitó algunos de los tamaños de banner más grandes permitidos. El anuncio superpuesto evita que se activen saltos de diseño para anuncios de diferentes tamaños. Si bien la reducción de los tamaños aptos afecta las ventas de anuncios, la mejor visibilidad compensa esto con facilidad.
Los datos históricos y las pruebas A/B ayudaron a Netzwelt a encontrar el tamaño y el posicionamiento correctos para diferentes dispositivos y tamaños de pantalla, y las reglas de medios de CSS que se usan para reservar espacio.
Los anuncios en la mitad inferior de la página ofrecen espacio para mejoras significativas:
- Un banner que no se ve, pero que se carga, genera una visibilidad del anuncio deficiente y empeora la experiencia de la página.
- Un banner que se carga en el momento en que un usuario se desplaza sobre él puede generar saltos de contenido adicionales.
Para mantener una buena experiencia de página y una alta visibilidad de los anuncios, Netzwelt implementó la carga diferida y reservó 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 reservaron 250 px de altura. Esto eliminó los cambios de diseño para los tamaños más pequeños y los redujo de forma masiva para los banners más grandes. Este enfoque no es óptimo, pero es un comienzo y un buen compromiso.
Para realizar más optimizaciones, Netzwelt usó Intersection Observer y la API de Network Information para controlar las posiciones de los 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, y los anuncios pueden cambiar de varios a tamaños fijos. El objetivo del algoritmo siempre es 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 dispositivo y tipo de red derivado de IP. Esta estrategia de carga adaptativa reduce especialmente el CLS para los usuarios con conexiones a Internet lentas.
Optimiza el FID
El retraso de la primera entrada puede parecer un problema para los editores de noticias, ya que los anuncios suelen incluir muchas bibliotecas de JavaScript adicionales. Y parece que hay un impacto negativo cuando se observan los datos de laboratorio, como Lighthouse. Sin embargo, si observamos los datos de campo del Web Almanac 2020, muchos sitios web tienen una respuesta lo suficientemente rápida. Esto se debe, en parte, a que el JavaScript de la publicidad se carga tarde (después de la primera entrada), se almacena en caché de forma correcta (por ejemplo, se obtiene el tratamiento de la caché de código v8) o los proveedores de anuncios lo optimizan bien. Los servicios de seguimiento de visibilidad de los proveedores se aseguran de evitar tareas largas, de modo que, incluso cuando la suma del tiempo de ejecución es larga, el tiempo de bloqueo total (TBT) y el FID no se ven afectados. Si bien el FID no fue un gran problema para Netzwelt, aún había algunas optimizaciones que se podían realizar:
- Reducir las secuencias de comandos y los proveedores de anuncios, y concentrarse en una sola pila si es posible
- Carga todas las secuencias de comandos con aplazamiento o asíncrono.
- Usar Webpack o tecnologías similares para el aligeramiento de árboles y el desempaquetado
- Usar reglas de CSS simples similares a BEM
- Evita las tareas de larga duración y usa el patrón inactivo hasta que sea urgente.
- Trabajar con RequestAnimationFrame siempre que se vea afectado el diseño
Cómo optimizar el LCP
Los anuncios pueden influir en la métrica Procesamiento de imagen con contenido más grande de dos maneras: de forma explícita, cuando reconocen un anuncio como la pintura más grande, e indirectamente, cuando congestionan el ancho de banda de la red o afectan la ruta crítica para que la pintura 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 optimizaba para el CLS. Esto tuvo el beneficio adicional de que los anuncios no se convirtieron en el elemento más grande.
Netzwelt sigue una política estricta para priorizar el contenido por sobre los anuncios. Netzwelt priorizó las imágenes hero y las fuentes que se usan en la mitad superior de la página y optimizó la ruta crítica para que tenga prioridad sobre los anuncios y las secuencias de comandos publicitarias. Esta priorización ayudó a que el LCP no se viera afectado por los anuncios.
Además de estas optimizaciones, Netzwelt siguió otras prácticas recomendadas:
- Separó el CSS para la ruta de renderización crítica y lo colocó en el encabezado.
- Se precargaron las fuentes, las secuencias de comandos y las imágenes más importantes.
- Se evitaron las imágenes de carga diferida en la mitad superior de la página.
- Se usó
font-display="swap".
Consentimiento según el RGPD y Métricas web esenciales
Los diálogos de consentimiento suelen tener un impacto negativo en las Métricas web esenciales. Al igual que con los anuncios, existen dos formas en que un diálogo de consentimiento puede influir en las métricas web esenciales:
- De forma explícita, si se detecta como la pintura más grande o causa cambios de diseño.
- De forma implícita, robando ancho de banda de la pintura más grande real, bloqueando la ruta de acceso crítica a la pintura más grande o retrasando 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 trampas más comunes:
- Las secuencias de comandos de consentimiento se cargan de forma asíncrona para no bloquear recursos críticos.
- El consentimiento tiene el formato para que los elementos grandes no sean aptos como el elemento más grande dentro del LCP.
- La superposición de consentimiento usa
position: fixedpara evitar cambios. - Si bien los anuncios se muestran solo después de que se otorga el consentimiento, se conserva el espacio en blanco adecuado de antemano para evitar cambios de diseño cuando se cargan los anuncios.
- Asegúrate de que la visualización y el posicionamiento del diálogo de consentimiento no activen cambios de diseño. Se encontró y corrigió un problema con la opción de bloqueo de desplazamiento del proveedor de servicios, que inhabilitaba el desplazamiento mientras se mostraba el consentimiento moviendo el contenido principal del artículo durante el desplazamiento, lo que provocaba cambios de diseño.
Después de este trabajo, aún había grandes discrepancias entre los CLS de campo y de laboratorio. Si bien el CLS del lab estaba cerca de cero, los valores de campo estaban muy por encima de los umbrales. Después de la investigación, se descubrió que el culpable era el cambio de diseño dentro del iframe de consentimiento, que actualmente solo se captura 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 cambiando 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 ocultar los anuncios puede provocar cambios de diseño. El sitio web debe verificar si los usuarios tienen derecho a ver el contenido y si se 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 siempre es gratuito, pero los suscriptores no verán anuncios. Investigó 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 los derechos demora 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 anuncios una vez. Es posible que los usuarios que acaban de finalizar 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í solos. Su puntuación de PageSpeed Insights no tiene rival entre los editores de noticias de todo el mundo:
Las optimizaciones mejoraron la experiencia de la página, pero se realizaron teniendo en cuenta la empresa y mejoraron la experiencia del anuncio, la visibilidad del anuncio y los ingresos. Después de reiniciar la página optimizada, Netzwelt observó aumentos de CPM de entre el 20 y el 30%, con una visibilidad de anuncios 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, probablemente debido a una mayor participación de los usuarios y tasas de rebote más bajas debido a una UX mejorada. Estos efectos son difíciles de cuantificar y establecer en relación causal con el relanzamiento, ya que el tráfico fluctúa de forma natural y también hay efectos de la pandemia global. Estos efectos indirectos son uno de los motivos por los que Netzwelt siempre analiza todas las cifras cuando revisa su sitio, no solo el CPM, que puede ser engañoso. Las métricas de UX y las Métricas web esenciales, en combinación con todas las métricas relacionadas con los anuncios, proporcionan el panorama real.
Mirando hacia el 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 experiencia de página (incluida la visibilidad de los anuncios), es la clave del éxito como publicador de noticias.
Por lo tanto, Netzwelt no se detiene con las métricas web esenciales, sino que va más allá con la implementación de muchas funciones web modernas, como las apps web progresivas (AWP), el contenido sin conexión, el modo oscuro, la API de Web Share y las actividades web de confianza (TWA) con la nueva API de Digital Goods.