¿Cómo mejorar Core Web Virtuals en sitios de WordPress?

¿Por qué importa la velocidad en el marketing digital? Los usuarios que experimentan tiempos de procesamiento más rápidos tienen más probabilidades de permanecer en la página y navegar. Esto, a su vez, puede tener un impacto positivo en tu clasificación SERP general. Además, el tiempo que tarda una página web en mostrar la primera área de visualización es cada vez más interesante para los motores de búsqueda. De hecho, casi la mitad de todos los factores de clasificación de Google están directamente relacionados con la mejora de la experiencia del usuario. Los motores de búsqueda son conocidos por enfatizar ciertos factores de clasificación, incluidos varios aspectos de la carga, conocidos como core web vitals (CWV). Además de tener un impacto directo en las clasificaciones, es probable que la experiencia de su página también influya en la participación de los usuarios mientras navegan por su contenido y la probabilidad de que regresen a él.

Tres componentes de Core Web Vitals

Los algoritmos de Google cambian continuamente para promover sitios fáciles de usar y de alta calidad y degradar aquellos que no cumplen con sus estándares de calidad. Una parte de estos algoritmos es el núcleo web vitals, que juega un papel importante en el lanzamiento reciente de una amplia gama de actualizaciones. El objetivo de Google con CWV es animar a los desarrolladores a centrarse más en la experiencia del usuario al optimizar el rendimiento de su sitio.

La pintura con contenido más grande, el retraso de la primera entrada, el cambio de diseño acumulativo: estos son los tres componentes de los principales elementos vitales de la web.

• Pintura con contenido más grande: la pintura con contenido más grande (LCP) es un criterio importante porque la percepción visual de un sitio web se ve muy afectada por la velocidad de carga del elemento más grande de la pantalla. El tiempo entre la carga del contenido DOM y el momento en que el usuario ve algo en su pantalla (una imagen grande o un bloque de texto) es la CPL o latencia de pintura con contenido. Es esencialmente el tiempo que transcurre entre el clic de un usuario (por ejemplo, para cargar una página) y el momento en que ve algún tipo de contenido. Si su pintura con contenido toma más de 4 segundos, podría afectar negativamente su puntaje de SEO.
• Primera demora de entrada : la primera demora de entrada es el tiempo que una página responde a su entrada después de hacer clic en algo. El FID generalmente se mide en milisegundos (ms). Por ejemplo, cuando un usuario hace clic en un elemento del sitio y espera a que la pantalla se actualice con nueva información, el navegador procesa esta acción y entrega un resultado. Cuanto más corto sea el FID, más rápido podrán los usuarios comenzar a navegar por su página, donde podrá mantenerlos durante más tiempo y aumentar sus conversiones. Google aclaró que toleraría un retraso en la primera entrada de 100 ms para una puntuación excelente y de 300 ms para una puntuación baja.
• Cambio de diseño acumulativo : ¿alguna vez se ha desplazado hacia abajo en una página y de repente notó que una gran parte de la página se movía hacia arriba a medida que se desplazaba? El cambio de diseño acumulativo (CLS) es cuando el contenido se mueve alrededor de la página después de que se pintó. El resultado es que tu usuario tiene que comprender y repasar el contenido de tu página, especialmente si hay mucho texto. Un puntaje de cambio de diseño acumulativo suficiente es inferior a 0,1 y uno deficiente es inferior a 0,25.

¿Cómo medir Core Web Vitals en sitios de WordPress?

Para optimizar sus principales web vitals para los sitios web de WordPress y asegurarse de que su sitio web funcione al máximo nivel de eficiencia, es esencial contar con todas las herramientas necesarias para monitorear, rastrear y analizar los puntos de datos importantes.

Consola de búsqueda de Google

Después de medir los datos reales del usuario, Search Console genera informes CWV con la cantidad de páginas donde se encontraron problemas por separado para las versiones de escritorio y móvil del sitio web. Cubre el rendimiento de la URL en función de su estado (Deficiente, Necesita mejorar, Bueno), los datos vitales principales de la web (CLS, FID, LCP) y grupos de páginas similares. También es importante tener en cuenta que si una URL no tiene suficientes datos de informes para una métrica en particular, no se incluirá en el informe.

Perspectivas de PageSpeed

Al mismo tiempo, PageSpeed ​​Insights le permite ver su sitio desde la perspectiva de los rastreadores y usuarios de Google, proporcionando un análisis de los problemas de su página y ofreciendo sugerencias para mejorar el rendimiento. El informe le permite comprender mejor qué recursos contribuyen a aumentar los tiempos de carga. También obtendrá un informe que proporciona información clave sobre la página y le permite saber cómo realizar los cambios necesarios.

Clasificación SE

Junto con las herramientas mencionadas anteriormente, Website Audit de SE Ranking también ofrece una sección principal de datos vitales web por separado para las versiones de escritorio y móvil. Esta herramienta puede ser aún más informativa para los especialistas en SEO, ya que detecta posibles problemas técnicos que pueda tener tu sitio web. En función de los resultados de la auditoría, la herramienta proporciona la puntuación de salud general del sitio web y una lista de problemas que afectan su rendimiento con descripciones detalladas y consejos sobre cómo resolverlos.

Los problemas más comunes de Core Web Vitals y cómo solucionarlos

1- El servidor es demasiado lento

Es importante recordar que no todos los sitios web de WordPress son iguales. Esto puede hacer que algunos sitios web funcionen más lentamente que otros con configuraciones idénticas. La razón de esto es que muchos factores pueden afectar la velocidad del servidor: la cantidad de complementos que ha instalado, la cantidad de secuencias de comandos y CSS, la ubicación del servidor, etc.

Sin embargo, existen hostings optimizados específicamente para sitios web de WordPress. Por lo general, tienen una velocidad de carga más rápida debido al software de almacenamiento en caché y pueden manejar muchos visitantes. Dicho alojamiento puede gestionar muchos problemas técnicos y tiene muchos complementos preinstalados. Por lo tanto, puede crear uno o varios sitios web y dejar que el alojamiento de WP haga todo el trabajo técnico por usted.

2- Imágenes y videos grandes

Cuando está trabajando en un sitio web y llega el momento de ejecutar una prueba de vitalidad web central, probablemente verá algunos problemas relacionados con las imágenes y los videos. La causa subyacente de la velocidad de página lenta son las imágenes y los videos que pesan demasiado. La antigua pregunta cliché de "cuántos megabytes son demasiados" sin duda ha surgido últimamente en el mundo de los datos vitales básicos de la web. Más específicamente, ha surgido la cuestión de cómo debe optimizar el uso de imágenes, videos y otros archivos de gran tamaño en su sitio.

La regla general es tener una imagen principal y un tamaño de video, luego incluir los atributos de ancho y alto en sus imágenes y elementos de video. A menudo, es mejor personalizar sus imágenes a un ancho específico antes de cargarlas y crear un nuevo elemento de imagen que corte áreas específicas como fondos, texto innecesario, etc. Hay muchas aplicaciones gratuitas de edición de imágenes en línea que le permiten recortar y cambiar el tamaño de las fotos. . El problema con la visualización de imágenes más grandes es el mayor tamaño de descarga y el ancho de banda que se necesita para mostrarlas.

Lo mismo se aplica a los videos: la personalización previa del video puede mejorar significativamente la velocidad de la página, ya que el navegador no necesitará reducirlo; el video se puede reproducir en dimensiones de tamaño normal. Además, dado que los videos nativos son pesados, puede reemplazarlos con incrustaciones de Youtube, lo que acelera bastante el sitio.

Usar la carga diferida es otra excelente manera de mejorar la velocidad de la página sin comprometer la experiencia del usuario. La carga diferida es una técnica de carga de imágenes solo cuando ingresan a la ventana gráfica (o sección de pantalla). Este enfoque hace que las imágenes se carguen progresivamente a medida que se desplaza, lo que aumenta la velocidad de la página. ¿La mejor parte? Es elemental implementar el uso de complementos de carga diferida de WordPress como Lazy Load. Esto mejorará significativamente la experiencia del usuario. Los usuarios no tienen que esperar a que se cargue la página. Después de algunos desplazamientos, las imágenes se cargarán solas.

3- Código no optimizado

El código no optimizado puede dañar su puntaje de vitales web central como First Contentful Paint y su experiencia de usuario. El mayor culpable aquí es JavaScript principalmente. Porque debe descargarse y ejecutarse después de que se haya cargado la página. (JavaScript viene antes que HTML, que bloquea la carga de la página). Esto puede llevar fácilmente a una pantalla congelada durante varios segundos, especialmente si la conexión del usuario no es rápida. Por lo tanto, si JavaScript no está optimizado, corre el riesgo de que su sitio pierda puntos de rendimiento. Para asegurarse de que no se bloquee la carga de la página hasta que se haya cargado JavaScript, puede usar etiquetas asíncronas y diferidas. Además, eliminar elementos innecesarios de sus archivos de código es una buena práctica.

La minificación del código elimina comentarios, espacios y saltos de línea innecesarios del código. Esto puede ayudarlo a reducir el tamaño de su archivo, lo que se traduce en tiempos de descarga más rápidos en los navegadores de sus visitantes. Hay dos razones para hacer esto. Primero, hace que sea más rápido para sus visitantes descargar. En segundo lugar, lo hace más pequeño, por lo que utiliza menos recursos del servidor. Algunos archivos que puede minimizar fácilmente incluyen archivos <style> y <script>. Puede ponerse a prueba comparando un archivo antes y después de la optimización. Los resultados pueden no ser muy notorios para hojas de estilo o archivos JavaScript. Esto se debe a que las herramientas de compresión CSS y JS, como YUI Compressor, Minify, etc. optimizan mucho mejor este tipo de archivos que los complementos de minificación.

El DOM (Document Object Model) es la jerarquía de todos los elementos de un documento. El DOM se compone de etiquetas HTML, que tienen estilos CSS y JavaScript asociados a ellas. Debido a que la cantidad de elementos puede ser bastante alta, el tamaño de su página será grande. Esto puede causar problemas de rendimiento si publica la página en dispositivos móviles. Por lo tanto, es importante minimizar la cantidad de elementos y optimizar su ubicación en su documento.

4- Diseño de turnos

Un cambio de diseño es un fenómeno que ocurre cuando se cambia el tamaño de la ventana del navegador de su visitante. Y los elementos de su sitio web, como imágenes, fuentes y colores, se aflojan o cambian de posición. Esto dificulta que los lectores se concentren en lo que intentas presentar. El puntaje de cambio de diseño es un puntaje que rastrea cuánto se ve afectado su sitio por los cambios de diseño en todos los dispositivos. Es un gran problema cuando se habla de ventanas gráficas. Porque si sus diseños cambian demasiado, podría perder visitantes y conversiones. Minimizar los cambios de diseño y optimizarlos tanto como sea posible conducirá a una menor rotación y, en última instancia, a más visitas a la página.

Además, los cambios de diseño significativos pueden afectar negativamente sus esfuerzos de SEO. Sin embargo, diseñar un diseño grande puede ser difícil de mantener. Esto se debe a que, a menos que haya diseñado específicamente el sitio con un diseño receptivo. Por lo tanto, el diseño debe ajustarse para adaptarse a todos los dispositivos. Tener que hacer esto regularmente puede llevar mucho tiempo. Requiere persistencia y consistencia para tener éxito sin comprometer la calidad o la funcionalidad. Es por eso que la mejor solución es hacer que el diseño de su sitio web sea receptivo. Las pantallas receptivas cambian de tamaño según el tamaño de la pantalla en la que se visualizan. La implementación de pantallas receptivas significa que su sitio web se ajustará sin ralentizarse ni bloquearse.

5- Problema de almacenamiento en caché

Se utilizan diferentes políticas de almacenamiento en caché para diferentes recursos al crear un recurso web. Las políticas de almacenamiento en caché definen cómo se almacenará en caché cada recurso y brindan información sobre cuánto tiempo se deben almacenar en caché los recursos. Debe configurar estas políticas. Para que los recursos web se puedan reutilizar sin tener que crearlos desde cero cada vez que los usuarios acceden a ellos. Para mejorar el rendimiento, es importante asegurarse de que sus servidores no pierdan el tiempo creando recursos que ya se han creado. Con la ayuda de la tecnología de secuencias de comandos del lado del servidor, puede aprovechar esta política. Asegúrese de que los recursos vitales nunca se vuelvan a crear a menos que algo haya cambiado en ellos.

El intercambio firmado (SXG) es una nueva iniciativa que permite que el contenido se obtenga previamente de la web de manera que se preserve la privacidad. Un intercambio firmado contiene una especificación para los recursos que un sitio web desea obtener previamente. Además, asegúrese de que esos recursos se obtengan de forma segura (sin revelar información privada). El formato binario de intercambio firmado es un formato de transferencia de activos. Significa que el contenido se transferirá a través de HTTPS con un encabezado adicional adjunto. Esta es una forma nueva y emocionante de permitir que la Búsqueda de Google mejore el rendimiento de carga de la página. Especialmente en páginas AMP o cualquier otro tipo de página que dependa de recursos externos.

Conclusión

Core Web Vitals son tres métricas desarrolladas por Google que califican la experiencia de un usuario al cargar una página web. Los tres elementos fundamentales de la web son fundamentales para comprender qué tan rápido se carga una página. Qué tan receptivo es el navegador a las entradas de los usuarios y qué tan inestable es el contenido a medida que se carga en el navegador. Los tiempos de carga lentos afectan si los visitantes permanecerán o no en su sitio. Podrían irse por completo o pasar menos tiempo interactuando con su contenido en el sitio.