Elementos básicos de la Web ¿Qué son y cómo se pueden mejorar?

Hola miembros del movimiento de resistencia, hoy tocó a los famosos Indicadores de red básicosEste tema se ha vuelto muy popular en la comunidad de SEO. En mayo del año pasado, Google anunció que tomaría en cuenta los indicadores de rendimiento de la página al posicionar los resultados en la búsqueda de Google. De qué más debería preocuparme ...

Core Web Vitals sin 3 Google ha anunciado que habrá un nuevo índice de rendimiento que tendrá un impacto significativo en nuestro ranking SEO a corto plazo.

Cuidado con el yodo
Google anunció la actualización de Página de experiencia ¡Disponible a partir de mayo de 2021!

Si desea aprobar este breve examen, debe obtener "buenos" resultados en 3 indicadores principales de la red.

¿Cómo mides la experiencia del usuario en este momento?

Estos son los factores que Google está midiendo actualmente en nuestras páginas.

• Freír teléfono móvil: Si nuestro sitio web está optimizado para dispositivos móviles.
• Navegación segura: Ofrecemos navegación segura
• HTTPS: Implementamos https
• Sin protectores de pantalla intrusivos: Sin elementos perturbadores

Pero ahora tienes que agregar una cosa más:

¿Son realmente importantes las métricas de red?

Varias razones nos dicen que consideremos estos factores:

• Página rápida: Sé que desde hace mucho tiempo, a nadie le gustan las páginas lentas, hay informes al respecto. ExposiciónEn resumen, cuanto más rápido ganes, más dinero.
• Si el río hace ruido es porque el agua fluye: Google y Core Web Vitals han estado trabajando juntos durante mucho tiempo, no creo que haya grandes cambios a corto plazo, pero creo que su importancia aumentará a largo plazo.
• Logotipo de Google: Google advierte que pueden mostrar una insignia para una buena experiencia, más o menos como usar un candado ahora. El uso de una página segura puede o no mostrar nada, pero proporcionar un buen usuario a nuestros visitantes. La experiencia debe ser una de nuestras prioridades.

¿Qué son Core Web Vitals?

Se trata de una serie de métricas de Google que están orientadas al usuario cuando visita un sitio web. Hay varios factores como la velocidad de carga, la capacidad de respuesta y la estabilidad visual.

Estos son los factores más importantes:

• Capa superior (LCP)
• Retraso de entrada (FID)
• Desplazamiento de diseño acumulativo (CLS)

Capa superior (LCP)

La medición de dibujo máximo de contenido (LCP) comienza cuando la página se carga Elemento más grande arriba existe arrugas (El contenido que puede ver sin desplazarse hacia abajo) aparecerá en la pantalla. Este elemento puede ser una imagen, un bloque de texto o un video.

Cuando se carga la página, el bloque principal puede ser texto o la imagen puede cambiar y el bloque más nuevo se usa para medir LCP.

Supongamos que tenemos un H1 muy grande pero después de un tiempo carga una imagen que es más grande que H1, al medir LCP, la imagen más grande es el bloque principal.

Ejemplo:

Fast LCP asegura a los usuarios que la página es útil, ya que es una medida de la velocidad de carga percibida.

Ayuda al yodo
Su propósito es medir cuándo se ha cargado el contenido principal de la página.

¿Cómo juzgamos si tenemos un buen PCL?

Te mostraré cómo interpretar tus resultados:

• Bueno: <= 2,5 segundos (2,5 segundos o menos)
• Necesita mejorar:> 2,5 s <= 4 s (entre 2,5 y 4 segundos)
• Malo:> 4 s (más de 4 segundos)

¿Por qué podemos tener un LCP bajo?

tener Muchas razones Esto podría deberse a que su LCP es bajo, su servidor es lento, JavaScript y CSS están bloqueando el servicio, o sus imágenes o videos son muy grandes y requieren mucho tiempo para cargarse.

¿Qué podemos hacer para mejorar nuestro LCP?

Para mejorar nuestro LCP podemos tomar algunas medidas como optimizar la ruta crítica de Javascript y CSS y reducir la resolución de la imagen, todas están definidas en este recurso. desarrollo web.

Retraso de entrada (FID)

El primer retardo de entrada (FID) mide el tiempo (en milisegundos) desde la interacción del usuario hasta la reacción del navegador al clic. Por ejemplo, cuando cargamos una página, puede ser cuando hacemos clic en un enlace o presionamos un botón.

Podemos decir que es FID La primera impresión del usuario Comprende la interactividad y la capacidad de respuesta de nuestro sitio web.

¿Cómo sabemos si tenemos un buen FID?

Te mostraré cómo interpretar tus resultados:

• Bueno: <= 100 milisegundos
• Necesita mejorar:> 100ms y <= 300ms
• Malo:> 300 ms

¿Por qué podemos tener un FID bajo?

La razón principal puede ser que JavaScript se está ejecutando durante la navegación, ya que está muy ocupado y no puede responder de manera óptima al usuario, lo que empeora la experiencia del usuario.

¿Qué podemos hacer para mejorar nuestra FID?

Supongamos que queremos mejorar el FID y mejorar el rendimiento visual. Estas son las opciones que tenemos:

• Reducir la velocidad o eliminar a terceros
• Mover scripts no críticos
• Mejorar el rendimiento de JS

Para obtener más información sobre cómo optimizar FID, consulte este recurso. desarrollo web.

Desplazamiento de diseño acumulativo (CLS)

Desplazamiento de diseño acumulativo (CLS) en el medio del inicio Estabilidad de la interfaz de usuario, Es la suma de los cambios de diseño accidentales en el ciclo de vida de la página.

El cambio de diseño acumulativo (CLS) es un elemento vital central de la red que se utiliza para medir Todos los cambios de diseño accidente Interno Ocurre durante todo el ciclo de vida de la página. Imaginemos que el banner se carga y empuja el contenido principal de la página.

centro Informe de la interfaz de usuario de Chrome (CRUX) CLS se mide a lo largo del ciclo de vida de la página, desde el inicio de la navegación hasta el momento en que se sale, lo que dificulta su medición.

Aquí hay ejemplos que describen qué es CLS desarrollo web.

¿Cómo juzgamos si tenemos un buen CLS?

Te mostraré cómo interpretar tus resultados:

• Bueno: <= 0.1
• Necesita mejorar:> 0,1 <= 0,25
• Malo:> 0,25

¿Por qué nuestro CLS es tan bajo?

El problema podría estar en el tamaño no especificado de la imagen, otra razón podría ser la carga asincrónica de ciertos recursos u otros elementos DOM dinámicos, nuestra fuente y los anuncios no se cargan correctamente.

¿Qué podemos hacer para mejorar nuestra FID?

Para mejorar nuestro FID, como en el pasado, podemos incluir tamaño y altura en nuestras imágenes y videos para evitar cambios de diseño accidentales. También establezca el tamaño del anuncio, que es el motivo principal del cambio de diseño.Todos están definidos en este recurso. desarrollo web.

Ayuda al yodo
Si tiene más preguntas sobre Core Web Vitals, consulte este recurso. Puede ayudarlo a comprender mejor: Preguntas sobre Core Web Vitals.

Otros indicadores importantes

Aunque, como mencionamos anteriormente, actualizar la experiencia de la página ha identificado a LCP, FID y CLS como elementos clave de la red ... van a cambiar con el tiempo, pero hay otras variables que nos dan valor El valor fundamental de los comentarios.

Tiempo total de bloque (TBT)

Se puede decir que se midió el tiempo para bloquear TBT El tiempo total en que la CPU está ocupada (en milisegundos) El navegador al cargar el sitio web.

Este indicador generalmente se relaciona con el tiempo de retardo de la primera entrada del FID.

Cuando la tarea que está realizando se completa Más de 50 milisegundos se consideran largosReducir este tiempo puede mejorar la experiencia del usuario y también puede ayudar a mejorar el rendimiento percibido.

Cualquier tarea que dure más de 50 milisegundos se considera una tarea larga y un tiempo superior a 50 milisegundos se considera un "tiempo de espera".

El cálculo de TBT se realiza mediante la suma de las partes del bloque de todas las tareas largas.

• Tarea 1: tarda 65 milisegundos (15 milisegundos superan los 50 milisegundos)
• Tarea 2: tarda 78 milisegundos (28 milisegundos superan los 50 milisegundos)
• Tarea 3: tarda 90 milisegundos (40 milisegundos superan los 50 milisegundos)

TBT es el mismo: 83ms

Está buscando tareas grandes y largas en su cuenta de JavaScript y deberíamos intentar reducirlas, eliminarlas o ralentizarlas.

Tiempo total de bloqueo (TTI)

Podemos decir que el tiempo TTI mide el tiempo desde el inicio de la carga de la página hasta la carga completamente interactiva.

¿Qué es una página interactiva? Se puede decir que al mostrar contenido amigable para el usuario, se mostrarán la mayoría de los elementos.

Establecer esta métrica lo más baja posible garantizará que sus usuarios tengan una gran experiencia al intentar interactuar con su página. Con TTI y TBT podemos tener una idea aproximada de qué tan ocupado está el navegador cuando se carga nuestra página.

Si es inferior a 3,8 s, se considera bueno y debe mejorarse 7 so más.

Contenido del primer dibujo (FCP)

Sabemos que LCP mide el bloque más grande que se llama en la pantalla, FCP mide el tiempo que tarda en mostrarse parte de la pantalla.

Este indicador es importante por varias razones, la principal es que le permite al usuario saber que su navegador está funcionando correctamente y que algo le está sucediendo.

Lo hemos dado tan bien, si es menos de 1s hay que mejorar más de 3.

Herramientas para medir los signos vitales básicos de la red

Estas son las herramientas más populares para medir los indicadores clave de la red:

Google PageSpeed ​​Insight (Puede medir los indicadores clave de los sitios web página por página)

Consola de búsqueda de Google (Podemos analizar CWV en lotes)

Herramientas para desarrolladores de Chrome (Podemos analizar nuestro sitio web con más profundidad)

Faros (Muy adecuado para pruebas)

Prueba web (Otra herramienta para análisis en profundidad)