Email jesus@jesuslopezseo.com ¬°Ll√°manos! +34 914 875 471

Consejos para mejorar tus Core Web Vitals y la experiencia de p√°gina

black

En 2021 habr√° una gran actualizaci√≥n en el algoritmo de Google. Las tambi√©n llamadas m√©tricas web principales fueron anunciadas en mayo de 2019, la novedad es que se sabe que ser√°n un factor del ranking el pr√≥ximo a√Īo. Por eso, como agencia de Posicionamiento Web en Madrid te damos algunos consejos para mejorar tus Core Web Vitals y la experiencia de p√°gina de los usuarios para el SEO.

Core Web Vitals pasan a ser un factor del ranking en mayo 2021

¬ŅEst√° tu sitio web listo para este cambio tan anunciado en el algoritmo de Google? Ya se sab√≠a que los Core Web Vitals o m√©tricas web principales ser√≠an un factor del ranking del buscador, pero no estaba clara la fecha.

A trav√©s de un tuit de Google Search Central informaron que la experiencia de p√°gina ser√° una de las se√Īales del ranking a partir de mayo de 2021. Esta se√Īal combinar√° los Core Web Vitals con las se√Īales anteriores relacionadas con la experiencia del usuario.

En el blog de Google Webmaster Central ampl√≠an la informaci√≥n. Recordando que en mayo de este 2018 Google anunci√≥ que las se√Īales de experiencia de la p√°gina se incluir√≠an dentro del ranking de Google.

Y que estas se√Īales miden c√≥mo los usuarios perciben la experiencia de interactuar con una p√°gina web. Adem√°s de contribuir al trabajo de Google de asegurarse de que las personas reciban experiencias de mayor ayuda. Y que puedan disfrutar la web.

Explican que despu√©s de ese primer anuncio han visto c√≥mo se increment√≥ en un 70 % el n√ļmero de usuarios interactuando con Lighthouse y Page Speed Insights. Ambas herramientas que Google recomienda para optimizar para los Core Web Vitals pensando en mejorar tu posicionamiento SEO.

Aparte detectaron que m√°s due√Īos de sitios web utilizan el reporte de Core Web Vitals de Google Search Console. Que permite identificar oportunidades para mejorarlos.

La se√Īal de experiencia en la p√°gina de Google combina los Core Web Vitals con las se√Īales existentes:

  • Amigable con los m√≥viles.
  • Navegaci√≥n segura.
  • Seguridad HTTPs.
  • Gu√≠as sobre avisos intersticiales.

gr√°fico de se√Īales de experiencia de la p√°gina

Otros anuncios para mayo 2021

Otro cambio que anuncian en la misma publicaci√≥n de Google, es que el contenido no-AMP podr√° ser elegible para aparecer en las Top Stories en los resultados de b√ļsqueda. Esto a partir de mayo 2020 tambi√©n.

Esto significa que cualquier página que cumpla con las políticas de Google Noticias, podrá aparecer en estas. Y le darán prioridad a las que ofrezcan una buena experiencia de página, sin importar si usan o no AMP.

Google tambi√©n anunci√≥ que probar√° un indicador visual (etiqueta) que destaque las p√°ginas en los resultados de b√ļsqueda que ofrezcan una buena experiencia a los usuarios.

Google dice: “Creemos que dar informaci√≥n acerca de la calidad de la experiencia de p√°gina de una web puede ayudar a los usuarios a escoger el resultado de b√ļsqueda que quieren visitar”.

Aclaran que en el SERPs ya los snippets y las imágenes le dan una idea al usuarios sobre de qué va la página que visitarán si hacen clic. Y que estos indicadores visuales en los resultados serían otra forma de hacer lo mismo.

Te puede interesar:  Vender servicios profesionales por internet: C√≥mo y d√≥nde

Esperan que este nuevo identificador de la calidad de la experiencia del usuario también esté listo para mayo de 2021.

¬ŅQu√© son Core Web Vitals?

Como mencionamos a principios de a√Īo Google lanz√≥ las m√©tricas web vitales. Estas permiten medir la experiencia de los usuarios en cuanto a velocidad de carga, interactividad y estabilidad visual de una p√°gina.

Las herramientas que permiten los Core Web Vitals dar√°n resultados como: bien, necesita mejoras o pobre.

Los Core Web Vitals son:

  • LCP (Largest Contentful Paint o Renderizado del mayor elemento con contenido): es el tiempo que tarda el contenido principal de una p√°gina en cargar. Una medida ideal es 2.5 segundos o m√°s r√°pido. B√°sicamente es la velocidad de carga.
  • FID (First Imput Delay o Latencia de la primera interacci√≥n): es el tiempo que tarda una p√°gina en volverse interactiva. La medida ideal ser√≠a menos de 100 milisegundos. Mide la respuesta de la web, que no se retrase nada en cargar.
  • CLS (Cumulativa Layout Shift o Cambios de dise√Īo acumulados): mide la cantidad de cambios de dise√Īo inesperado en el contenido visual de una p√°gina. Lo ideal ser√≠a menos de 0.1.

core web vitals

La idea de Google es que los due√Īos de sitios web trabajen en mejorar estos aspectos. As√≠ poder dar una mejor experiencia a los usuarios.

Google ha dado bastante tiempo. As√≠ como herramientas desde su primer anuncio para que los due√Īos de sitios web vayan adapt√°ndose a esto.

¬ŅCu√°les son las se√Īales existentes de experiencia del usuario?

Los Core Web Vitals se suman a las métricas ya existentes para medir la experiencia de los usuarios. Estas son:

  • Amigable con los m√≥viles: esta m√©trica considera cu√°n f√°cil es utilizar un navegador en dispositivos m√≥viles por un sitio web. Se toma en cuenta la legibilidad del contenido. Tambi√©n si los enlaces, botones y dem√°s elementos son f√°ciles de hacer clic y accesibles.
  • Navegaci√≥n segura: analiza si la web es segura en general. Es decir, si no tiene malwares, contenido hackeado o hace phishing.
  • Uso de HTTPs: se sabe que esto es un factor del ranking desde hace alg√ļn tiempo. Porque permite asegurarse de que la conexi√≥n de la web es segura.
  • Intersticiales no intrusivos: ve que el contenido importante de una p√°gina no est√© obstruido o sea dif√≠cil de ver mientras navegan.

Para que tu web esté lista para este cambio en el algoritmo de Google debes seguir estos consejos para mejorar tus métricas web principales.

Consejos para mejorar tus Core Web Vitals y la experiencia de p√°gina

Que no te tome por sorpresa, si quieres estar en las primeras posiciones de Google debes comenzar a trabajar siguiendo estos¬†consejos para mejorar tus Core Web Vitals. Ya sabes que ser√°n una se√Īal del ranking a partir de mayo de 2021.

La experiencia del usuario y la velocidad de carga desde hace varios a√Īos son consideradas clave para el SEO. Hemos hablado en otros post de este tema, pero para Google son cada vez m√°s importantes y debes trabajar en mejorarlos antes del pr√≥ximo a√Īo.

Utiliza las herramientas que recomienda Google

Google ha puesto a disposición una serie de herramientas y mejorado otras. Estas ayudan a medir y solucionar cualquier problema con la experiencia de página de los usuarios.

La recomendación desde el buscador es hacer primero una auditoría general de todo tu sitio. Así puedes ver qué mejorar.

Tienes muchas opciones para hacerlo. Puedes empezar por el informe de Core Web Vitals de Search Console, este te dará una mirada amplia de cómo está funcionando tu sitio y detectará cualquier problema.

Puedes complementar el uso de Search Console con Page Speed Insights y Lighthouse, son dos herramientas de Google que tienen tiempo existiendo. Pero que se han adaptado a estas nuevas métricas y te ayudan a optimizarlas. Te dicen los problemas que tienes y cómo solucionarlos.

El panel de Chrome DevTools, disponible con un clic en el navegador Chrome, también será de mucha ayuda.

Optimiza tus im√°genes

Optimizar las im√°genes es una de las primeras cosas que debes hacer para mejorar los tiempos de carga de tu sitio.

Te puede interesar:  C√≥mo afecta la tasa de rebote al SEO

Una imagen muy grande en la página de inicio o en la de aterrizaje puede ralentizar toda la carga y ser el elemento que más tarde en cargar, el LCP. Por eso, debes asegurarte de optimizarlas, para que tu web cargue rápido y dé una buena experiencia a los usuarios.

Uno de nuestros consejos para mejorar tus Core Web Vitals, espec√≠ficamente el LCP es asegurarte de que la imagen est√© en el tama√Īo que necesitas y comprimida. Hay varias herramientas que te ayudar√°n con esto, squoosh.app es de Google y es muy sencilla de utilizar.

squoosh app

Seguro estás usando los formatos de imagen más tradicionales como .jpg y .png. Pero recomendamos que empieces a probar uno más nuevo, WebP, que igual puede ofrecer gran calidad de imagen.

Google lo recomienda porque dan la opci√≥n de compresi√≥n sin y con p√©rdida de calidad. Dicen que permite crear im√°genes peque√Īas y mejores, que hacen que la web cargue m√°s r√°pido.

Este formato fue creado por Google, pero ya se ve bien en Safari y Microsoft Edge.

Otra forma de mejorar las im√°genes de tu web es a trav√©s del CMS, WordPress 5.5 permitir√° la carga lazy loading. Es decir, que solo cargar√° las im√°genes que aparecen en pantalla y deja el resto de la carga para cuando los usuarios interact√ļen con la pantalla.

Lo que le dice al navegador que cargue las im√°genes solo cuando se necesitan.

Otra manera de mejorar los tiempos de carga de tu web es usando un CDN especialmente para im√°genes.

Precarga los recursos importantes

Al hacer esto podr√°s acelerar los tiempos de carga visual. Porque uno de los principales indicadores para un usuario de que una p√°gina est√° cargando es lo que ven sin tener que desplazarse (above-the-fold).

En este punto es cuando la Core Web Vitals LCP mide cu√°n r√°pido cargan los elementos principales. Para saber cu√°les son estos elementos analiza la p√°gina con Chrome DevTolls y ver√°s un gr√°fico de cascada en la pesta√Īa Performance.

Además, con esto podrás ver cuán rápido cargan los elementos LCP. Tienes que seleccionar Screenshoots y comenzar el perfilado de la página cuando carga. Una vez que tu perfil esté completo, podrás ver un pantallazo de la página y su carga.

Lo que te permitir√° visualizar cu√°n r√°pido cargan los diferentes elementos de la p√°gina.

Para ayudar a acelerar los tiempos de carga de los elementos sobre el doblez considera usar rel=”preload” para decirle al navegador que tome esos recursos como prioridad.

pantallazo lcp

Minimiza las tareas largas

La segundo de las métricas web principales es FID o latencia de la primera interacción. Esta se refiere al tiempo que tarda una web en permitir la interacción y un retraso en esto puede causar problemas.

Si la persona tiene que hacer clic en un bot√≥n, por ejemplo, para a√Īadir un producto al carrito y no ve la respuesta al momento, le dar√° clic de nuevo. Como hubo una respuesta tard√≠a, al final se a√Īadieron dos productos.

Al suceder esto los usuarios se frustran. Pero se puede resolver al reducir los tiempos de espera entre la interacción humana y la respuesta del navegador.

Long Task es un c√≥digo JavaScript que bloquea el hilo principal para per√≠odos extendidos de tiempo. Lo que ocasiona que la interacci√≥n del usuario se “congele”. Es decir, que mientras la p√°gina carga, Long Task frena el hilo principal y hace que la p√°gina no responsa a la acci√≥n del usuario, aunque parezca listo.

Los clics o toques de pantalla a veces no funcionan porque a√ļn no se adjuntaron los detectores de eventos o controladores de clics.

Esto tambi√©n¬†puedes verlo en Chrome DevTolls, en la pesta√Īa Performance, marca con un tri√°ngulo rojo las Long Task. Si haces clic en esto y vas a la pesta√Īa Bottom-Up, te muestra diferentes actividades que ocurren en la tarea, como compilado y an√°lisis de scripts.

Resolver esto implica varias cosas, dependiendo de qu√© actividades contribuyen a estos bloqueos. Pero una soluci√≥n com√ļn es dividir el c√≥digo y servir scripts en fragmentos m√°s peque√Īos.

Te puede interesar:  Que es el DA (domain authority) y PA (page authority) en el Posicionamiento web

Tienes que mirar los scripts de terceros, sus Long Task pueden retrasar que el contenido primario se vuelva interactivo.

Divide el funcionamiento en peque√Īas partes de menos de 50 milisegundos. Y corre estas partes al momento y lugar correcto en que deben aparecer.

long task google devtolls
Fuente: https://web.dev/long-tasks-devtools/

Reserva espacios para la carga de las im√°genes

En este caso nos referimos a la optimización para mejorar la métrica de CLS, que mide la cantidad de elementos visuales de la página que se mueven mientras carga. Tienes que mejorar esto para dar una buena experiencia a los usuarios.

El problema en este sentido suele ser que la persona hace clic en un enlace, pero en ese momento la página se mueve y termina cliqueando en un área diferente. Lo que lo lleva a algo que no quería ver.

Esto igualmente puedes verlo en Chrome DevTolls en la pesta√Īa Performance.

Al optimizar para los cambios de dise√Īo acumulados, no necesariamente aceleras la p√°gina, pero haces que se sienta m√°s r√°pida. Y eso ofrece una buena experiencia.

El CLS sucede por las imágenes sin dimensiones en el CSS. También por avisos o incrustaciones sin dimensión, contenido dinámicamente inyectado en móviles. Al no tener las dimensiones, estos tienden a saltar un poco durante el proceso de carga, lo que hace que la página parezca que es inestable.

Puedes mejorar esto a√Īadiendo el ancho y largo a las im√°genes en el CSS. As√≠ el navegador reserva los espacios para las im√°genes que aparecer√°n un poco m√°s tarde que el texto.

Así se debe ver el código de tus imágenes.

<img class=”alignnone size-full wp-image-13506″ src=”pantallazo-lcp.jpg” alt=”pantallazo lcp” width=”800″ height=”419″ />

Aseg√ļrate de que tu p√°gina sea amigable con los m√≥viles

Desde hace algunos a√Īos el tr√°fico m√≥vil super√≥ al de ordenadores. Lo que hace muy importante que todos los sitios web est√©n optimizados para estos dispositivos. No se trata solo de que cargue bien, sino que la disposici√≥n de los elementos y la usabilidad ofrezca una buena experiencia.

Podrás revisar la experiencia del usuario en los móviles en el informe de Usabilidad móvil en Google Search Console y en la Prueba de optimización para móviles de Google.

prueba de optimizacion para moviles

Otro de los consejos para mejorar tus Core Web Vitals y la experiencia de p√°gina de los usuarios es seguir lo que indica este informe de Google para mejorar tu sitio.

La seguridad de tu web

Otro de los factores que Google toma en cuenta para medir la experiencia de los usuarios es la seguridad de un sitio web. El informe de Google Search Console de Problemas de Seguridad te dir√° si tu web est√° bien. Este lo encontrar√°s en Seguridad y Acciones Manuales.

La meta de Google es asegurarse de que los sitios sean seguros para los usuarios.

seguridad google search console

Los principales aspectos de seguridad a revisar son malwares, softwares no deseados, phishing y contenido enga√Īoso.

Revisa el HTTPs

Usar HTTPs es necesario para tu web. Es una se√Īal de la experiencia de p√°gina. Es otro aspecto que Google toma en cuenta para considerar que una web es segura para navegar.

Una web sin conexión segura es un riesgo para los usuarios. Hace que la data y las personas sean más vulnerables.

Es muy importante, especialmente para las tiendas online. Ya que los usuarios deben agregar sus datos para el pago.

Aseg√ļrate que tu certificado SSL est√© al d√≠a y migra todas tus URLs y recursos de p√°gina a HTTPS.

La forma m√°s f√°cil de revisar esto es visitando tu web desde Chrome. Y ver si aparece un candado al lado de la URL, esto significa que tu web tiene HTTPs.

https

No debes tener intersticiales que molesten

Otro de los aspectos para ofrecer una buena experiencia a los usuarios es que si tu web no tenga intersticiales intrusivos. Estos son elementos que se sobreponen y que impiden que las personas vean el contenido principal.

Esto puede llevar a una experiencia negativa y frustrante.

Puedes revisar esto visitando t√ļ mismo las p√°ginas de tu web desde distintos dispositivos. Tambi√©n tienes la opci√≥n de usar Chrome DevTools en Screeshots. As√≠ ves si los intersticiales molestan a los usuarios.

En general, revisa los pop-ups e intersticiales. Estos no deben obstruir el contenido importante de la p√°gina. Los usuarios no deben tener que presionar la X para cerrarlos y poder continuar su experiencia.

Estos consejos para mejorar tus Core Web Vitals y la experiencia de página te permitirán optimizar tu sitio de cara a la gran actualización del algoritmo de Google anunciada para mayo de 2021. Prepárate desde ya contratando nuestros servicios SEO, contáctanos.

Deja una Respuesta

black
black
Leer m√°s
Cómo hacer link building con los enlaces rotos de la competencia|Errores 404|Cómo pedir que enlacen a tu sitio
Cómo hacer link building con los enlaces rotos de la competencia

Conseguir backlinks de calidad es clave para que tu web escale posiciones en los motores de b√ļsqueda. Hay muchas maneras...

Cerrar