5 formas de mejorar tus Core Web Vitals • Yoast


“¡Si tan solo pudiera mover mi varita y tener un sitio web súper rápido!” Esto probablemente también se te ha pasado por la cabeza, ¿verdad? Optimizar la velocidad del sitio y la experiencia del usuario es mucho trabajo y se vuelve técnico, y complicado, realmente rápido. La mayoría de los propietarios o administradores de sitios necesitan hablar rápidamente con sus desarrolladores para hacer las cosas. Ahora, las nuevas métricas de Core Web Vitals le brindan más información y sugerencias sobre qué corregir. Repasemos cinco cosas que puede hacer para mejorar su puntaje de Core Web Vitals.

El 11 de noviembre de 2020, Google anunció que el factor de clasificación de la experiencia de la página se implementará en Mayo de 2021.

Tabla de contenido

Primero, un descargo de responsabilidad

Mira, no hay nada que esté garantizado para solucionar un problema específico. Debe tener una visión más amplia de la optimización de su sitio. Muchas pequeñas correcciones constituyen grandes resultados. Entonces, aunque le daré cinco cosas en las que puede trabajar aquí, esto no es ni mucho menos definitivo. Incluso Google dice que muchos elementos trabajan juntos para generar puntajes, por lo que es difícil determinar si haces esto, entonces ese puntaje aumentará.

Lo que Google le brinda es información sobre lo que ralentiza las cosas o lo que perjudica la experiencia del usuario. Muchas herramientas también dan consejos sobre cómo arreglar cosas. Web.dev/measure, por ejemplo, no ofrece resultados detallados, pero le da una idea de cuál es el impacto de una solución en particular.

La herramienta Web.dev/measure de Google le da una idea del impacto que puede tener una corrección

Próxima actualización de la experiencia de la página de Google

Hemos publicado un par de artículos sobre la actualización de la experiencia de la página de Google, que llegará en mayo de 2021, por lo que puede comenzar aquí si necesita más información general:

Cinco cosas que usted o su desarrollador pueden hacer

A lo largo de los años, se ha hablado constantemente de la importancia de velocidad del sitio y experiencia de usuario. Pero si bien hay un montón de material disponible sobre cómo optimizar su sitio, poner ese conocimiento en práctica es difícil. Estos últimos meses, Google una vez más puso la velocidad al frente y al centro con la actualización de la experiencia de la página el próximo año. Para ayudarlo a prepararse para eso, desarrolló herramientas para brindarle información y mucha documentación para leer.

En muchos casos, el consejo no ha cambiado tanto. Todo se reduce a hacer llegar el contenido principal a sus usuarios lo más rápido posible. Ejecute la prueba para ver cómo funciona su sitio, intente priorizar las correcciones y comience. A continuación, encontrará una combinación de formas antiguas y nuevas de mejorar su sitio para mejorar sus Core Web Vitals.

Optimiza tus imágenes

Comenzaré esta lista con un clásico de oro: optimizar imágenes. Una de las cosas más importantes que puede hacer por su sitio es optimizar adecuadamente sus imágenes. Sí, lo dijimos un millón de veces pero lo vamos a decir de nuevo: hazlo. Esa imagen grande no optimizada en su página de inicio o página de destino podría lastimarlo. Las imágenes grandes son a menudo pintura con contenido más grande (LCP) para cualquier sitio dado. ¡Asegúrate de dar la bienvenida a tus visitantes haciendo que la carga sea rápida!

Tenemos un artículo popular sobre SEO de imágenes describiendo lo que puede hacer para que esa imagen se cargue rápidamente. Pero en resumen, asegúrate de servirlo en el tamaño necesario y comprímelo bien. Hay muchas herramientas que le ayudarán a hacer esto. Personalmente, me encantan los resultados que obtengo con squoosh.app. No crea que necesita mantener esa resolución masiva para que la imagen sea nítida en las pantallas más comunes.

También intente adoptar formatos modernos como WebP. Estos formatos pueden ofrecer imágenes de alta calidad en un tamaño menor. WebP está bien soportado ¡e incluso Apple se ha subido a bordo! La próxima versión de Safari 14, tanto en MacOS como en iOS, será compatible con WebP. Sí, el nuevo navegador Microsoft Edge con tecnología Chromium también es compatible con WebP.

Tu CMS también es una herramienta que te ayudará a mejorar la carga de imágenes. Las versiones recientes de WordPress admiten la carga diferida automática de imágenes (e iframes), ¡lo cual es una gran noticia! Esto significa que solo cargará aquellas imágenes que aparezcan en pantalla y dejará que el resto se cargue cuando el usuario interactúe con esa pantalla. Esto le dice al navegador que cargue imágenes grandes solo cuando sean necesarias.

Otro consejo permanente sobre la velocidad del sitio es el uso de un CDN, pero ¿sabías que también puedes usar una CDN específicamente para imágenes? Un imagen CDN le brinda más control sobre cómo desea servir y cómo desea que aparezcan. Una imagen impulsada por una imagen CDN obtiene una cadena de propiedades en su URL que le dice al navegador cómo debe comportarse la imagen.

Estabilice la carga especificando espacio para imágenes y similares

Una de las nuevas métricas es cambio de diseño acumulativoo CLS para abreviar. Un ejemplo de esto es cuando una página móvil parece lista y justo cuando desea presionar un botón, el contenido cambia y aparece un anuncio de carga lenta en ese lugar. Esto sucede a menudo y es una de las principales causas de frustración para los usuarios. Ahora, aunque optimizar su CLS no necesariamente hará que su página ser más rápido seguro que lo hace sentir más rápido.

CLS es causado por imágenes sin dimensiones en el CSS. También puede ser causado por anuncios e incrustaciones sin dimensión, o contenido inyectado dinámicamente. Cuando no se les dan las dimensiones adecuadas, estos elementos tienden a salto solo un poco durante el proceso de carga, lo que hace que parezca desigual e inestable. Esto también puede deberse a que se inserta contenido nuevo por encima del contenido existente. No hagas eso, excepto quizás después de una interacción explícita por parte del usuario.

Una de las formas en que puede mejorar Core Web Vitals y prevenir CLS es agregando el ancho y alto de las imágenes en el CSS. De esta forma, el navegador reservará espacio para esa imagen que probablemente aparecerá más tarde que el texto. Ahora, las sacudidas desaparecerán porque el navegador sabe que se agregará algo a su debido tiempo. Podría pensar en agregar algún tipo de marcador de posición de baja resolución si desea que en algún momento aparezca rápidamente.

Por lo tanto, simplemente asegúrese de que sus imágenes tengan configurados los atributos de ancho y alto adecuados. Por supuesto, también puede hacer esto con imágenes receptivas regulares. Solo asegúrese de utilizar la misma relación de aspecto para todos los tamaños.

<img src="https://yoast.com/boost-core-web-vitals/mountain.jpg" width="640" height="360" alt="Mountain underneath a cloudy sky">

Para hacer frente a anuncios saltadores o contenido inyectado, reserve espacio para estos también. Al final, su CLS podría bajar un poco.

Acelere su servidor para reducir el tiempo de carga

Cuanto más rápido responda su servidor a las solicitudes, mejor. Hacer que ese servidor responda más rápido directamente mejora muchas métricas de velocidad del sitio. En sitios complejos, el servidor se mantiene ocupado manejando solicitudes y entregando archivos y scripts, por lo que es mejor optimizar esos procesos.

La optimización de su servidor consta de varias partes. Primero, actualice su plan de alojamiento. No escatimes en hosting. Elija uno que ofrezca un buen rendimiento a un precio justo. Además, está el asunto de cómo se configuró el servidor: ¡use una versión reciente de PHP! – y qué hardware eligió. Tal vez debería actualizar el hardware si encuentra que falta. Además, debe investigar cómo funcionan sus bases de datos y ver si puede realizar mejoras. Utilice herramientas como el Complemento de WordPress de Query Monitor para seguir analizando consultas en su sitio.

También puede ver cómo su servidor envía archivos a los clientes. Hay varias formas de mejorar ese proceso, como link rel=preload por ejemplo. Estas son soluciones más avanzadas que le permiten ajustar la forma en que su servidor responde a las solicitudes. Aquí, nuevamente, un CDN puede hacer maravillas para mejorar sus Core Web Vitals.

Busque CSS crítico para cargar el contenido de la mitad superior de la página más rápido

Cuando el navegador carga una página, tiene que obtener el HTML, renderizarlo, obtener el CSS, renderizarlo, obtener el JavaScript, renderizarlo, etcétera, etcétera. Cuantos más archivos necesite para cargar su sitio y cuanto más grandes sean, más lento se cargará su sitio. A menudo, mientras el navegador está ocupado haciendo cosas, no puede cargar cosas en segundo plano. Ciertos elementos cuadra el proceso. Los llamados JavaScript y CSS que bloquean el renderizado influyen en todo.

Dado que el CSS se carga tarde, a menudo puede llevar un tiempo que aparezca algo en la pantalla. Al tomar los bits críticos de su diseño, la parte que aparece encima del pliegue, del archivo CSS principal e incluirlos en su código, puede obtener algo en la pantalla mucho más rápido. Arreglar esto, una vez más, no hace que su sitio sea más rápido, pero lo hace parecer más rápido. Todo por esa excelente experiencia de usuario.

Para obtener un conjunto de CSS crítico, puede elegir entre varias herramientas o puede hacerlo a mano. Además, puede utilizar complementos de almacenamiento en caché de WordPress como Cohete WP. WP Rocket tiene un botón simple llamado Optimizar la entrega de CSS. Activar esto ayuda a eliminar el CSS que bloquea el renderizado y mejora la carga de su sitio. Por supuesto, WP Rocket también hace otras cosas interesantes como minimizar CSS y JavaScript y aplazar la carga de JavaScript.

Mejorar la carga de scripts de terceros

En muchos sitios, la lentitud también proviene del exterior. Si su sitio se basa en scripts de anuncios, por ejemplo, básicamente está en manos del proveedor de anuncios. Solo puede esperar que hagan que sus anuncios sean eficaces. Si sus anuncios se cargan realmente lento, bueno, tal vez sea el momento de buscar otro proveedor.

Si encuentra que los scripts de terceros ralentizan su sitio, debe investigar esto. Pregúntese, ¿realmente necesito ese anuncio en particular? ¿Cuál es el valor de estos guiones? Puede que exista una opción diferente que sea un poco más optimizada y menos estresante para su servidor. ¿Quizás intentar eso?

Si es posible, puede experimentar alojando el guión usted mismo. De esta manera, tienes un poco más de control del proceso de carga. Si no puede hacer eso, vea si puede hacer que se precargue más rápido.

Al menos, asegúrese de cargar los scripts de forma asincrónica o aplazarlo hasta el último momento. De esta manera, el navegador puede crear la página primero antes de obtener y ejecutar el script externo. Utilice async si el script que está cargando es importante, como un script de análisis. Puede utilizar aplazar para recursos menos críticos. Hay montones de documentación sobre la optimización de scripts de terceros.

Mejorar los elementos básicos de la Web: todas las pequeñas mejoras cuentan

Con la actualización de la experiencia de la página en mayo de 2021, Google puso la velocidad del sitio y la experiencia del usuario al frente y al centro nuevamente. Siempre hemos analizado el SEO de manera integral: hay muchas partes móviles y debes trabajar en todas ellas para construir el mejor sitio que existe. Aunque los consejos mencionados anteriormente pueden ayudarlo a mejorar esos puntajes de Core Web Vitals, realmente debería hacerlo para ofrecer a sus visitantes una mejor experiencia.



Source link

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *