Cómo optimizar su sitio para los principales elementos web vitales (en 7 pasos)

Google ha introducido Core Web Vitals como una forma de medir qué tan rápido se pueden usar los sitios web. Estos valores juegan un papel importante en la optimización de los motores de búsqueda (SEO) y pueden tener un gran impacto en el grado de clasificación de sus páginas. Afortunadamente, hay pasos que puede tomar para mejorar estos elementos vitales en los sitios de WordPress. En esta publicación, explicaremos qué son los vitales web básicos y por qué es importante prestar atención. Luego compartiremos siete pasos para optimizar su sitio de WordPress para estos valores. ¡Vamos a empezar!
Una introducción a la principal web Google Elements ha introducido Core Web Vitals para centrarse en la experiencia del usuario (UX). Estos valores están diseñados para medir la velocidad de carga de la página, la interactividad y cómo estable es una página de carga. El primer núcleo web vital que discutiremos es la pintura contentful más grande (LCP). Esto mide el tiempo que ha pasado entre un usuario que hace clic en un enlace y el contenido se vuelve visible. Lo crítico para recordar es que el LCP se mide desde el punto de vista del usuario. A continuación, tenemos el primer retraso de entrada (FID). Una vez más, este valor se considera considerando al usuario final. FID evalúa cuánto tiene que esperar un usuario antes de que pueda interactuar con un sitio web. La interacción puede incluir cualquier cosa, desde el clic en un enlace de navegación hasta ingresar información en un campo.
Finalmente, el cambio de diseño acumulativo (CLS) mide la estabilidad visual de una página. Si una página tiene un CLS alto, el contenido no es estable y cambia a medida que se carga. Este cambio puede ser muy frustrante para los usuarios, especialmente para aquellos en dispositivos móviles. ¿Por qué los elementos web básicos vitales son pronto? La experiencia de la página comenzará a afectar las clasificaciones de búsqueda. Aunque los vitales de Web Core no son las únicas piezas del rompecabezas UX, son una parte importante. La velocidad de carga de la página ha sido una prioridad para los propietarios de sitios web durante mucho tiempo. Aunque esta medida es crucial, Core Web Vitals admite que un sitio web de calidad significa más que lo rápido que es el contenido. A finales del año pasado, Google ha anunciado que Core Web Vitals se utilizará para fines de clasificación a partir de mayo de 2021. Otras señales UX. , incluida la compatibilidad con dispositivos móviles, navegación segura e implementación de HTTPS, también considerará en la clasificación. Google también puede lanzar un indicador visual en los resultados de búsqueda que cumplen con este nuevo criterio. A medida que varios sitios web comienzan a adherirse a estas pautas centradas en el usuario, aquellos que los ignoren probablemente sufrirán en páginas con resultados de los motores de búsqueda (SERP).
Afortunadamente, Google es muy claro sobre sus expectativas y hay muchas herramientas disponibles para ayudar con estas mejoras. Incluso si no ha comenzado a llevar su sitio a un empate, aún tiene tiempo para hacerlo. Cómo optimizar su sitio para los principales elementos web vitales (en 7 pasos) ahora que hemos cubierto cuáles son los elementos web vitales y por qué son esenciales, exploremos cómo optimizar su sitio teniendo en cuenta. Paso 1: Establezca su puntaje actual de Web Web vital antes de intentar mejorar el rendimiento de su sitio, debe tener una idea de dónde está actualmente. Puede hacer esto rápidamente utilizando PageSpeed ​​Insights de Google: puede comenzar a ingresar a la URL de su sitio y hacer clic en el botón. Debe tener resultados para dispositivos móviles y de escritorio en un minuto o dos. Core Web Vitals se muestran en la parte superior de los resultados:
El informe también le da sugerencias para mejoras. Ahora que tiene una idea de la clasificación actual de su sitio y sus áreas débiles, puede comenzar a optimizar su sitio para mejorar su puntaje. Paso 2: Aproveche la implementación de la carga perezosa de la carga perezosa es un excelente lugar para comenzar, en primer lugar si usa grandes imágenes en su sitio web. Con la carga perezosa activada, el contenido de los medios no se mostrará hasta que un usuario se ejecute hasta ese punto de la página. Esto puede mejorar su puntaje LCP.

La carga perezosa viene con otros beneficios. Debería ayudarlo a usar menos ancho de banda, porque no se cargarán elementos innecesarios. Incluso puede notar una mejora en el rendimiento general de su sitio cuando hay menos demanda de sus recursos. Si bien WordPress ha introducido una carga perezosa para la mayoría de las imágenes en actualizaciones anteriores, algunas pueden haber escapado a través de grietas. A3 Lazy Load es un complemento gratuito de WordPress que puede usar para administrar la carga perezosa para medios que no están cubiertos por WordPress: después de instalar y activar el complemento, la configuración es relativamente simple. Desde el tablero de WordPress, vaya a Configuración> A3 Lozy Load. Esto lo llevará a la pantalla de configuración del complemento:

Probablemente pueda dejar la mayoría de la configuración predeterminada en esta pantalla. Sin embargo, puede configurar el complemento para ignorar ciertas clases de imágenes si necesita:
Con A3 Lazy Load implementada, puede ejecutar otra prueba de Speed ​​Insights de página para verificar las mejoras de puntaje LCP. Paso 3: Pruebe un complemento de caché Un almacenamiento de caché puede ayudar no solo a aumentar el rendimiento del sitio, sino también para mejorar la puntuación FID. PageSpeed ​​Insights a menudo recomiendan eliminar elementos que bloqueen la representación, como JavaScript y CSS. Aunque este es un problema común, la solución puede ser frustrante y de tiempo.

JavaScript puede tener un impacto negativo en el FID. Esta desaceleración puede deberse al código que se carga antes del necesario o no necesario. Un complemento de caché, como WP Rocket, puede ayudar posponiendo JavaScript: WP Rocket hace este proceso tan simple como marcar una casilla. También puede dirigir el complemento que excluya ciertos archivos, porque a veces, los cambios en el código hacen que un sitio no funcione de acuerdo con las expectativas. Paso 4: minimiza a JavaScript y CSS, otra forma de abordar los elementos que bloquean la representación es minimizar el código. Cuando se reduce el código JavaScript o CSS, se eliminan los comentarios y espacios blancos, lo que resulta en una carga más rápida.

Aunque esto es efectivo, puede llevar mucho tiempo viajar el código y eliminar los artículos manualmente. El uso de un complemento como el autoadio es mucho más efectivo:

Con el complemento instalado y activado, puede explorar la configuración> Autoptomizar para configurarlo. En esta pantalla, primero tendrá que verificar el cuadro de código de optimización de JavaScript y desmarque el cuadro de agregado JS-Files:
Hará lo mismo en las opciones de CSS. Marque la casilla optimizar el código CSS y desmarcar el cuadro de agregación del archivo CSS:

Ahora puede hacer clic en Guardar los cambios y vaciar el caché. Después de haber completado estos pasos, puede probar su sitio nuevamente en PageSpeed ​​Insights.

Paso 5: Optimizar y SIZEST y las imágenes grandes pueden ser visualmente agradables, pero realmente pueden extraer el rendimiento de su sitio si no ha optimizado sus fotos, puede usar archivos mucho más grandes que lo necesita. Las imágenes optimizadas tienen otros beneficios además de mejorar los vitales de la web central. Probablemente usará mucho menos ancho de banda y espacio de almacenamiento, lo que puede ahorrar los costos de alojamiento. Las imágenes optimizadas incorrectamente son especialmente visibles en los dispositivos móviles. Las imágenes grandes se cargan aún más lentamente en las pantallas pequeñas. Es esencial verificar los resultados móviles en las estadísticas de PageSpeed, ya que algunos medios que funcionan en el escritorio pueden ser problemáticos en otros dispositivos. Puede usar un complemento como ShortPixel para administrar automáticamente el tamaño y la compresión. Este complemento aumenta, escala y optimiza las imágenes a medida que las sube, para que no se preocupe por hacerlo de antemano: no se preocupe si ya ha subido muchas imágenes grandes en su biblioteca de medios. ShortPixel puede comprimirlos a todos con un solo clic. Paso 6: Use una red de entrega de contenido (CDN) Una red de entrega de contenido (CDN) puede mejorar su puntaje general de vital web transmitiendo su contenido en caché y reduciendo la latencia a través de una red de servidor extendida. Tiene muchas opciones cuando se trata de CDN, incluidos Cloudflare:

CloudFlare incluso tiene un complemento para que pueda instalar y optimizar el CDN para su sitio de WordPress. Con el complemento instalado y activado, explore la configuración> CloudFlare. Desde aquí, puede crear una nueva cuenta o conectarse a una existente. Se le pedirá que ingrese a la clave API. También hay un enlace para recuperar su clave o registrarse para obtener uno: si hace clic en el enlace para recuperar su clave, explore su perfil y seleccione la pestaña API de tokens. Haga clic en el botón Ver junto a la tecla API global. Se le pedirá que ingrese la contraseña, luego podrá copiar la tecla API e insertarla en el campo en el tablero de WordPress:

Después de hacer clic en Guardar las credenciales de API, podrá acceder a la nube en el tablero. Haga clic en el botón Aplicar Siguiente para aplicar la configuración recomendada de CloudFlare para WordPress y está listo:

CloudFlare viene con muchas otras configuraciones, a las que puede acceder haciendo clic en el botón Setti. Sin embargo, algunos de ellos solo están disponibles con un plan pagado. Paso 7: Preste atención a su mayor contenido, su mayor contenido es una imagen, como la imagen presentada en una publicación de blog o un encabezado en una página de destino. Incluso si su sitio es principalmente texto, puede mejorar su puntaje LCP. Puede encontrar el más alto contenido en los resultados de la prueba de información de la página. Desplácese hacia abajo hasta la sección de diagnóstico y haga clic en la flecha de caída del fondo del elemento más grande de pintura:
Dependiendo de cuál sea este elemento, hay algunas formas en que puede minimizar su impacto en el puntaje de la página. Para las imágenes, asegúrese de que esté optimizado correctamente, como se describe anteriormente. Puede intentar usar una imagen de menor calidad si sigue siendo un problema. Si se trata de una gran pieza de texto que retira LCP, puede continuar optimizándolo. Intente dividirlo en párrafos más pequeños o use títulos y listas para crear bloques de texto más pequeños. Este formato también hará que su contenido sea más fácil de leer por parte de las personas. Conclusión La atención del puntaje Core Web Vital de un sitio de WordPress puede ayudar a identificar las debilidades potenciales. Hacer cambios para mejorar estos valores puede conducir a un mejor rendimiento de SEO y crear una experiencia de usuario más fluida. Recapitulemos los pasos que compartimos para optimizar un sitio web de WordPress para Core Web Sitals: Determine sus vitales de Web Core actuales.

Aproveche la carga perezosa.

Pruebe un complemento de caché.

Reducir JavaScript y CSS.

Optimizar y dimensionar las imágenes correctamente.

Use una red de entrega de contenido.

Presta atención a tu mayor contenido.
¿Todavía tiene alguna pregunta sobre alguna de estas técnicas de optimización? ¡Pregúntanos en la sección de comentarios a continuación!