WordPress es el sistema de gestión de contenido (CMS) más popular del mundo gracias a su facilidad de uso y flexibilidad. Sus amplias opciones de personalización permiten a los editores crear sitios web que conecten profundamente con su público.
Y, a pesar de las potentes funciones del CMS, aún es posible crear sitios web con un aspecto excelente, pero con dificultades para aumentar la audiencia. Si bien una auditoría de contenido es recomendable, los editores deberían considerar primero una auditoría técnica para asegurarse de que no haya ningún problema en el fondo de su sitio web que esté obstaculizando su alcance.
Entre las métricas de rendimiento más importantes que deberían medir se encuentran los Google Core Web Vitals (CWV).
Estas métricas, que Google convirtió en señales de clasificación poco después de su introducción en 2020 , juegan un papel clave en la medición de la experiencia del usuario (UX) de una página web.
Las CWV abarcan tres métricas distintas pero conectadas:
- Pintura con contenido más grande (LCP)
- Retardo de primera entrada (FID)
- Cambio de diseño acumulativo (CLS)
Estas señales miden la velocidad de carga percibida, la interactividad y la estabilidad visual de una página web, respectivamente.
Analicemos más de cerca estos CWV para comprender por qué son tan importantes, cómo medirlos con precisión y luego evaluar los pasos prácticos que podemos tomar para mejorar sus puntajes.
¿Qué son las métricas Core Web Vitals?
Los tres Core Web Vitals (CWV) de Google evalúan la calidad de la experiencia del usuario (UX) de un sitio web y brindan información sobre el rendimiento de las páginas web en términos de velocidad de carga, interactividad y estabilidad visual.
- Largest Contentful Paint (LCP): Mide la velocidad de carga del sitio web y se refiere específicamente al punto del proceso de carga en el que probablemente se haya cargado el contenido principal.
Por ejemplo, una entrada de blog sobre un nuevo dispositivo tecnológico de moda. Si la imagen principal (por ejemplo, una foto del dispositivo) y el texto introductorio se cargan rápidamente (el límite recomendado por Google para LCP es de 2,5 segundos), es más probable que los visitantes se queden, lean e interactúen con el contenido.
Por el contrario, los tiempos de carga lentos pueden provocar que los visitantes abandonen la página, lo que puede resultar en una disminución del tráfico.
- Retardo de Primera Entrada (FID): Representa una instantánea de la capacidad de respuesta de una página web tras la primera interacción del usuario, como hacer clic en un enlace o pulsar un botón. Esto se realiza midiendo el tiempo transcurrido entre esta acción y el momento en que el navegador puede empezar a procesar los controladores de eventos en respuesta.
Consideremos un botón "Suscribirse ahora". Si un visitante hace clic en este botón y experimenta un retraso antes de que el sitio responda (un tiempo superior a 100 milisegundos se considera un resultado deficiente), el visitante podría pensar que el sitio no responde, lo que resultaría en una mala experiencia de usuario y, potencialmente, en la pérdida de una suscripción.
Google se prepara para introducir una nueva métrica llamada Interacción con el Siguiente Pintado (INP) en marzo de 2024, que sustituirá al FID como valor de conversión de la página (CWV).
- Cambio de Diseño Acumulado (CLS): Cuantifica la estabilidad visual o la cantidad de cambios inesperados en el diseño del contenido visible de una página web.
Si un sitio web de noticias tiene texto, imágenes o anuncios que cambian repentinamente al cargar la página, los visitantes podrían perderse o hacer clic accidentalmente en un enlace o botón no deseado. Esto resulta frustrante y puede disuadirlos de volver al sitio.
Fuente: Web.dev - Interacción con la siguiente pintura (INP): Evalúa la capacidad de respuesta general de una página a las interacciones del usuario. Monitorea la latencia de todas las interacciones del ratón y el teclado durante la visita del usuario a una página web. La interacción más larga observada (sin considerar los valores atípicos) constituye el valor final de INP.
Lograr una puntuación INP ideal puede ser un desafío debido a la amplia variabilidad en la capacidad de los dispositivos. Sin embargo, sigue siendo razonable que los editores aspiren a una puntuación INP en el percentil 75 de las cargas de página, segmentada en dispositivos móviles y de escritorio.
Un sitio web con un INP igual o inferior a 200 milisegundos se considera con una buena capacidad de respuesta. Si el INP se encuentra entre 200 y 500 milisegundos, la capacidad de respuesta del sitio necesita mejoras. Por último, si el INP es superior a 500 milisegundos, su capacidad de respuesta se considera deficiente.
Fuente: Web.dev
¿Por qué es importante la puntuación Core Web Vitals?
Los usuarios exigen velocidades de carga rápidas, interactividad fluida y un entorno visualmente estable, y una evaluación de Core Web Vitals es fundamental para ayudar a los editores a comprender cómo se desempeñan sus sitios web en este frente.
Google descubrió que la probabilidad de rebote aumentó un 32 % cuando los tiempos de carga de página aumentaron de 1 a 3 segundos. Mientras tanto, los sitios de noticias que aprobaron la prueba CWV experimentaron una tasa de abandono un 22 % menor que los que no la superaron.
1. Influir en los resultados de búsqueda
Los CWV sirven como criterio para que Google mida el rendimiento de un sitio web. Le proporcionan información sobre el rendimiento de un sitio web para los usuarios, lo que influye directamente en su posición en los resultados de búsqueda.
En términos simples, una mejor puntuación CWV puede ayudar a que un sitio web de WordPress aparezca más alto en los rankings de búsqueda de Google.
2. Aumentar el tráfico
Los sitios con CWV optimizados pueden experimentar un aumento de tráfico. Por ejemplo, el popular sitio de orientación profesional LearnHowToBecome.org redujo su tiempo de carga promedio de 7 a 2,9 segundos y vio su tráfico mensual aumentar de 500 000 a 750 000.
3. Aumentar los ingresos
Es menos probable que un usuario lea un artículo si experimenta un tiempo de carga prolongado (LCP), una respuesta tardía a su interacción (FID) o un diseño inestable (CLS). Los sitios web que destacan en las tres métricas no solo captan la atención del usuario, sino que también pueden guiarlo por el embudo de conversión, lo que, en última instancia, genera mayores ingresos para la empresa.
En esencia, las métricas de CWV son más que simples números. Ofrecen información sobre el rendimiento de un sitio desde la perspectiva del usuario, lo que permite a la marca mejorar las áreas más importantes para sus visitantes.
Cómo comprobar las puntuaciones de Core Web Vitals de un sitio de WordPress
Comprender cómo comprobar las puntuaciones de CWV es el primer paso para mejorar el rendimiento de un sitio web. Hay dos maneras de medir estas puntuaciones: internamente con las herramientas propias de Google o con la ayuda de un especialista en WordPress con experiencia en la optimización de métricas de rendimiento.
Para aquellos que optaron por la ruta interna, es importante comprender que medir los CWV requiere utilizar una combinación de datos de campo y datos de laboratorio.
Los datos de campo son datos reales de la experiencia del usuario, recopilados en entornos reales. Este tipo de datos permite comprender mejor cómo interactúan los usuarios con un sitio web en diversos dispositivos, conexiones y otras condiciones del mundo real.
Por ejemplo, si los usuarios acceden principalmente a un sitio de WordPress en dispositivos móviles en redes 3G, los datos de campo pueden revelar problemas de rendimiento que podrían no aparecer en un entorno de laboratorio controlado.
Por otro lado, los datos de laboratorio se generan en un entorno controlado y se utilizan para depurar problemas de rendimiento. No capturan todo el espectro de experiencias de usuario reales, pero proporcionan resultados reproducibles para depurar y optimizar el rendimiento de un sitio web.
El uso de una herramienta como Lighthouse en un entorno de desarrollo puede simular una red lenta para identificar cuellos de botella en el rendimiento.
Todas las herramientas para desarrolladores más populares de Google, desde Google Search Console (GSC) hasta Google Analytics (GA), pueden medir las puntuaciones CWV.
Fuente: Web.dev
Sin embargo, hoy vamos a analizar la PageSpeed Insights por la sencilla razón de que es una de las herramientas más sencillas y completas con las que comenzar.
Cómo descubrir y mejorar FID y TBT con PageSpeed Insights
Hasta este punto hemos hablado sobre el Retraso de Primera Entrada (FID) como un medio para medir la capacidad de respuesta de un sitio, pero en esta próxima sección analizaremos tanto el FID como el Tiempo Total de Bloqueo (TBT).
Ambas son medidas de interacciones del usuario y medirlas y optimizarlas puede tener resultados positivos para la experiencia de usuario de un sitio.
1. ¿Qué es el TBT y en qué se diferencia del FID?
El TBT indica el tiempo durante el cual un sitio web está demasiado ocupado para reaccionar a las interacciones del usuario, como los clics en los botones. El TBT mide el tiempo total que una página web está "bloqueada", lo que equivale a decir: "Espera, estoy ocupado" mientras procesa otras tareas.
TBT es una métrica de laboratorio utilizada para la evaluación del rendimiento durante la fase de desarrollo, mientras que FID es una métrica de campo que proporciona información sobre las experiencias reales de los usuarios.
En un escenario donde un usuario hace clic en un botón en una página web, FID mide el retraso que se produce entre la acción de ese usuario y la respuesta del sitio web.
Estas dos métricas están interconectadas: si un editor logra optimizar TBT durante las pruebas, es probable que observe un impacto positivo en los puntajes FID en circunstancias del mundo real.
2. Cómo medir FID y TBT con PageSpeed Insights
Para medir estas métricas con PageSpeed Insights, siga estos pasos:
- Vaya a la herramienta PageSpeed Insights
- Analizar la página web deseada
- Desplácese para encontrar los puntajes FID y TBT del sitio
3. Cómo mejorar el FID y el TBT de un sitio de WordPress
Mejorar la FID y la TBT implica optimizar la capacidad de respuesta y la interactividad del sitio. Aquí tienes algunos consejos:
- Comprimir y optimizar el código CSS y JavaScript: Esto ayuda a reducir el tamaño de los archivos y mejora la capacidad de respuesta del sitio. Muchas herramientas, como WPRocket, ofrecen una pestaña de optimización de archivos que permite comprimir el código, lo que podría resultar en una mejora significativa en las puntuaciones FID y TBT.
- Eliminar tareas largas: Las tareas largas son aquellas que bloquean el hilo principal durante 50 milisegundos o más. Dividir estas tareas largas en tareas asincrónicas más pequeñas puede liberar espacio en el hilo principal y mejorar tanto el FID como el TBT.
- Optimizar la ejecución de JavaScript: El análisis, la compilación y la ejecución de JavaScript pueden contribuir significativamente a un FID y un TBT elevados. Aplazar el JavaScript no utilizado, cargar asincrónicamente los archivos grandes necesarios, minimizar los polyfills no utilizados y garantizar una ejecución eficiente de JavaScript puede reducir el FID y el TBT.
- Aprovecha la configuración de rendimiento de tu tema de WordPress: Muchos temas de WordPress incluyen configuraciones de rendimiento integradas. Aprovecha al máximo estas opciones para optimizar tu sitio.
- Precarga y poscarga de activos: técnicas como la carga diferida de imágenes, el aplazamiento de CSS no crítico, la precarga de activos críticos y la precarga de recursos de terceros pueden mejorar el rendimiento de TBT y, posteriormente, también mejorar FID.
Consejo profesional: Al optimizar, concéntrese en la experiencia de usuario (UX) general en lugar de en las métricas individuales. Este enfoque holístico puede generar mejores resultados para mejorar el rendimiento del sitio web.
Mejorar las puntuaciones FID es un proceso complejo, ya que involucra el código del sitio web. Por lo tanto, lo primero que deben hacer los editores es limitar la ejecución intensiva de JavaScript y eliminar archivos JS innecesarios, permitiendo que el navegador responda rápidamente a las interacciones del usuario.
Al abordar los problemas clave que afectan la interactividad de un sitio de WordPress, los editores pueden mejorar eficazmente tanto el FID como el TBT, mejorando la experiencia de usuario y el rendimiento generales.
Cómo descubrir y mejorar el LCP con PageSpeed Insights
Los puntajes LCP bajos significan que el visitante tiene que esperar más tiempo para que aparezca el contenido, lo que generalmente genera tasas de rebote más altas.
1. ¿Qué son los elementos LCP?
LCP evalúa el tiempo que tarda en cargarse el contenido principal de una página web: cuanto más rápido aparezca este contenido en una pantalla, mejor será la UX.
Los principales contribuyentes a la puntuación LCP son predominantemente elementos de gran tamaño, como elementos de imagen, elementos de vídeo o elementos con imágenes de fondo cargadas a través de funciones URL.
Además, los elementos a nivel de bloque (como encabezados, subtítulos y tablas) y los elementos basados en bloques (como el texto) también desempeñan un papel fundamental en la configuración del LCP.
2. Cómo medir el LCP con PageSpeed Insights
Para medir la puntuación LCP, siga estos pasos:
- Vaya a PageSpeed Insights
- Analizar la página web deseada
- Desplácese hasta la sección “Diagnosticar problemas de rendimiento”
- Establezca “Mostrar auditorías relevantes para” en LCP
- Los usuarios ahora pueden ver las oportunidades y diagnósticos relevantes.
Los editores también pueden identificar el elemento LCP en el informe PageSpeed Insights ubicando la recomendación del elemento Largest Contentful Paint en la sección Diagnóstico y ampliándola para obtener más detalles.
3. Cómo mejorar el LCP de un sitio de WordPress
Mejorar el LCP implica varios pasos, cada uno de los cuales contribuye a una experiencia web más rápida y optimizada. Aquí tienes algunas estrategias clave:
- Optimizar el elemento LCP: Este paso depende de la naturaleza del elemento LCP. Por ejemplo, un elemento LCP que es una imagen se puede comprimir (sin comprometer la calidad). Otras soluciones incluyen la precarga de imágenes de la mitad superior de la página y de marcador de posición, mostrar imágenes adaptables mediante srcset según el tamaño de la pantalla del usuario y asegurarse de no cargar imágenes de la mitad superior de la página de forma diferida.
- Mejorar los tiempos de respuesta del servidor: LCP mide el tiempo desde que un usuario llega a una página hasta que su navegador recibe una respuesta del servidor. Invertir en un plan de alojamiento web de mayor calidad, implementar un mecanismo de caché adecuado tanto a nivel de servidor como de navegador y migrar a una plataforma CMS robusta como WordPress puede ayudar a reducir el tiempo de respuesta del servidor.
- Reducir los elementos que bloquean la visualización: Los elementos que bloquean la visualización, como HTML, fuentes y CSS, son archivos estáticos que el navegador procesa antes de cargar el contenido. Al reducir el número de fuentes que bloquean la visualización, los navegadores dedicarán menos tiempo a renderizar estos elementos, lo que acelera los tiempos de carga y mejora las puntuaciones LCP. Por ejemplo, los editores pueden usar una fuente sencilla para sus páginas web o precargar fuentes web modulares.
- Eliminar plugins no utilizados: Los sitios de WordPress pueden usar plugins para gestionar muchos de sus aspectos técnicos. Sin embargo, es importante conservar únicamente los plugins y sus funciones que contribuyen directamente a la funcionalidad del sitio, eliminando los que no se utilizan. Esto puede despejar el sitio y mejorar la puntuación LCP.
Consejo profesional: El almacenamiento en caché es un proceso potente que puede mejorar significativamente la puntuación LCP. Implemente una solución de almacenamiento en caché que guarde una copia estática de las páginas web en los dispositivos de los visitantes, eliminando así la necesidad de descargar los mismos datos cada vez que visitan el sitio.
Es importante comprender que el LCP es, con diferencia, la métrica de CWV más difícil de mejorar. Esto se debe a que el LCP depende del TTFB (tiempo hasta el primer byte), que a su vez determina la velocidad de respuesta del servidor. Dependiendo del framework utilizado, puede resultar difícil reducir el tiempo de respuesta del servidor.
Los editores deben tener en cuenta que el margen de mejora puede variar según la infraestructura con la que trabajen.
Al centrarse en optimizar los elementos de contenido de la página principal, mejorar los tiempos de respuesta del servidor, reducir los tiempos de bloqueo de JavaScript y CSS y ser prudentes con el uso de complementos, los editores pueden mejorar significativamente sus puntuaciones LCP.
Cómo descubrir y mejorar CLS con PageSpeed Insights
El Cambio de Diseño Cumulativo (CLS) se centra en la estabilidad visual, midiendo cualquier cambio inesperado en el contenido visual de una página web durante la carga. Las páginas web visualmente inestables pueden deteriorar su experiencia de usuario (UX), lo que contribuye a las tasas de rebote.
1. ¿Qué son los elementos CLS?
CLS mide la estabilidad visual, por lo que los elementos que contribuyen a ella son aquellos que podrían cambiar de posición inesperadamente durante la carga de la página. Estos pueden ser imágenes sin dimensiones específicas, anuncios, incrustaciones e iframes sin dimensiones fijas.
Básicamente, cualquier elemento que pueda moverse mientras se carga la página puede dañar la puntuación CLS.
2. Cómo medir el CLS con PageSpeed Insights
Utilice PageSpeed Insights para identificar y medir el CLS de una página web con estos pasos:
- Vaya a PageSpeed Insights
- Analizar la página web deseada
- Desplácese hasta la sección “Diagnosticar problemas de rendimiento”
- Establezca “Mostrar auditorías relevantes para” en CLS
Este enfoque nos permite concentrarnos en los elementos responsables de los cambios de diseño, proporcionando un punto de partida para la mejora.
3. Cómo mejorar el CLS de un sitio de WordPress
Mejorar el CLS de un sitio de WordPress implica pasos estratégicos que pueden mejorar significativamente la estabilidad visual de una página:
- Editar la disposición de los elementos: Revisa y ajusta la disposición de los elementos para asegurar que no se desplacen durante la carga de la página. Este paso implica configurar atributos específicos de ancho y alto para imágenes y vídeos, y reservar espacio estáticamente para anuncios de carga diferida o iframes mediante un marcador de posición.
- Use CSS crítico o elimine el CSS no utilizado: El CSS no utilizado puede contribuir a cambios en el diseño. Considere implementar CSS crítico que contenga solo los estilos usados en la parte superior de la página o elimine el código CSS redundante para evitar cambios innecesarios. La inserción de estilos más pequeños y la precarga de estilos importantes también ayudarán a mejorar CLS.
- Evite los plugins de controles deslizantes: Debido a su dinamismo, los controles deslizantes pueden provocar cambios en el diseño. Si es posible, evítelos.
- Aplicar el tamaño correcto de imágenes y divs: Un tamaño preciso y el uso de imágenes adaptables con la misma relación de aspecto pueden evitar que los elementos se desplacen al cargar la página. Especifique siempre el tamaño de estos elementos en la CDN (red de distribución de contenido) de imágenes.
- Mover CSS del editor de temas al estilo del tema secundario style.css: transferir CSS a un tema secundario puede ayudar a reducir los cambios de diseño al garantizar que los estilos se carguen correctamente.
- Utilice temas y complementos que utilicen animaciones de transformación: estas herramientas tienen menos impacto en los cambios de diseño en comparación con otros tipos de animaciones.
Al realizar estos ajustes, los propietarios de sitios de WordPress pueden reducir considerablemente la puntuación CLS de su página, lo que genera una experiencia de usuario más estable y agradable.
Consejo profesional: Implementa la carga diferida para imágenes fuera de pantalla. Esta estrategia permite que las imágenes se carguen solo cuando están a punto de entrar en la ventana gráfica, evitando así cambios de diseño causados por imágenes que se cargan tarde.
Tenga en cuenta que el CLS es una métrica crucial centrada en el usuario que mide el grado de cambio del contenido de un sitio a medida que se carga la página. Cuanto menor sea la puntuación CLS, mejor será la experiencia del usuario.
En definitiva, mejorar las puntuaciones CLS requiere un enfoque multifacético. Las comprobaciones periódicas con herramientas como PageSpeed Insights, prácticas de diseño consistentes y el uso diligente de temas y plugins pueden contribuir a una puntuación CLS más baja y a un sitio web más estable y fácil de usar.
Terminando
Los editores que miden Core Web Vitals (CWV) estarán mejor preparados para optimizar la experiencia del usuario en sus sitios.
Optimizar las CWV no solo mejora significativamente la experiencia del lector, sino que también contribuye al SEO. Las páginas que cargan rápidamente, son visualmente estables y responden con rapidez a las entradas del usuario no solo son atractivas para los usuarios, sino también para los algoritmos de los motores de búsqueda.
Además de aprender los conceptos básicos de herramientas como PageSpeed Insights, los editores también deben monitorear de cerca las tendencias de publicación digital , las actualizaciones de los algoritmos de los motores de búsqueda y los conocimientos de los expertos para brindar constantemente una experiencia de lectura de primer nivel.
