zona creativos diseño web bogotá

Cómo preparar su sitio web para la nueva actualización de Google?

Cómo preparar su sitio web para la nueva actualización de Google

Más allá de la calidad del contenido, la próxima actualización del algoritmo de Google está diseñada para clasificar los resultados de búsqueda según la experiencia del usuario percibida, incluida la capacidad de respuesta, el diseño del sitio, la seguridad y la velocidad de carga de la página.

Hemos creado este artículo para ayudar a las empresas a prepararse para el lanzamiento de la nueva actualización de Google, esperamos ayudar a los lectores de este artículo a comprender qué es la Actualización de la experiencia de página, cómo funciona Core Web Vitals y brindar consejos de mejora del sitio para cumplir con estas nuevas métricas de experiencia del usuario.

¿Cómo preparar su sitio web para la nueva actualización de Google?

Estos son los 4 aspectos más destacados.

1. ¿Qué hace que una experiencia de usuario sea excelente?

Los usuarios de hoy esperan grandes experiencias en el sitio web. Sabiendo que es más que la calidad del contenido, Google ha identificado los siguientes como elementos clave para brindar una excelente experiencia de usuario:

  • ¿Tus páginas se cargan lo suficientemente rápido? Es comúnmente sabido que las experiencias más rápidas conducen a tasas de rebote más bajas, sesiones de mayor duración, mayores conversiones e ingresos.
  • ¿Su sitio es compatible con dispositivos móviles? Más del 50 por ciento del tráfico del sitio se produce en dispositivos móviles. Si su sitio no es móvil o no responde, esto podría resultar en una mala experiencia para más de la mitad de sus usuarios.
  • ¿Su sitio proporciona la información que esperan los usuarios? Google quiere clasificar las páginas que mejor se ajusten al término de búsqueda y a la intención del usuario. ¿Los usuarios buscan información? ¿Están buscando realizar una compra? Es fundamental que su página se ajuste a la intención de búsqueda de la audiencia.

Google tiene en cuenta estos elementos con la Actualización de la experiencia de la página, que presentará una nueva señal que combina Core Web Vitals de Google con las señales de experiencia de la página existentes para proporcionar una vista completa de la calidad de la experiencia de un usuario en una página web. Esto incluye ser compatible con dispositivos móviles, una navegación segura sin contenido malicioso (o malware), HTTPS, sin intersticiales intrusivos que se interpongan en el camino. En general, ¿la página ofrece una buena experiencia de usuario?

2. Cómo funcionan los elementos fundamentales de la Web de Google

Presentado a principios de este año, Core Web Vitals mide diferentes dimensiones de la estabilidad web, como el tiempo de carga, la interactividad y la estabilidad del contenido a medida que se carga. Piense en estos como el requisito básico para el estado técnico general de su sitio web. No solo lo rápido que se carga, sino lo que es más importante, lo fácil que es para el usuario encontrar lo que busca.

El conjunto común de señales que componen los Core Web Vitals incluyen:

LCP Largest Contentful Paint

LCP mide la velocidad de carga de la página, marcando el punto en la línea de tiempo de carga de la página que se ha cargado el contenido principal de su página, solo contando los elementos que son relevantes para la experiencia del usuario, como imágenes, miniaturas de video, imágenes de fondo con CSS y otros elementos de texto como párrafos y encabezados.

Hace que su contenido útil se cargue y sea visible para el usuario lo más rápido posible, siendo el punto de referencia los primeros 2,5 segundos de la página que comienza a cargarse.

A menudo, LCP se considera la más importante de estas tres métricas fundamentales por dos razones: en primer lugar, es la más visible. En segundo lugar, si mejora la puntuación de su LCP, en muchos casos, la mayoría de las otras métricas se mejoran al mismo tiempo.

Consejos para mejorar su puntuación LCP:

  1. Minimice CSS usando Gulp o Webpack

Tanto los archivos Javascript como las hojas de estilo CSS son recursos de bloqueo de renderizado, que retrasan FCP y, en consecuencia, LCP, porque contienen espacios, sangrías o comentarios. Los humanos se benefician de ellos, pero los navegadores no los necesitan. Utilice paquetes como Gulp y Webpack para limpiar esos archivos y reducir la cantidad de CSS de bloqueo.

  1. Aplazar cualquier CSS no crítico

Utilice la herramienta coverage en Chrome para identificar CSS no utilizado en su página web. Elimine el CSS no utilizado o muévalo a otra hoja de estilo si se usa en una página separada. Por ejemplo, cree una hoja de estilo separada solo para las páginas del artículo o de la sección, pero no la cargue en la página de inicio.

  1. CSS crítico en línea

CSS crítico, Incluya contenido en la mitad de la página o superior para eliminar la necesidad de otra solicitud de ida y vuelta. Hay vídeos tutoriales que enseñan a eliminar CSS crítico.

  1. Optimizar y comprimir imágenes.

Para muchos sitios, las imágenes de héroe, los carruseles grandes o las imágenes de banner son el elemento más grande a la vista cuando una página ha terminado de cargarse. Afecta directamente a la velocidad de su LCP, comprima estas imágenes y conviértalas a un formato más nuevo, como JPEG 2000 o WebP.

FID First Input Delay

FID mide el tiempo desde que un usuario interactúa por primera vez con una página, es decir, cuando hace clic en un enlace, o toca un botón, hasta el momento en que el navegador realmente comienza a procesar los controladores de eventos en respuesta a esa interacción. O en otras palabras, lo fácil que es interactuar con la página. El tiempo ideal de FID es inferior a 100 ms.

El principal culpable de un retraso lento en la primera entrada es la ejecución intensa de JavaScript. Optimizar la forma en que se analiza y ejecuta JavaScript en su sitio web afectará directamente los tiempos de retraso de la primera entrada.

Consejos para mejorar su puntuación FID:

  1. Aplazar JavaScript no utilizado

Al igual que CSS, Javascript también bloquea el renderizado. Cuando el navegador encuentra una etiqueta de secuencia de comandos, debe pausarla, descargarla, analizarla, compilarla y ejecutarla. Solo cargue el código necesario para la página y use la herramienta de coverage en Chrome para encontrar cualquier JS no utilizado.

  1. Para scripts de terceros, cargue async o difiera

Divida el código en sus paquetes en partes más pequeñas y siempre use async o diferir para scripts que no son necesarios para su ruta crítica o contenido de la mitad superior de la página.

CLS Cumulative Layout Shift

¿Alguna vez has estado leyendo una página cuando de repente el texto se mueve y has perdido tu lugar? El culpable puede ser una imagen o un video con dimensiones desconocidas, una fuente que se muestra más grande o más pequeña que su alternativa, o un anuncio o widget de terceros que cambia de tamaño de forma dinámica.

CLS mide esta estabilidad visual y los cambios de diseño inesperados que se producen cuando los elementos visibles cambian de posición en una página. La puntuación CLS ideal es inferior a 0,1, una medida de cuánto se ha desplazado la ventana gráfica multiplicada por la distancia que se ha desplazado.

Consejos para mejorar su puntuación CLS:

  1. Incluya atributos de tamaño en imágenes y videos

Si bien especificar el ancho y el alto era una práctica antigua que se desvaneció con el diseño web responsive, los navegadores modernos establecen la relación de aspecto de la imagen predeterminada en función del ancho y el alto, por lo que es una buena práctica establecer atributos de tamaño para evitar cambios de diseño.

  1. Reserve el espacio publicitario

Los anuncios son los que más contribuyen a los cambios de diseño. La compatibilidad con tamaños de anuncios dinámicos empuja el contenido hacia abajo en la página, lo que genera una experiencia de usuario subóptima. Para evitar esto, reserve espacio para esos anuncios y modifíquelos antes de que se carguen.

  1. Nunca inserte contenido por encima del contenido existente que lo empuje hacia abajo.

Además, reserve espacio para otras incrustaciones, como videos / iframe o contenido inyectado dinámicamente, como la suscripción a un boletín emergente o la aceptación de cookies.

  1. Usa la visualización de fuentes con rel-reload

Cuando un navegador necesita una fuente de un servidor web, cualquier elemento que use esa fuente se ocultará hasta que el recurso de fuente se haya descargado por completo. La propiedad CSS de visualización de fuentes le permite controlar el comportamiento de representación de las fuentes personalizadas. Utilice la precarga en estas fuentes para tener una mayor probabilidad de encontrar la primera pintura, de modo que no haya cambios de diseño.

También vale la pena señalar que Google ha indicado que Core Web Vitals podría cambiar con el tiempo. Si bien estas no son las únicas métricas importantes para una experiencia web, cada una está centrada en el usuario y se puede medir en el campo, lo que las convierte en un excelente lugar para comenzar a mejorar su experiencia de usuario.

Herramientas y recursos

Google PageSpeed ​​Insights
Google PageSpeed ​​Insights es una de las herramientas más fáciles de usar para obtener un indicador de la experiencia del usuario de una página. Simplemente inserte su URL, haga clic en Analizar, y la herramienta de código abierto de Google, Lighthouse, escanea la página para brindar una descripción general técnica del rendimiento tanto en dispositivos móviles como en sitios web. El resultado incluye información sobre el rendimiento y recomendaciones sobre cómo mejorar la experiencia del usuario.

Extensión de Chrome de Core Web Vitals
Para métricas en tiempo real, agregue la extensión Core Web Vitals Chrome. Es una herramienta liviana que brinda retroalimentación instantánea sobre la carga, la interactividad y las métricas de cambio de diseño. Para usarlo, haga clic en el ícono Core Web Vitals Extension y aparecerá una ventana emergente con las tres métricas de Web Vitals para cualquier página en la que se encuentre.

Prepare su sitio

Si bien una buena experiencia en la página no evita tener contenido excelente y relevante, Google ha indicado que en los casos en que varias páginas brindan contenido similar, la experiencia de la página será mucho más importante para las clasificaciones de búsqueda.

Google ha notificando con seis meses de anticipación antes de que la Actualización de la experiencia de la página entre en vigencia, use este tiempo para evaluar las páginas de su sitio con respecto a Core Web Vitals y hacer los ajustes necesarios.

También te puede interesar