Como es conocido, la plataforma de Google realizo un anuncio hace poco en el 2021 sobre un cambio en las métricas que son tomadas en cuenta de los sitios web, en este caso hablamos de los “Core Web Vitals” en Google. Estos serían un nuevo factor de clasificación enfocado en incentivar que las páginas web den una mejor experiencia al usuario a nivel de rendimiento, en concreto, en este artículo hablaremos de cómo optimizar Core Web Vital en WordPress.
Este tipo de factores siempre son buenas noticias para los propietarios de sitios web que buscan mejorar constantemente a nivel de SEO, así mismo como aumentar su clasificación dentro de Google. Al mejorar la puntuación de los Core Web Vital en WordPress conseguiremos una mejora tanto a nivel de SEO como de experiencia de usuario.
Tabla de contenidos
Qué son los Core Web Vital
Los datos de Core Web Vitals son aquellos que muestran el rendimiento que tiene una página web agrupando varios aspectos para poder tomar en cuenta esta métrica (CLS, FID y LCP) de los cuales hablaremos posteriormente, estos con el fin de poder agrupar las páginas por su estado de ranking entre una pobre, una que necesita mejora y una muy buena. Al basarse en estas tres métricas mencionadas previamente se hace un aproximado tomando en cuenta estas tres estadísticas, sin embargo, es tomada por Google la data con peor desempeñó, por ejemplo, si tenemos un LCP muy bueno, pero tenemos un CLS deficiente, no habremos pasado la pruebas de Core Web Vital en WordPress.
Si una URL no recibe suficientes visitas, Google no tendrá datos para realizar este análisis, ya que los datos para calcular los Core Web Vital están sacados del navegaodr de los usuarios que visitan una URL concreta, por lo que él informe se omite para dicha URL, solo las URL que han sido previamente indexadas y que reciben cierto volumen de tráfico en los últimos 28 días van a poder tener esta información de Core Web Vitals, los datos están ligados a la URL de WordPress real del sitio, no a las URL canónicas como estamos acostumbrados a ver en los informes de este estilo.
Por qué optimizar Core Web Vital en WordPress
Es bueno realizar estas optimizaciones desde que Google actualizo sus políticas el 2021, ya que miden el rendimiento de una página web desde la perspectiva de un visitante, y podría mejorar las clasificaciones en el buscador de Google. También ayuda a asegurar que el sitio este protegido con seguridad en WordPress, si tenemos todos los procesos que son tomados en cuenta, organizados para ser optimizados a su vez también estamos aumentando la seguridad del sitio, ya que la mayoría de los pasos son con ajustes hechos a nivel de plugins y ajustes de servidor en los que hay que mantener actualizado el sitio.
Esto ayuda enormemente a la seguridad del sitio, Google toma muy en cuenta la salud del sitio web en unión de lo que serían los factores de carga, estabilidad del sitio, interacción que puedan llegar a tener con los usuarios y muy importante compatibilidad con los dispositivos móviles. Por lo que el trabajar directamente con estos elementos no solo nos beneficiara a nivel de posicionamiento en Google, sino que también nos ayudara a dar una mejor página a nuestros usuarios.
Uno de los puntos más importantes a la hora de optimizar los Core Web Vitals en WordPress es el uso de una buena plantilla para WordPress optimizada como puede ser Generatepress, Astra, o WPOcean, y si quieres usar un page builder para WordPress una buena solución es WordPress Gutenberg y Divi.
Cómo optimizar Core Web Vital en WordPress
En este caso si nuestra web no cumple con las recomendaciones que hace Google sobre las Core Web Vitals, tenemos diferentes opciones para poder optimizar WordPress de forma correcta.
La estrategia para hacerlo dependerá de cada aspecto que nos indique Google que hay que mejorar, igualmente la mayoría de las optimizaciones se implementan de una forma donde el rendimiento del propio WordPress se vea beneficiado. Es por esto que a continuación, vamos a ver cómo optimizar según las clasificaciones de CWV en WordPress, mejorando el LCP, FID, y CLS.
La herramienta que utilizaremos para medir los factores de LCP, FID y CLS es la de Google pagespeed insights, esta es una herramienta que podemos utilizar de manera gratuita para poder verificar y analizar el rendimiento del sitio web mediante la auditoria de la URL que indiquemos en el mismo, y así poder identificar las mejoras que le podemos hacer a nuestro sitio.
Optimizar LCP
Como primer punto hablaremos sobre el LCP del Core Web Vitals, las siglas nos dan el significado de Larguest ContentFull Paint una traducción podría llegar a ser despliegue del contenido más extenso, primeramente hay que conocer que los análisis se utilizan datos que pueden ser generados por computadora o bien en un ambiente real, pero ambos generan un informe detallado el cual nos puede ser de utilidad para resolver ciertos problemas, este es el caso con el análisis que se realiza con la web de Google.
Una vez tenemos esto establecido podemos pasar a comprender y optimizar lo que sería el LCP y los elementos que conforman el mismo.
- Imágenes de cualquier tipo incluidas las SVG
- Videos insertados en nuestro sitio
- Elementos que son cargados mediante una URL
- Textos dentro de los elementos a mostrar en el sitio
Lo que indicaría o se consideraría como contenido más extenso va a depender del tipo de sitio que tengamos operativo, en el caso de las imágenes que son tomadas en cuenta para este cálculo se destaca que se toma en consideración el contenido que es visible así como su tamaño, y no toma en cuenta ningún elemento externo o fuera de los márgenes, por lo que se entiende que el cálculo del tamaño o peso que tiene este sobre el análisis no incluye los márgenes o borde que tengan estas mismas imágenes, incluso las webp WordPress.
Al momento de tratar con una LCP baja es posible que se pueda experimentar una experiencia de usuario deficiente, pero, sin embargo, tenemos muchas causas posibles para un rendimiento bajo de un sitio web con WordPress, por lo que esto resulta ser el punto con mayor holgura al momento de modificaciones, editar plantilla WordPress y colecciones, por lo que vamos a ver algunos puntos importantes a tratar para mejorar en la mayoría de los casos el hecho de tener un LCP bajo o deficiente.
Utilizar una CDN: El CDN es una red de entrega de contenido, lo cual en otras palabras lo convierte en una herramienta para gestionar el tráfico que va a ingresar a nuestro sitio, el uso de estos CDN WordPress nos ayuda a que en caso de que nuestro sitio tenga un tráfico elevado no se pase directamente el tráfico como carga para nuestro hosting WordPress retrasando las métricas del sitio, sino, por el contrario, se toma en cuenta el tiempo de conexión entre el CDN y el sitio para hacer este análisis.
Es por esto que el uso de una CDN puede ayudarnos con un valor bajo en el LCP, ya que al equilibrar o gestionar la carga de la red, los visitantes no deben entrar en una lista de espera para poder ingresar a nuestro sitio en caso de que los visitantes sean numerosos. Este punto puede ayudarnos si la LCP nos indica que nuestro defecto esta ubicado en la conexión con el servidor web.
Asegurar el tamaño correcto de la imagen: Como comentamos previamente algunas imágenes pueden ser parte del despliegue del contenido más extenso dependiendo del tamaño que se tenga de estas mismas, por lo que el utilizar y mantener las imágenes que se utilizan optimizadas pueden ayudarnos a mantener una buena puntuación de LCP, la clave es comprender el tamaño imagenes en WordPress correcto según el dispositivo donde se vea la imagen, para saber qué imágenes podemos ver este mismo análisis directamente en la sección respectiva del análisis de Google pagespeed insight.
Implementar el almacenamiento en caché: Uno de los métodos más fáciles de implementar es el de implementar un sistema de caché para controlar los elementos temporales que se administran en el sitio, esto ayuda tanto para mejorar el puntaje LCD como para reducir el tiempo de carga de nuestro sitio, como hemos contado la mayoría de estos ajustes son algunos que hemos realizado previamente por lo que todo viene de la mano de un sitio web seguro y rápido. Con respecto a la caché tenemos dos tipos de sistemas de almacenamiento, uno es el orientado en gestionar la caché a nivel del servidor y el otro a nivel del explorador.
La caché a nivel del navegador es la que se gestiona a nivel de los usuarios una vez ingresan al sitio para que los mismos no tengan que cargar el sitio entero con cada ingreso que realicen, puede gestionarse mediante plugins de cache WordPress para la gestión de la caché.
En el lado contrario tenemos la caché a nivel del servidor, este es un sistema de caché que como su nombre lo indica trabaja con los archivos del mismo, tenemos a disposición super caché WordPress el cual nos ayuda a establecer esta caché a nivel del servidor y así mejorar la puntuación en base a este LCP.
Eliminar los lazy load o cargas diferidas: La carga diferida o lazy load en WordPress nos ayuda a que la presentación inicial de nuestro sitio se gestione de una forma más rápida, centrándose en una parte superior del sitio para no tener que cargar todo de golpe y forzar una carga más lenta que perjudicaría nuestro LCP. Esto es denominado carga asíncrona y trabaja por ejemplo.
Si nos encontramos en una entrada su contenido superior como sería imagen destacada en WordPress va a mostrarse inmediatamente en la carga inicial; sin embargo, los otros elementos como miniaturas e imágenes dentro de la entrada va a ser cargado a medida que bajamos en nuestro sitio o nos desplazamos por ella.
Esto en ocasiones es beneficioso, pero es posible que quieras desactivar el Lazy Load en WordPress por otro motivo.
Eliminar scripts que bloquean el renderizado: Algunos recursos que tenemos en nuestro sitio bloquean la carga de ciertos elementos, por lo que son ajustes que pueden hacer más lenta la carga del sitio, usualmente estas opciones vienen de la mano con otros aspectos y provocando una sensación de lentitud en la página cuando en realidad todo lo esta provocando esta función en específico.
Es por esto que el eliminar tanto CSS como Javascripts que bloquean el renderizado es una de las prioridades al momento de tratar de optimizar el punto relacionado con LCP, desde webempresa tenemos una guía sobre esto que puede ser de utilidad para eliminar recursos que bloquean el renderizado.
Optimizar FID
El FID o lo que significa First Input Delay, se encarga de darnos una medición del tiempo que va desde la primera interacción del usuario hasta que el navegador da una respuesta concisa de la misma. La clave esta en ofrecer una buena experiencia de usuario y, por lo tanto, este FID debe estar a manera de sugerencia entre 100 milisegundos hasta los 300 milisegundos, teniendo en cuenta que mientras menos sea el número, mejor será para el usuario y para el análisis que realiza Google, ya que por sobre los 300 milisegundos es algo que Google considera como lento.
Para poder mejorar este punto básicamente se toma en consideración los aspectos para modificar el LCP si modificamos en gran medida la carga de elementos grandes en nuestro sitio estamos agilizando el FID, desde mitificar los archivos JS, CSS y HTML que estén presente en nuestro sitio con el uso de plugins de caché que provean este tipo de compresión como la eliminación previa de recursos que bloquean el renderizado, dan una velocidad extra a la carga del sitio para que este no se tome de manera negativa en este FID.
En resumen este punto es altamente influenciado por los ajustes que realicemos sobre el LCP, muy pocas veces vamos a terne un FID bueno si nuestro LCP es malo o deficiente.
Optimizar CLS
En cuanto a CLS podemos nombrarlo también por su nombre en ingles Cumulative Layout Shift o en español cambio de diseño acumulativo, esta es una métrica que consta de la evaluación de la experiencia de usuario al navegar por las páginas de nuestro sitio. Si bien sabemos que no es un solo elemento el que afecta a la experiencia del usuario el puntaje CLS bajo afecta enormemente el nivel de SEO del sitio web, es por esto que al tener una buena puntuación de CLS mejoramos tanto rendimiento como posicionamiento.
En los casos que tengamos una página con un porcentaje o valor de CLS bajo, podremos considerar modificar ciertos elementos que la componen si por ejemplo nuestro sitio cuenta con banners publicitarios, iframes, imágenes publicitarias en barras laterales, elementos gráficos como videos sin especificaciones de tamaño. Así mismo como fuentes personalizadas que sean la base de la modificación del sitio.
Estas modificaciones usualmente necesitan un tiempo de respuesta para ser cargadas ya sea porque deben conectarse a un servidor externo o bien porque deben cargar el elemento adicionalmente al contenido del sitio, igualmente estos ajustes podemos verlo directamente en las opciones dentro del análisis que nos ofrece Google sobre qué elementos podemos modificar para mejorar el CLS de nuestro sitio en caso de que sea muy alto el porcentaje.
Luego de esto también tenemos de forma generalizada el cómo podemos gestionar nuestro sitio para que tenga un mejor puntaje independientemente de que nos indique el pagespeed.
Definir tamaño de las imágenes y videos que se suben en nuestro sitio: Muchas veces solo subimos la imagen sin tener en cuenta que esta va a ser cargada sin una vista recortada del mismo, y forzamos a nuestro sitio a cargar una imagen muy pesada que consta de la resolución completa cuando no lo necesita, la mejor forma de hacer frente a este problema es asignar el tamaño una vez la insertamos en nuestro sitio, de esta forma se hará el recorte de la misma y por ende el peso y tamaño será menor para ser variados.
Configurar medidas en banners y iframes: Los anuncios publicitarios de cualquier índole pueden provocar cargas elevadas a nuestro sitio así mismo como cambios en el diseño orientado al usuario, algunos de estos pueden ser dinámicos para reservar una posición que evite puntuaciones bajas de CLS; sin embargo, si no es el caso y trabajamos con un anuncio que es mayormente gestionado por nosotros mismos la mejor de las situaciones es que asignemos manualmente de la misma forma que se hace con las imágenes un tamaño específico a estos iframes.
Uso de fuentes personalizadas: Por muy pequeño que parezca si agregamos una fuente personalizada a nuestro sitio puede causar un aumento en el puntaje de CLS recordando que mientras el puntaje sea más alto será mayor la repercusión y menor la recomendación de esta página. Agregar estas fuentes puede causar que la página muestre el texto invisible o no se cargue del todo hasta que el sitio esté cargado por completo afectando así no solo a este punto sino también a la carga general del sitio, en algunos casos es mejor trabajar con Google fonts en WordPress.
El mejor de los métodos para actuar frente a este problema es el de aplicar un código CSS a nuestra fuente personalizada.
@font-face {
font-family: 'nombre_de_la_fuente';
src: local('Pacifico-Regular'), url(www.ejemplo.woff2) format('woff2');
font-display: swap;
}
Al hacer esto evitaremos en gran medida cualquier problema relacionado con el CLS de la fuente en nuestra página, utilizando el cogido de display con los valores de auto, fallback, block, swap, y optional, evitará el que la fuente se vuelva invisible en nuestro sitio.
Conclusión
Como hemos podido ver, el trabajo de optimizar las Core Web Vitals, son parte de una optimización general, ya que son procesos que normalmente se realizan al momento de optimizar la web, para la mayoría de los casos estos ajustes ya los hemos hecho o al menos no en totalidad, pero si llegamos al punto de preocuparnos por este tipo de análisis que realiza Google nos encontramos en el punto en donde ya hemos realizado la mayoría de estos ajustes, sin embargo, es bueno tenerlos enumerados y conocer que implica el buen uso de estos mismos ajustes.
También te puede interesar:
- Plugin de reservas para WordPress
- WooCommerce multivendor
- Crear tienda online
- Filtros WooCommerce
- Videos en los productos de WooCommerce
- WooCommerce Vs Prestashop
- Plugins para WooCommerce
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
