Guía de Métricas Web Esenciales 2022 - Aprendermarketing.es

Una experiencia de usuario de alta calidad es la clave del éxito a largo plazo de cualquier sitio web, ya sea una página de destino, una tienda o un blog informativo. Core Web Vitals le permite medir la experiencia del sitio web y encontrar oportunidades de mejora. Esto es necesario para la cómoda interacción del usuario con los sitios web. El objetivo principal es clasificar los sitios que serán convenientes para que los usuarios interactúen.

Principales métricas web de Google

Core Web Vitals es una iniciativa de Google para proporcionar pautas uniformes para evaluar el rendimiento del sitio. El hecho es que Google ha introducido muchas herramientas para compilar y medir los informes de rendimiento del sitio web. Cada solución tiene sus pros y sus contras, pero su problema común es que son difíciles de entender para un profano. Al crear Core Web Vitals, Google simplificó la tarea y permitió concentrarse en las métricas importantes. Ahora se ha vuelto más fácil para los propietarios de sitios web y los comerciantes navegar por la calidad de sus sitios.

Core Web Vitals se aplica a todas las páginas web que aparecen en las herramientas de Google. Todos ellos se basan en la experiencia de interactuar con el usuario y nos permiten sacar las conclusiones oportunas. Los indicadores son diferentes, pero ahora el foco está en tres aspectos principales:

1. Pintura con contenido más grande (LCP): mide la velocidad del sitio web: el primer Core Web Vital.
2. First Input Delay (FID) - interactividad.
3. Cambio de diseño acumulativo (CLS): estabilidad del diseño.

Un buen indicador es el 75 % para la velocidad de carga de la página web, segmentado por el tipo de dispositivos en los que se visualizan los sitios: dispositivos fijos y móviles.

Cómo mejorar las métricas web básicas

La velocidad de carga de la página era importante incluso antes de que saliera la nueva actualización de Core Web Vitals en el verano de 2021, pero ahora Google se enfoca aún más. Cuanto más rápido se carga el sitio, más conveniente es para el usuario interactuar con él. Si se "ralentiza", lo más probable es que la persona decida buscar otro recurso web para comprar un producto, solicitar un servicio o leer información. La investigación de Google lo confirma:

• El 50% de los usuarios esperan que las páginas se carguen en no más de 2 segundos. Si sube a 3 segundos, el 30% de los usuarios abandonan el sitio.
• Después de 6 segundos de tiempo de carga, la tasa de rebote llega a 100. Además, el 79% de los usuarios no volverán a visitar el portal web.

Otro dato importante es que los usuarios ven hasta un 25% más de anuncios en sitios con alta velocidad de carga, lo que repercute positivamente en los ingresos. Un segundo retraso de carga reduce las conversiones en un 7%. Podemos concluir que el marketing no funciona con sitios lentos. Según el nuevo algoritmo de búsqueda, el tiempo óptimo de respuesta de la página es de 2,5 segundos.

Para mejorar el rendimiento del sitio y mejorar las métricas web clave:

1. Aplicar complementos de almacenamiento en caché de WordPress. Esto reducirá el tiempo de procesamiento de datos, lo que significa que acelerará el sitio. Los 5 complementos principales: WP Rocket, WP Super Cache, W3 Total Cache, Batcache y WP Fastest Cache.
2. Reducir el número de solicitudes al servidor. Cuantos menos sean, más rápido funcionará el sitio.
3. Use el atributo defer para scripts JS externos. Esto permitirá que el navegador cargue el script en segundo plano y lo ejecute después de procesarlo. Esto no bloqueará la página en el proceso.
4. Cargar = "perezoso" para imágenes. Optimizar la velocidad de descarga de archivos multimedia con este método es solo una "varita mágica" con muchos elementos gráficos en el sitio.
5. Implemente el almacenamiento en caché de Nginx. Con esta herramienta, la página se genera una vez y luego el resultado se almacena en la memoria. Cuando el usuario vuelva a solicitar la misma información, se le mostrará la versión guardada. Es más rápido que volver a generar la página cada vez.
6. Recuerde HTTP/3 para encriptar todo el tráfico y señalar a los motores de búsqueda que su sitio es confiable.
   
7. Use un CDN para una transferencia de datos rápida. Además de los servidores regulares, el alojamiento de CDN en su estructura tiene servidores adicionales en los que se almacenan en caché datos individuales o incluso páginas completas. Esto le permite distribuir uniformemente la carga en los servidores con muchas solicitudes y aumentar la transferencia de la información necesaria al usuario final.
8. yo recuerdo Llamarada de la nube para sitios web de carga más rápida con tecnología CDN y mejor protección DDoS. Este último funciona de la siguiente manera: primero, la información pasa por un filtro especial de Cloudflare y luego, ya filtrada de solicitudes sospechosas, llega al sitio.
9. No se olvide de Gulp para automatizar la mayoría de los procesos de front-end.
10. Utilice el paquete web. Este generador de módulos acelerará sus soluciones de JavaScript y reducirá la cantidad de errores.
11. Separación de estilos por archivos. Esto acelerará el sitio. ¿Cómo lo haces? Cree un archivo para los estilos utilizados en cada página, por ejemplo, encabezado, pie de página, menú y texto. Luego archivos para cada página subsiguiente de tipo estilo-categoría, estilo-producto y estilo-inicio. Ahora puede vincularlos por separado en la página en la que se utilizan.

Todo lo anterior te conviene ayude a que su sitio sea más rápido, optimice Core Web Vital y sea más fácil de usar, lo que significa una mejor calidad a los "ojos" del motor de búsqueda.

Cambio de diseño acumulativo (CLS)

Cambio de diseño acumulativo analiza el cambio de diseño acumulativo. Muchos se han encontrado con una situación en la que el texto cambia y se pierde al leer. Eso no es muy agradable. CLS muestra el área de compensación como un porcentaje, por ejemplo, 10%. Si el texto se mueve más, el valor cambia al 12%.

El desplazamiento del contenido de la página se produce debido a la adición dinámica de elementos DOM sobre el contenido existente o la carga asíncrona de JS y CSS. Una causa común son los videos o imágenes con tamaños desconocidos, fuentes diferentes y widgets de cambio de tamaño de terceros. La operación del sitio puede empeorar el problema en el modo de prueba. El contenido a menudo se comporta de manera diferente que en el desarrollo porque los archivos están en el caché del navegador y las llamadas a la API se realizan localmente y son tan rápidas que el retraso no se nota.

La métrica Cumulative Layout Shift (CLS) ayuda a resolver este problema. Mide la frecuencia con la que los usuarios reales fallan. Con la ayuda de CLS, puede evaluar la experiencia general de uso del sitio y descubrir qué tan conveniente es. El trabajo del cambio de diseño acumulativo es medir la estabilidad visual de la página, ya que afecta la percepción. Cuanto menor sea la puntuación CLS, mayor será la puntuación de estabilidad visual.

Layout Shift está actualmente disponible cuando la API está habilitada. Si está utilizando Chrome 76 o posterior, use la línea de comando para ejecutar, en la que debe escribir:

--enable-blink-features=LayoutInstabilityAPI.

Especificar tamaños de bloque específicos

Para que el sitio sea fácil de usar, el contenido debe cargarse correctamente. Por ejemplo, inicializar el control deslizante lleva algún tiempo para cargar la biblioteca u otros archivos. En este sentido, el contenido cambiará constantemente, lo que no hace que el recurso sea representativo. Para evitar esto, debe crear un control deslizante simulado y luego cargar las fotos.

CLS se puede utilizar para especificar el desplazamiento del diseño (ventana de sesión). Estos son turnos individuales que ocurren en rápida sucesión con menos de un segundo entre cada turno. La duración total es de 5 segundos. En el pasado, CLS medía el número total de cambios falsos durante todo su ciclo de vida.

La actualización proporciona la máxima comodidad para el usuario. CLS no debe exceder 0.1.

Imágenes a través del atributo de carga diferida

Lazy loading es un método de carga diferida de imágenes. Esto no sucede inmediatamente con la página, sino cuando el usuario se desplaza a una foto específica (se carga automáticamente). La función se implementa en base a AJAX usando JavaScript. Es adecuado para etiquetas img e iframe. El atributo src apunta a la fuente. En la web, las imágenes ocupan menos memoria. Para descargar en este formato, debe eliminar la precarga, luego se cambiará el diseño. Puede rehacer el fondo y hacer otros ajustes. Por ejemplo:

 img src="https://www.plerdy.com/blog/core-web-vitals-guide/the-highest-mountain-in-Europe" loading="lazy" alt="beautiful mountains" width="200" height="200"

A partir de Chrome 76, el usuario puede usar la carga diferida para diapositivas y fotos sin código o usar una biblioteca de JavaScript.

La carga diferida es compatible con casi todos los navegadores populares basados ​​en Chromium, incluidos Edge, Chrome, Opera y Firefox. La implementación de Safari está en desarrollo. Los navegadores que no admiten la carga diferida lo ignoran, sin efectos secundarios.

Según el Archivo HTTP de la Web Research Community, los videos y las fotos son el contenido más solicitado para la mayoría de los recursos. En promedio, los sitios web envían alrededor de 4,7 MB de información a dispositivos móviles y computadoras, por lo que la carga lenta es importante. Se hace de dos formas:

1. API de observador de intersecciones.
2. Procesamiento con redimensionamiento, orientación y otros parámetros.

Ambas opciones incluyen una función de carga retrasada. Los desarrolladores han creado bibliotecas de terceros para una mejor usabilidad. Pero dado que el navegador admite la carga diferida, no son necesarios. Incluso si JavaScript está deshabilitado, la carga diferida funciona.

Eliminar Ajax y cargar usando JavaScript

JavaScript afecta el rendimiento y el tráfico de un recurso web. Casi nadie quiere permanecer en una página que tarda una eternidad en cargarse. El sitio debe funcionar correctamente para garantizar que el lenguaje dinámico no lo ralentice.

JavaScript de terceros se refiere a scripts generados (servidos por servidores de terceros) y se utiliza para varios propósitos:

Consejos útiles para mejorar el rendimiento de JavaScript (métricas web básicas):

1. Utilice mecanismos de almacenamiento en caché del navegador. Hay dos opciones: API de caché de JavaScript o caché HTTP simple.
2. Optimice su código para el entorno en el que se ejecutará.
3. Eliminar el código JS no utilizado.
4. Usa la memoria con moderación.
5. Use un mecanismo de carga diferida para secuencias de comandos secundarias.
6. Para cálculos pesados, use trabajadores web.
7. Si el elemento DOM se usa varias veces, almacene la referencia en una variable.
8. Limite las variables globales a mínimo.
9. Compruebe el rendimiento de la aplicación.
10. Para JavaScript, use optimizaciones de código que sean apropiadas para programas en otros idiomas.

Es importante encontrar un equilibrio entre la legibilidad y la optimización del código. Debe ser comprensible para los humanos y los motores de búsqueda.

Usar devtools en la implementación.

El panel de rendimiento muestra la ejecución del código JavaScript, la carga de la memoria y la línea de tiempo del uso de la red. El usuario tiene acceso a datos sobre la ejecución del código y el ciclo de vida de la página. El rendimiento le permite analizar la ejecución de partes individuales del código, seleccionar un momento específico y ver qué procesos se estaban ejecutando en ese momento.

Habilidades especiales:

• Análisis de eventos que ocurrieron después de que se cargó la página.
• Ver FPS, carga de CPU y descripción general de las solicitudes de red.
• Para ver los detalles, haga clic en el iris del evento.
• Reescalado de la línea de tiempo, facilitando el análisis.

Es importante asegurarse de que los componentes de la página cargados permanezcan en su lugar durante la descarga.

Tabla de códigos para el navegador Chrome:

1. Vaya al panel Red.
2. Active "Vista de aplicaciones" y seleccione el modo de pantalla completa.
3. Para abrir DevTools, haga clic en la combinación: Control + Shift + J (o Comando + Opción + J en una Mac).
4. Haga clic en la pestaña Red y vuelva a cargar la página.

El panel Cuadrícula muestra los activos cargados por la navegación inicial.

Conexión de Google con la actualización de la experiencia del usuario de 2022

Para entender cómo funcionan las actualizaciones de Google para 2022, utilicemos la información de un video de Dan Taylor, jefe de la Agencia Salt del Reino Unido. La experiencia del usuario incluye muchos factores: usabilidad, navegación, velocidad de carga de la página, disponibilidad del contenido y mucho más para Core Web Vitals.

Gracias a las actualizaciones de 2022, Google quiere ganarse a los usuarios aún más que antes. La idea es lograr que las personas regresen al motor de búsqueda con más frecuencia, realicen búsquedas posteriores y lean y hagan clic en los enlaces patrocinados en Google.

Antes de que naciera JavaScript, el algoritmo de Google era bastante simple: indexaba una página, la rastreaba y la calificaba. Ahora hay un proceso de renderizado, es decir, un mecanismo de escaneo secundario. Las clasificaciones se basan en mecanismos de puntuación anteriores. En la representación web, es importante tener en cuenta el contenido del sitio, el diseño y la cantidad de anuncios emergentes. La página debe estar bien optimizada y llena de contenido premium.

Resumen - Métricas web básicas

Los desarrolladores front-end, los desarrolladores back-end y los especialistas en SEO deben monitorear regularmente las métricas de Core Web Vitals utilizando las herramientas mencionadas en este artículo. Si encuentra un rendimiento deficiente, debe realizar cambios de inmediato. Todo esto ayudará al sitio a mantener las posiciones de liderazgo en los resultados de búsqueda.