¿Cuáles son los principales elementos web vitales?

En esta publicación de blog, analizaremos cuáles son los elementos vitales de la web y por qué debería importarle. En mayo de 2020, Google anunció que comenzará a incorporar una experiencia para usar el sitio web en su algoritmo de motor de búsqueda. Esto significa que los sitios web que son más amigables con los usuarios se clasificarán anteriormente que los sitios web que son difíciles de usar. Como resultado, el instrumento de Google PageSpeed ​​Insights ha recibido algunos valores nuevos, como la pintura de contenido más grande y el cambio de la apariencia acumulativa, ambos tratando de cuantificar la experiencia del usuario. La consola de Google Webmaster también recibió una sección central de vital web. Si su sitio web no evalúa la web vitalidad, Google PageSpeed ​​le anunciará declarando:
En los últimos 30 días, los datos del campo muestran que esta página no pasa por la evaluación de vital web central. Debido a que este es un desarrollo bastante nuevo, que no ha sido bien publicitado, muchos consumidores siguen preguntando qué son los vitales de la web principales y si deberían preocuparse por ello. ¿Qué son Core Web Vitals? Core Web Vitals son parte de una iniciativa de Google más amplia titulada Vitals. Web Vitals ofrece valores esenciales para un sitio web saludable. Son una colección de mediciones que cuantifican la experiencia del usuario. Al cuantificar la experiencia del usuario de su sitio web o atribuir un número, puede diagnosticar fácilmente los problemas y mejorarlos.
El objetivo final de la iniciativa web de Vitals es proporcionar señales de calidad unificadas. Al ofrecer datos cuantificables a los desarrolladores (y propietarios por igual) que proporcionan una perspectiva sobre la experiencia del usuario de un sitio web, los sitios en su conjunto comenzarán a centrarse más en este aspecto, y los usuarios finales comenzarán a beneficiarse de las experiencias más fáciles. Al mismo tiempo, los vitales de la web están diseñados para ser fáciles de entender, fáciles de diagnosticar y fáciles de mejorar. Los vitales de la web principales son una colección de valores que le brindan una perspectiva enfocada en la experiencia del usuario. Hay tres vitales de web centrales. que son fáciles de entender y mejorar. Estos tres elementos vitales lo ayudan a medir el tiempo de carga de su sitio, la interactividad de su sitio y la estabilidad visual de su sitio. Vamos a superar cada núcleo individual vital, para discutir qué representa, la puntuación en su espalda y cómo puede mejorar cada uno.

La pintura más grande llena de contenido
El primer núcleo web vital es la pintura más grande con contenido. Si obtiene un puntaje por debajo de 2.5 segundos, está listo, y si obtiene un puntaje de más de 2.5 segundos, debe concentrarse en mejorar este valor. La pintura de contenido más grande mide cuánto tiempo dura el elemento de contenido más grande en su sitio. Publiqué un artículo de blog que se profundiza sobre cómo se mide esto, qué causa el puntaje y cómo puede mejorarlo aquí.

¿Cuál es exactamente la pintura satisfactoria más grande?
Para resumir ese elemento de blog, el elemento de contenido más grande de su sitio suele ser una imagen presentada o un gran bloque de texto (literalmente se refiere al elemento de contenido más grande). Asegurar que el elemento de contenido más grande se cargue en 2.5 segundos dará como resultado una buena puntuación para este valor. Por lo general, el elemento de contenido más grande es una imagen o un bloque de texto. Imágenes efectivas que codifican, cambiar el tamaño, la compresión y la transmisión en los formatos de próxima generación seguramente mejorarán el LCP si mide un tiempo de carga de imágenes. Si el elemento de contenido más grande es el texto, la fuente de la fuente detrás del texto aumentará su puntaje. Por ejemplo, si no precarga el ventilador, generalmente puede reducir al menos un segundo de carga agregando una etiqueta Rel = Preload. Puede averiguar cómo hacer esto leyendo este artículo: https://isotrópico.co/how-to-precoad-elementor-fonts/
Este es un valor interesante porque cambia de acuerdo con la página. Por ejemplo, en su página inicial, el elemento de contenido más grande puede ser un encabezado. Sin embargo, en una página de blog, el elemento de contenido más grande puede ser una imagen presentada. Asegurar que todas sus páginas estén optimizadas para cargar lo antes posible, dará como resultado un promedio de la pintura de contenido más grande para el sitio web. Nuevamente, desea anotar por debajo de 2.5 segundos. Nuevamente, publiqué una publicación completa de blog sobre qué mide la pintura de contenido más grande y cómo puede mejorarla aquí. Le recomendamos que lo lea si no mide el LCP (más de 4.0 segundos).
Retraso en la primera entrada La segunda red vital del segundo núcleo se llama First Entrada Retraso. El primer valor de retraso de entrada mide la interactividad de una página. Esta red vital es bastante fácil de entender, ya que mide exactamente lo que sugiere el nombre que ha llamado: el tiempo requerido desde el momento en que un usuario interactúa por primera vez con la página hasta que el navegador pueda responder a esa interacción. La interacción del usuario con la página variará, pero las interacciones más comunes son clics en los botones, clics en enlaces o acciones de JavaScript. El temporizador comienza a marcar lo que un usuario hace una interacción con la página. El cronómetro se detiene tan pronto como el navegador responde a esa interacción. Como se esperaba, esto se mide en milisegundos porque es una apariencia rápida.
Oficialmente, está diseñado para medir la primera impresión que su visitante tendrá en la velocidad de su sitio. El primer retraso de entrada es otra medición de medición específica. También es específico del usuario, porque el comportamiento cambiará entre los visitantes. Por ejemplo, un visitante puede hacer clic en un enlace como primera entrada, mientras que otro puede hacer clic en un botón como primera entrada. Esta es una medida mucho más técnica, pero su sitio web generalmente irá si tiene un buen alojamiento, reduce el impacto del código de terceros, elimina los recursos que bloquean la representación y reducen el tiempo de ejecución de JavaScript.

Acumulativo

El final de Core Web Vital se llama cambio de diseño acumulativo. El cambio acumulativo de la apariencia es la suma de todos los cambios de apariencia que aparecen en una página a lo largo de su vida útil. Al cargar una página web, el contenido puede ser reemplazado por elementos de carga más lentos. Por ejemplo, si tiene una publicación de blog con una imagen de carga lenta en el medio, una vez que se carga la imagen, presionará el texto de la publicación de blog (que se carga más rápido, porque se necesitan menos transferencias de datos) hacia arriba y hacia abajo en el página. Si su usuario lee la publicación del blog, y el contenido se reemplaza repentinamente por una imagen de carga lenta, esto da como resultado una mala experiencia, porque su lector probablemente perderá su lugar en su artículo que acabo de describir es un cambio individual. en apariencia. Estos cambios de apariencia individuales generalmente ocurren debido a la lenta carga de contenido, como imágenes, anuncios o marcos de iframe, que reemplazan el contenido que se ha cargado rápidamente (generalmente texto y botones). Hay buenos cambios de apariencia y sus cambios de apariencia. Los buenos cambios de apariencia son causados ​​por una interacción directa con el usuario. Por ejemplo, si alguien hace clic en un botón que resulta en la carga de un elemento desde arriba que presiona el contenido del blog, este buen aspecto no será considerado porque ha sido activado por un usuario.
Sin embargo, si tiene un anuncio de carga lenta que empuja el contenido hacia abajo sin la interacción del usuario, se calcula como un mal cambio en la apariencia y se incorpora a su puntaje acumulativo para cambiar el aspecto. CLS se hace cargo de todos los cambios de apariencia, los reúne y los escupe como una puntuación. La puntuación por debajo de 0.1 es buena, y cualquier cosa por encima de 0.25 es una nota de falla. Debido a que los CL pueden ser causados ​​por varios tipos de elementos, el diagnóstico y la remediación del problema no siempre es simple. Comience por incluir atributos de tamaño en sus videos e imágenes (esto le asegura que hay un lugar para cargar una imagen, de modo que incluso si es lento, no presionará el contenido precargado). Además, nunca ingrese el contenido por encima del contenido existente, a menos que sea en respuesta a una interacción de usuario. Escribí una publicación de blog completa sobre cómo cambiar el aspecto acumulativo, qué es y cómo mejorar su valor, que puede leer aquí: https: