Saltar al contenido

Elementos fundamentales de la Web – Core Web Vitals

Internet cambia constantemente. Los sitios web desde sus orígenes apenas se parecen a los que nos acompañan en la actualidad. No solo ha cambiado su apariencia y la forma de proporcionar información, sino también nuestras expectativas. Las diferencias también incluyen la forma en que se evalúa el sitio web; hoy en día no es suficiente que simplemente SI. En este contexto, debemos considerar qué son los Core Web Vitals y lo que realmente nos dicen.

Core Web Vitals: la calidad del sitio web es lo primero

Durante mucho tiempo, Google ha puesto un gran énfasis en la velocidad y la legibilidad del contenido presentado. Uno de los primeros elementos de estos cambios fue sin duda el cambio hacia los usuarios de dispositivos móviles (también conocido como “Mobilegeddon”), que en 2015 electrificó a los SEO y a los desarrolladores web. Los siguientes incluyen la necesidad de garantizar la seguridad del sitio web y sus usuarios, o SSL. Ahora se trata de la experiencia del usuario.

En mayo de 2021, la calidad de la página pasará a formar parte del algoritmo de Google y tendrá un impacto en la posición del sitio en el ranking de los motores de búsqueda. Según fuentes oficiales, la calidad del sitio web no importará más que el contenido, pero te permitirá promocionar sitios web que los transmitan de forma adaptada a las necesidades del usuario.

La calidad del sitio web se analizará en términos de varios factores mencionados anteriormente:
– adaptación a dispositivos móviles (indexación de dispositivos móviles primero para todos los sitios web a partir de marzo de 2021);
– seguridad en la navegación: sin contenido dañino y engañoso, es decir, elementos de malware y phishing;
– HTTPS;
– sin anuncios de pantalla completa que impidan el acceso al contenido del sitio web.

Además, también existe Core Web Vitals, conocido en EE. UU. Como Basic Internet Indicators. Los punteros están diseñados para ayudarlo a evaluar la experiencia del usuario de la carga y la disponibilidad de la página durante y después de la renderización.

Google enfatiza que se continuará trabajando en el método de probar la calidad del sitio web. En los próximos años, la lista de factores tenidos en cuenta ciertamente cambiará y se ampliará con nuevos puntos. Se nos informará de los cambios con antelación, el motor de búsqueda también nos dará tiempo para adaptar nuestros sitios web a los nuevos requisitos.

Indicadores básicos de Internet: examinémoslos más de cerca

Uno de los seo-temas más controvertidos es la velocidad del sitio web. En grupos de especialistas, más de una o dos veces, hemos sido testigos de largas discusiones sobre cómo una puntuación alta de PageSpeed Insights mejora la posición de una página. Es cierto que la calificación del sitio en la herramienta no se traduce directamente en la clasificación de los motores de búsqueda. Sin embargo, se sabe que un sitio web que no tenga problemas para mostrar su contenido correctamente, incluso con una conexión a Internet más débil, será bienvenido por los usuarios. Esto, a su vez, se traducirá en la duración de la visita, la voluntad de compartir el enlace y la posibilidad de lograr la conversión que establezcamos.

La investigación llevada a cabo por las herramientas que mencioné en el artículo sobre la velocidad de la página verifica elementos específicos del sitio, pero no proporciona información completa sobre la experiencia de un usuario menos. Su análisis es necesario, pero se centra en aspectos del sitio web distintos de los indicadores básicos de Internet.

Core Web Vitals nos permite definir las experiencias que experimentan los usuarios de nuestro sitio web. Los datos que permiten determinar el nivel de calidad del sitio web se recopilan en función de las visitas reales al sitio web. Gracias a esto, el comportamiento del sitio web se examina en una amplia sección transversal de casos: diferentes velocidades de conexiones de red, tamaños y capacidades tecnológicas de los dispositivos.

Core Web Vitals en la versión actual se centra en tres elementos:
– la mayor reproducción del contenido,
– retraso en la primera acción,
– desplazamiento colectivo del diseño.

Como mencioné antes, Google planea expandir su análisis de calidad de sitios web y podemos esperar que esta lista se expanda en los próximos años. Google no excluye la posibilidad de modificar los indicadores actuales, p. Ej. ampliar el alcance de la investigación.

LCP – Pintura con contenido más grande – Representación de contenido más grande

LCP determina el tiempo de renderizado del fragmento más grande de la página visible en la ventana del navegador (todo lo que vemos antes de desplazarnos). Los elementos que se tienen en cuenta son:
– gráficos,
– video,
– un elemento que contiene gráficos de fondo, descargado mediante la función url (…) en CSS,
– elementos de bloque (por ejemplo, <p>, <div>, <ul>, <ol>, <hx>, etc.).

Si el contenido de las etiquetas individuales se extiende por debajo de la línea de desplazamiento, estos fragmentos no se tienen en cuenta en el análisis. En el caso de los gráficos, el análisis se basa en el tamaño más pequeño alcanzado por el elemento. Si el gráfico se renderiza más pequeño que los valores especificados en la etiqueta durante el renderizado, su tamaño renderizado será crucial para el análisis. Cuando el gráfico se estira, el tamaño de la muestra tomada para la prueba dependerá de los valores especificados en el CSS.

¿Cómo saber qué artículo es el más grande? Las páginas web se procesan en etapas y el código HTML se lee en orden, desde la primera línea hasta la última. Por lo tanto, a medida que se procesa su sitio, el objeto marcado como «más grande» cambiará. Un fragmento dado de la página se define como la «mejor reproducción de contenido» solo cuando está completamente cargado. Nota: si el usuario mueve la pantalla mientras renderiza la página, no se tendrán en cuenta los cambios adicionales a la «pintura con contenido más grande».

¿Qué pasa con los elementos que se cargan fuera de la pantalla y solo luego aparecen en la vista del usuario? En la mayoría de los casos, estos extractos no se informarán. En la situación opuesta, cuando se renderizan dentro de la ventana gráfica y se colocan debajo de la línea de desplazamiento, aún se tendrán en cuenta y pueden incluirse en el resultado final.

Procesamiento de contenido más alto: puntuación

En PageSpeed Insight, los valores se proporcionan de dos formas:
– como porcentaje, recopilado sobre la base de los datos recopilados de los usuarios en los últimos 28 días. La LCP fue satisfactoria en el 39% de los casos,
– en segundos, según las pruebas realizadas durante la simulación de carga de la página.

PageSpeed Insights analiza los datos de la dirección especificada. Para obtener información más detallada sobre las páginas dentro de todo el dominio, es posible que desee consultar la Consola de búsqueda de Google y una de las pestañas más recientes etiquetadas como «Indicadores básicos de Internet». Hay dos informes disponibles en la página que se muestra en dispositivos móviles y en computadoras.

El informe de GSC enumera las páginas donde hay un problema con resultados deficientes de LCP. En una situación en la que la herramienta ha identificado el mismo problema en muchas subpáginas, la tabla contiene una dirección y una anotación sobre el número de páginas en las que se repite el error. Las direcciones exactas están disponibles en la vista ampliada, disponible después de hacer clic en el registro.

Puntaje deficiente de LCP: formas efectivas de mejorar

La clave para una buena puntuación LCP es la optimización de puntos que ralentizan el rendimiento del sitio web. Servidor lento, la necesidad de ejecutar código JS y CSS, que bloquea la representación adicional del sitio y la representación del lado del cliente: estas son las causas más comunes de resultados deficientes. Echemos un vistazo a una solución para los problemas más comunes: – respuesta lenta del servidor – el valor clave aquí será TTFB – Tiempo hasta el primer byte (tiempo desde el envío de la consulta hasta la recepción del primer byte de la respuesta). Se informa de una respuesta lenta, p. Ej. en PageSpeed Insights, también se puede verificar con otras herramientas de análisis de velocidad de sitios web.

La forma principal de mejorar la puntuación TTFB es optimizar el servidor y eliminar los procesos que degradan su rendimiento. Para ello, vale la pena consultar los consejos de su proveedor de alojamiento o utilizar la ayuda de un especialista.

– Bloqueo de renderizado de JavaScript y CSS: estos son los trucos que se recomiendan para la optimización de la velocidad de cada sitio web – Minificación de CSS, eliminando fragmentos no utilizados y considerando la carga asincrónica de archivos de estilo. En términos de JavaSript, la optimización será similar: minificación de archivos JS y eliminación de fragmentos no utilizados.

Optimización de otros elementos, p. Ej. La compresión de gráficos, el uso de CDN y la priorización de la carga de ciertos recursos, también pueden afectar la mejora de la puntuación LCP.

FID – Demora de la primera entrada – Demora de la primera entrada

FID se refiere a la interactividad del sitio web: define el tiempo entre la primera acción realizada por el usuario y el momento en que el navegador comienza a manejar esta acción. Se tienen en cuenta los clics (en el caso de los teléfonos móviles) y las pulsaciones de botones. La puntuación FID se centra en el análisis del tiempo de respuesta, pero no examina el tiempo de procesamiento de un evento iniciado por el usuario.

El retraso en la primera acción no siempre se medirá; algunos usuarios optan por no interactuar con la página mientras se está cargando. Curiosamente, en el caso de este indicador, el análisis se lleva a cabo solo durante el uso real del sitio web; no se llevan a cabo estudios similares durante la simulación realizada por Lighthouse.

Todos los usuarios de Internet ciertamente se han encontrado con una situación en la que inmediatamente querían mudarse a otro lugar después de ingresar al sitio web. Sin embargo, hacer clic en el vínculo o expandir el resto del texto no fue posible de inmediato: la reacción del sitio a nuestro tráfico se retrasó significativamente. ¿Por qué está pasando esto? Mientras se procesa el sitio, el navegador está ocupado manejando los archivos que componen la página. Solo después de completar este proceso puede responder al comportamiento del usuario. El tiempo de espera de la interactividad de la página se traduce directamente en la valoración subjetiva por parte del usuario y la determina como “lenta” o “rápida”.

Al describir el LCP, mencioné que HTML se carga línea por línea, entonces, ¿por qué no es posible que los fragmentos cargados estén activos antes? Algunas etiquetas, como <input>, <a> o <select>, requieren la renderización del hilo principal para cerrar. En cuanto a los otros obstáculos, la sección <head> del archivo .html generalmente contiene enlaces a recursos CSS y JS que el navegador debe analizar antes de continuar renderizando la página. De ahí las sugerencias anteriores para minimizar estos archivos (es decir, eliminar los espacios en blanco) y pasar al resto de los fragmentos de código innecesarios para representar la primera vista. En el caso de eventos que son registrados por «detectores de eventos» colocados en JS, su operación es posible solo después de que se haya ejecutado todo el código.

Retraso en la primera acción – resultado

Un resultado satisfactorio está en el rango de 0-100 ms. Por encima de este tiempo, vale la pena introducir correcciones, y por encima de 300 ms, debe hacerlo.

La información de PageSpeed Insight se basa en la entrada del usuario; en este caso, el 82% de los casos son satisfactorios.

Los datos más detallados, junto con los datos sobre direcciones específicas que necesitan mejora, se incluyen en la pestaña «Indicadores básicos de Internet» en Google Search Console.

Puntuación FID deficiente: formas efectivas de mejorar

Idealmente, las herramientas reportarían entre el 95% y el 99% de las “respuestas ecológicas”. Si nuestros resultados actuales no son tan altos todavía, hacer cambios en el sitio sin duda les hará bien.

Como en el caso de LCP, en primer lugar se recomienda optimizar el código necesario para cargar los elementos clave del sitio web y mover fragmentos con menor prioridad al resto del archivo. También vale la pena eliminar los fragmentos no utilizados y minificar.

La razón principal de los resultados de FID bajos suele ser el código JS. La optimización de archivos y la división de fragmentos individuales en lotes más pequeños ejecutados de forma asincrónica debería acelerar significativamente el proceso de renderizado y reducir el bloqueo de recursos.

El código que proviene de fuera del sitio web también afectará la velocidad de respuesta del navegador; limitarlo reducirá la cantidad de procesos realizados por el navegador.

CLS – Cambio de diseño acumulativo

La puntuación CLS es la suma de los cambios debidos a un cambio de diseño de página inesperado. El cambio cuenta cuando el elemento cambia de posición en el momento de la renderización. CLS no cuenta como elementos nuevos que aparecen en la página o que cambian el tamaño de los existentes, siempre que no provoquen el movimiento de otros componentes de la página. Al contrario de los indicadores enumerados anteriormente, CLS recopila datos durante toda la visita a la página, no en los primeros momentos de su visualización

Los saltos en el diseño de la página se crean, entre otros, cargando recursos de forma asincrónica o agregando dinámicamente elementos adicionales a la estructura DOM. Tales situaciones son notables, por ejemplo, cuando se utilizan páginas en las que se cargan gráficos sin el tamaño declarado; hacer coincidir el tamaño apropiado con el tamaño de la pantalla puede causar un cambio repentino en la apariencia de la página, lo que hace que el usuario se mueva a otra. Parte de ello.

Los recursos descargados de fuentes externas, construidos sobre la base de valores distintos de la página de destino, y el contenido personalizado, generado sin el formato adecuado, también pueden ser problemáticos aquí. El desplazamiento inesperado también puede deberse a una representación de fuente extendida.

No todos los cambios son malos, dependiendo del diseño de la página, algunas acciones del usuario provocarán cambios en el diseño original de los elementos. Es importante que este tipo de cambio esté directamente relacionado con la acción realizada.

CLS se basa en datos recopilados de los usuarios y le permite determinar la experiencia real en el sitio, que no siempre está disponible en las condiciones en las que trabaja el desarrollador del sitio web.

Resultado de compensación de diseño acumulativo

Una buena puntuación CLS está en el rango de 0-0,1. Una puntuación superior a 0,25 significa que necesita realizar cambios y mejorar la experiencia de sus usuarios. Se supone que el sitio web es estable cuando al menos el 75% de los usuarios reciben una puntuación por debajo de 0,1.

Los datos sobre el turno se pueden encontrar en PageSpeed Insights. La puntuación porcentual se basa en un análisis de los datos del usuario; en este caso, el 90% obtiene una buena puntuación. El PSI también proporciona información recopilada en condiciones de laboratorio. Se puede obtener información detallada sobre más subpáginas en Google Search Console.

Puntuación CLS baja: formas efectivas de mejorar

Se puede lograr una mejor puntuación CLS si se cumple con los estándares generales de creación de sitios web. La descripción precisa de gráficos y videos juega un papel importante aquí: agregarles atributos relacionados con el tamaño del elemento (ancho, alto y la relación de aspecto asociada con ellos) hace que sea más fácil para el navegador organizar correctamente los elementos durante la renderización, sin la necesidad de cambiar mientras se cargan partes posteriores de contenido. En el caso de gráficos agregados dinámicos, se recomienda utilizar marcadores de posición que reserven espacio para el elemento agregado posteriormente.

Desde hace algún tiempo, PageSpeed Insights ha recomendado el uso de una pantalla de fuente css, que es responsable de mantener la fuente en la página. Otra posibilidad es cargar la fuente por adelantado usando el atributo de precarga colocado en el elemento <link>. La precarga hace que los recursos seleccionados se descarguen antes de renderizar la página. Gracias a esto, el problema del tiempo de inactividad y la espera de que se carguen todos los archivos de la primera parte de la cola se elimina más adelante en la visualización de la página.

Indicadores básicos de Internet: ¡UX importa!

Si observa las soluciones que tendrán un impacto positivo en la puntuación de los indicadores individuales, es fácil ver que no son nuevas. Muchos de ellos ya fueron recomendados por Google durante las primeras versiones de PageSpeed Insights. Sin embargo, los indicadores y su entrada en el algoritmo del motor de búsqueda son una buena razón para examinar más de cerca sus sitios web y realizar cambios que facilitarán el uso de los sitios web.

Publicado enCambia palabrasParafrasearPosicionamiento de sitios webSEO