Categories
Core Web Vitals

¿Cuál es la pintura contenta más grande: una explicación fácil?

La pintura contenta más grande (LCP) es una métrica de experiencia de usuario que se convirtió en un factor de clasificación en 2021.

Esta guía explica qué es el LCP y cómo lograr las mejores puntuaciones.

Qué ¿Es la pintura contenta más grande?

LCP es una medida de cuánto tiempo lleva el contenido principal de una página que se descarga y esté listo para interactuar con.

Lo que se mide es la imagen más grande o bloque de contexto dentro de la ventana de usuario. Cualquier cosa que se extiende más allá de la pantalla no cuenta.

Los elementos típicos medidos son imágenes, imágenes de carteles de video, imágenes de fondo y elementos de texto de nivel de bloque, como etiquetas de párrafos.

¿Por qué se mide LCP?

LCP se eligió como una métrica clave para la puntuación de los vitales web del núcleo porque mide con precisión la rapidez con que una página web puedeser utilizado.

Además, es fácil de medir y optimizar para.

Elementos de nivel de bloque utilizados para calcular el puntaje LCP

elementos de nivel de bloques utilizados para calcular el El puntaje de pintura contento más grande puede ser el

y

elementos, así como el encabezado, div, elementos de forma.

AnuncioContinue Lectura a continuación

Se pueden usar cualquier elemento HTML de nivel de bloque que contenga elementos de texto, Mientras sea el más grande.

No se utilizan todos los elementos. Por ejemplo, los elementos SVG y video no se utilizan actualmente para calcular la pintura con contenga más grande.

LCP es una métrica fácil de entender porque todo lo que tiene que hacer es ver su página web y determinar cuál es el bloque de texto más grande o la imagen es y luego lo optimiza haciéndolo más pequeño o quitando cualquierLo que le impediría descargar rápidamente. Debido a que Google incluye la mayoría de los sitios en el

Primer índice móvil

, es mejor optimizar la ventana móvil primero, luego el escritorio.

El retraso de los elementos grandes podría no ayudar

a veces, una página web se procesará en partes. Una imagen de gran tamaño podría tardar más en descargarse que el elemento de nivel de bloques de texto más grande.

Lo que sucede, en este caso, es que una actuación está registrada para el nivel de bloques de texto más grande. elemento.

, pero cuando la imagen destacada en la parte superior de la pantalla se carga, si ese elemento toma más de la pantalla del usuario (su ventana electrónica), entonces se informará otro objeto

de rendimiento

. esa imagen.

advertisementcontinue leyendo a continuación

Las imágenes pueden ser tRicky para las puntuaciones LCP

Publishers web Sube comúnmente

imágenes

a su tamaño original y luego use HTML o CSS para cambiar el tamaño de la imagen para mostrar a un tamaño más pequeño.

El original El tamaño es lo que Google se refiere a como el tamaño “intrínseco” de la imagen.

Si un editor carga una imagen de 2048 píxeles de ancho y 1152 píxeles de altura, que 2048 x 1152 altura y ancho se consideran la “intrínseca “Tamaño.

Ahora, si el editor cambia el tamaño de la imagen de 2048 x 1152 píxeles a 640 x 360 píxeles, la imagen del tamaño de 640 × 360 se llama tamaño visible.

A los efectos del calculador. El tamaño de la imagen, Google usa el tamaño más pequeño entre las imágenes de tamaño intrínsecas y visibles.

Nota Acerca de los tamaños de imágenes

Es posible lograr un alto contenido más grande.l Puntaje de pintura con una gran imagen de tamaño intrínseco que se redimensiona con HTML o CSS para ser más pequeños.

Pero es una práctica mejor para hacer que el tamaño intrínseco de la imagen coincida con el tamaño visible.

La imagen descargará más rápido y su puntaje de pintura con contento más grande subirá. Cómo se desempeñan las imágenes de asas de LCP de otro dominio

Las imágenes que se sirven de otro dominio, como de un CDN, generalmente no se cuentan En el mayor cálculo de pintura contento.

Los editores que desean tener esos recursos formar parte de la necesidad de establecer lo que se llama un encabezado de Origen-Permiso de tiempo.

Agregando este encabezado a su El sitio puede ser complicado porque si usa un comodín (*) en la configuración, podría abrir su sitio hasta los eventos de piratería.

para hacerCorrectamente, tendría que agregar un dominio que sea específico de la Crawler de Google para que lo incluya para que pueda ver la información de tiempo de su

CDN

.

Por lo tanto, en este punto, los recursos (Al igual que las imágenes) que se cargan de otro dominio (como de un CDN) no se contarán como parte del cálculo del LCP. Cuidado con estos marcadores “Gotchas” todos los elementos que están en La pantalla del usuario (la ventana gráfica) se utiliza para calcular LCP. Eso significa que las imágenes que se hacen fuera de la pantalla y luego se desplazan a la distribución una vez que se prestan, pueden no contar como parte de la puntuación de pintura contenta más grande.

AnuncioContinue leyendo a continuación

en el extremo opuesto, elementos que comienzan En la ventana Compartimiento de usuario y luego se alejó de la pantalla, se puede contar como parte de THE Cálculo de LCP.

Cómo obtener el puntaje LCP

Hay dos tipos de herramientas de puntuación. El primero se llama

Herramientas de campo,

y la segunda se denominan

Herramientas de laboratorio

.

Las herramientas de campo son medidas reales de un sitio.

Las herramientas de laboratorio proporcionan un puntaje virtual basado en un rastreo simulado utilizando algoritmos que se aproximan a las condiciones de Internet que un usuario típico en un teléfono móvil puede encontrar.

Cómo optimizar la pintura más grande

Hay tres Áreas principales para optimizar (más una más para los marcos de JavaScript):

Servidores lentos. Bloqueo lento. JavaScript y CSS.SSSSLOW Tiempos de carga de recursos.

Un servidor lento puede ser un problema con los niveles de DDOS de piratería y tráfico de raspadores en un host compartido o VPS. Puede encontrar alivio instalando un

Plugin de WordPress

como WordFence Para averiguar si está experimentando un ataque masivo y luego bloquee.

AnunciCementContinue Lectura a continuación

Otros problemas podrían ser la mala configuración de un servidor o VPS dedicados. Un problema típico puede ser la cantidad de memoria asignada a PHP.

Otro problema podría ser un software desactualizado como una versión anterior de PHP o un software CMS que está desactualizado.

El peor escenario es un Servidor compartido con múltiples usuarios que están desacelerando su caja. En ese caso, pasar a un host mejor es la respuesta.

Normalmente, aplicando correcciones, como agregar almacenamiento en caché, optimizar las imágenes, la fijación de CSS de bloqueo de procesamiento y JavaScript, y la precaución de ciertos activos puede ayudar.

Google tiene una punta limpia para tratar con CSS que no es esencial para la representaciónLo que el usuario ve:

“Retire cualquier CSS no utilizado en su totalidad o muévelo a otra hoja de estilo si se usa en una página separada de su sitio. Para cualquier CSS no es necesario para la representación inicial , use LoadCSS para cargar archivos de forma asíncrona, lo que aprovecha rel = “precarga” y en la carga.

Herramientas de campo para la puntuación LCP

Listas de Google Tres herramientas de campo: AnunciCementContinue Reading a continuación PageSpeed ​​Insights . Consola de búsqueda (Informe de Vitales Web Core).

Informe de experiencia de usuario de Chrome

.

El último Un informe de experiencia de usuario de Chrome: requiere una cuenta de Google y un proyecto de Google Cloud. Los dos primeros son más sencillos.

Herramientas de laboratorio para la puntuación LCP Las mediciones de laboratorio son puntuaciones simuladas.

Google recomienda el seguimientog Herramientas: Chrome DevTools

.

Faro . webpagetest.org

.


Las dos primeras herramientas son proporcionadas por Google. La tercera herramienta es proporcionada por un tercero. Citas

Cómo optimizar para LCP ¿Qué es LCP? Ataques de tiempo y el encabezado de tiempo-Permitir-Origen advertisementContinue Lectura a continuación Crédito de la imagen destacado: Paulo Bibitá

Categories
Core Web Vitals

Cambio de diseño acumulado – Descripción general de 2021 Factor de ranking de Google

Cambio de diseño acumulativo (CLS) es una métrica de Google que mide un evento de experiencia de usuario y se convirtió en un factor de clasificación en 2021.

Eso significa que es importante entender lo que es CLS y cómo optimizarlo.

Definición de cambio de diseño acumulativo

¿Qué es el cambio de diseño acumulativo?

CLS es el cambio inesperado de elementos de la página web, mientras que la página aún está descargando. Los tipos de elementos que tienden a causar cambios son fuentes, imágenes, videos, formularios de contacto, botones y otros tipos de contenido.

Minimización de CLS es importante porque las páginas que cambian alrededor pueden causar una experiencia de usuario deficiente.

Una puntuación de POOR CLS es indicativa de los problemas de codificación que se pueden resolver.

AnuncioContinue leyendo a continuación

Por lo que CLS ocurre

según Google,Hay cinco razones por las cuales ocurre las razones por las cuales ocurre las imágenes de la disposición acumulada:

imágenes sin dimensiones.ads, incrustas y iframes sin dimensiones. Contenido inyectado digimalmente. Fuentes de tela que causan foit / fout.acciones que esperan una respuesta de red antes de actualizar la Red.

Las imágenes y los videos deben tener las dimensiones de altura y anchura declaradas en el HTML. Con respecto a las imágenes receptivas, asegúrese de que los diferentes tamaños de imágenes para las diferentes viejas utilicen la misma relación de aspecto.

AnunciCementContinue Reading a continuación

Google recomienda utilizar Aspectratiocalculculator.com para calcular los índices de aspecto. Es un buen recurso.

Los anuncios pueden causar CLS

Este es un poco complicado para tratar. Una forma de lidiar con los anuncios que causan que CLS es diseñar el elemento donde el anuncio va a mostrar.

Por ejemplo, si está al estilo DIV para tener una altura y anchura específicos, el anuncio se limitará a aquellos.

Hay dos soluciones si hay una falta de inventario y un anuncio. no se presenta.

Si un elemento que contiene un anuncio no muestra un anuncio, puede configurarlo para que se use un anuncio de banner alternativo o una imagen de posición de posición para llenar el espacio.

Alternativamente, para algunos diseños donde un anuncio llena una fila completa en la parte superior de la parte superior de quizás una columna en el canal derecho o izquierdo de una página web, si la página no aparece, no habrá un turno. No hará una diferencia en el móvil o en el escritorio. Pero eso depende del diseño del tema.

Tendrá que probarlo si el inventario de anuncios es un problema.

Contenido inyectado dinámicamente

Este es contenido que yos inyectado en la página web.

Por ejemplo, en WordPress, puede enlazar a un video de YouTube o un Tweet y WordPress mostrarán el video o el Tweet como un objeto incrustado.

AnunciCementContinue leyendo a continuación

Fuentes basadas en la web

Las fuentes web descargadas pueden causar lo que se conoce como flash de texto invisible (foit) y flash de texto sin ajustar (FOUT).

Una forma de prevenir que es usar rel = “Precarga” en el enlace para descargar esa fuente web.

El faro puede ayudarlo a diagnosticar lo que está causando CLS.

CLS puede escabullirse durante el desarrollo

Cambio de diseño acumulado puede Deslice durante la etapa de desarrollo. Lo que puede suceder es que muchos de los activos necesarios para representar la página se cargan en el caché de un navegador.

La próxima vez que un desarrollador o editorEs la página en desarrollo, no notarán un cambio de diseño porque los elementos de la página ya están descargados.

AnunciCementContinue Lectura a continuación

Es por eso que es útil tener una medida en el laboratorio o en el campo.

Cómo se calcula el cambio de diseño acumulativo

El cálculo implica dos métricas / eventos. La primera se llama fracción de impacto.

Fracción de impacto

Fracción de impacto es una medición de la cantidad de espacio que un elemento inestable toma en la ventana.

Una viewport es lo que usted Ver en la pantalla móvil.

Cuando un elemento descarga y luego cambia, el espacio total que ocupó el elemento, desde la ubicación que ocupó en la ventana electrónica cuando se prestó primero en la ubicación final cuando se presenta la página .

PUBLICIDADContinúe leyendo a continuación

El ejemplo que usa Google es un elemento que ocupa el 50% de la ventana gráfica y luego se reduce en otro 25%.

Cuando se agrega juntos, el valor del 75% se llama la fracción de impacto y Se expresa como una puntuación de 0.75.

Fracción de distancia

La segunda medición se llama la fracción de distancia. La fracción de distancia es la cantidad de espacio que el elemento de página se ha movido de la posición original a la posición final.

En el ejemplo anterior, el elemento de la página se movió 25%.

Así que ahora el La puntuación de diseño acumulativo se calcula multiplicando la fracción de impacto por la fracción de distancia:

0.75 x 0.25 = 0.1875

Hay algunas matemáticas más y otras consideraciones que entran en el cálculo. . Lo que es importante para tomarDe lejos de esto, es que la puntuación es una forma de medir un factor de experiencia de usuario importante.

AnuncioContinue Lectura a continuación

Cómo medir CLS

Hay dos formas de medir a CLS. Google llama la primera forma en el laboratorio. La segunda forma se llama en el campo.

En el laboratorio significa simular un usuario real que descarga una página web. Google utiliza un MOTO G4 simulado para generar la puntuación CLS

dentro del entorno de Lab.

Las herramientas de laboratorio son las mejores para comprender cómo se puede realizar un diseño antes de presionarla a los usuarios. Le brinda a los editores la oportunidad de probar un diseño para problemas

.

Herramientas de laboratorio Consisten en Herramientas de desarrollo de cromo y

Faro

.

Comprenda el cambio de diseño acumulativo

Es importante para el UNDECambio de diseño acumulado resistido. No es necesario entender cómo hacer los cálculos usted mismo.

AnuncioContinue leyendo a continuación


Pero entendiendo lo que significa y cómo funciona es clave, ya que ahora se ha convertido en parte del factor de clasificación de los vitales web del núcleo.

Crédito de la imagen destacado: Paulo Bipa

Categories
Core Web Vitals

Primer retraso de entrada: una explicación simple – Búsqueda Diario de motores

El primer retraso de entrada (FID) es una métrica de experiencia de usuario que Google utiliza como un factor de menor rango.

Este artículo ofrece una visión general de FID para ayudar a dar sentido al tema.

El primer retraso de entrada es más que tratar de complacer a Google. Las mejoras en el rendimiento del sitio generalmente conducen a un aumento de las ventas, los ingresos por AD y los clientes potenciales.

¿Qué es el primer retraso de entrada?

FID es la medición del tiempo que lleva a un navegador para responder a una El visitante del sitio primera interacción con el sitio mientras se carga el sitio. Esto a veces se llama latencia de entrada.

Una interacción puede tocarse un botón, un enlace o una tecla, y la respuesta dada en respuesta. Las áreas de entrada de texto, desplegaciones y casillas de verificación son otros tipos de puntos de interacción que fid wMida.

El desplazamiento o el zoom no cuentan como interacciones porque no se espera una respuesta del propio sitio.

El objetivo de FID es medir la sensación de que es un sitio mientras está cargando.

AnuncioContinue Lectura a continuación

La causa del primer retardo de entrada

El primer retardo de entrada es generalmente causado por imágenes y scripts que se descargan de manera no ordenada.

Esta codificación desordenada causa el Página web Descargar para pausar excesivamente, luego comenzar, luego pausar. Esto causa un comportamiento que no responde para los visitantes del sitio que intentan interactuar con la página web.

Es como un atasco de tráfico causado por un libre para todos donde no hay señales de tráfico. La fijación se trata de traer el orden al tráfico.

Google describe la causa de la CAUSA DE ENTRADAY Así:

“En general, la demora de entrada (aka la latencia de entrada) ocurre porque el hilo principal del navegador está ocupado haciendo otra cosa, por lo que no puede (aún) responder a la usuario.

Una razón común que esto podría suceder es que el navegador está ocupado analizando y ejecutando un archivo de Javascript grande cargado por su aplicación.

Mientras está haciendo eso, no puede ejecutar ningún oyente de eventos Debido a que la carga de JavaScript puede decirle que haga algo más “.

AnuncioContinue Lectura a continuación

Cómo solucionar la latencia de entrada

Dado que la causa raíz del primer retraso de entrada es la descarga desorganizada de Los scripts y las imágenes, la forma de solucionar el problema es traer sobrependencia sobre cómo esos scripts e imágenes se presentan al navegador para descargar.

Solucionando el PROBLEM de FID generalmente consiste en usar los atributos HTML para controlar la descarga de los scripts, optimizando imágenes (el HTML y las imágenes), y omitiendo cuidadosamente los scripts innecesarios.

El objetivo es optimizar lo que se descarga para eliminar la pausa típica. -En inicio de la descarga de páginas web no organizadas.

Por qué los navegadores se vuelven insensibles

Los navegadores son software que completan las tareas para mostrar una página web. Las tareas consisten en la descarga de códigos, imágenes, fuentes, información de estilo y scripts, y luego ejecutando (ejecutando) los scripts y construyendo la página web de acuerdo con las instrucciones HTML.

Este proceso se llama representación. La palabra renderice significa “hacer”, y eso es lo que hace un navegador ensamblando el código y las imágenes para representar una página web.

El individuo reLas tareas de Ndering se llaman hilos, cortos para “Hilo de ejecución”. Esto significa una secuencia individual de acción (en este caso, las muchas tareas individuales se realizan para representar una página web).

En un navegador, hay un hilo llamado el hilo principal y es responsable de la creación (representación ) la página web que ve un visitante del sitio.

El hilo principal se puede visualizar como una autopista en la que los automóviles son simbólicos de las imágenes y scripts que están descargando y ejecutando cuando una persona visita un sitio web.

Algún código es grande y lento. Esto hace que las otras tareas detengan y esperen a que el código grande y lento salga de la autopista (termine de descarga y ejecución).

El objetivo es codificar la página web de una manera que optimiza qué código se descarga. Primero y cuando el código es EXE.Cuted, de manera ordenada, de modo que la página web se descarga de la manera más rápida posible.

No pierdas el sueño sobre el código de terceros

cuando se trata de los vitales web de núcleo y especialmente Con el primer retraso en la entrada, encontrará que hay algún código sobre usted, simplemente no puede hacer mucho. Sin embargo, es probable que esto sea el caso de sus competidores, también.

AnunciCementContinue Lectura a continuación Por ejemplo, si su negocio depende de Google AdSense (un gran script de bloqueo de render), el problema va a ser Lo mismo para su competidor. Soluciones como Carga perezosa con Google Administrador de anuncios

puede ayudar.

En algunos casos, puede ser suficiente para hacer lo mejor que pueda, ya que sus competidores tampoco pueden hacer nada mejor.

En esos casos, es mejor llevar tus victorias dondePuedes encontrarlos. No sude las pérdidas donde no puede hacer un cambio.

JavaScript Impact en el primer retardo de entrada

Javascript es como un pequeño motor que hace que las cosas sucedan. Cuando se ingresa un nombre en un formulario, Javascript puede estar allí para asegurarse de que se ingrese el nombre y apellido.

Cuando se presiona un botón, Javascript puede estar allí para decirle al navegador que genere un agradecimiento. Mensaje en una ventana emergente.

El problema con JavaScript es que no solo tiene que descargarlo, sino que también tiene que ejecutar (Ejecutar). Por lo tanto, esas son dos cosas que contribuyen a la latencia de entrada.

AnunciCementContinue Reading a continuación

Si un archivo de Javascript grande se encuentra cerca de la parte superior de la página, ese archivo va a bloquear el resto de la página debajo de la representación ( volviéndose visible e interactivo) until Ese script ha terminado de descargar y ejecutar.

Esto se llama bloqueando la página.

La solución obvia es reubicar este tipo de scripts desde la parte superior de la página. y póngalos en la parte inferior para que no interfieran con todos los demás elementos de la página que están esperando para representar

, pero esto puede ser un problema si, por ejemplo, se coloca al final de un largo. Página web.

Esto se debe a que una vez que se carga la página grande y el usuario está listo para interactuar con él, el navegador seguirá señalando que se está descargando (porque el archivo Big Javascript se está rezagando al final) . La página puede descargar más rápido, pero luego se detiene mientras está esperando que el JavaScript se ejecute.

¡Hay una solución para eso!

AnunciCementContinue leyendo a continuación

dLos atributos de Efer y Async

Los atributos HTML de diferenciador y ASYNC son como las señales de tráfico que controlan el inicio y la parada de cómo se descarga y ejecuta JavaScript.

Un atributo HTML es algo que transforma un elemento HTML, Al igual que ampliar el propósito o comportamiento del elemento.

Es como cuando aprendes una habilidad; Esa habilidad se convierte en un atributo de quién eres.

En este caso, los atributos de diferencias y ASYNC le dicen al navegador que no bloquee el análisis de HTML mientras se descarga. Estos atributos le dicen al navegador que mantenga el subproceso principal mientras se descarga JavaScript.

Attributo de Async

Los archivos JavaScript con el atributo ASYNC se descargarán y luego se ejecutará tan pronto Como se descarga. Cuando comienza a ejecutar es el punto At El archivo JavaScript bloquea el hilo principal.

Normalmente, el archivo bloquearía el hilo principal cuando comienza a descargarse. Pero no con el atributo ASYNC (o DEFER).

Esto se denomina descarga asíncrona, donde se descarga independientemente del hilo principal y en paralelo con él. AnunciCementContinue leyendo a continuación

El atributo de ASYNC es útil para los archivos de JavaScript de terceros, como la publicidad y el intercambio social, los archivos donde el orden de ejecución no importa.

Atributo de diferencia

archivos JavaScript con el

DEFER

“El atributo también descargará de manera asíncrona.

Pero el archivo de JavaScript diferido no se ejecutará hasta que se descargue y se vuelva a realizar toda la página. Los scripts diferidos también se ejecutan en el orden en queLos Ey están ubicados en una página web.

Los scripts con el atributo de diferenciador son útiles para los archivos de JavaScript que dependen de los elementos de la página que se están cargando y cuando el orden en que se ejecutan.

en general, use El atributo de diferencia para los scripts que no son esenciales para la representación de la página en sí misma.

La latencia de entrada es diferente para todos los usuarios

Es importante tener en cuenta que las primeras puntuaciones de retardo de entrada son variables y inconsistente. Las puntuaciones varían de visitantes a visitante.

Esta variación en las puntuaciones es inevitable porque la puntuación depende de las interacciones que son particulares para el individuo que visitan un sitio.

AnuncioContinue leyendo a continuación

Algunos visitantes podrían distraerse y no interactuar hasta un momento en el que todos los activos estén cargados y listos para estar enTeractado con.

Así es como lo describe Google:

“No todos los usuarios interactuarán con su sitio cada vez que visiten. Y no todas las interacciones son relevantes para fid … “

Además, las primeras interacciones de algunas usuarios estarán en malos tiempos (cuando el hilo principal esté ocupado durante un período prolongado de tiempo), y las primeras interacciones de los usuarios Estar en los buenos tiempos (cuando el hilo principal esté completamente inactivo).

Esto significa que algunos usuarios no tendrán valores de FID, algunos usuarios tendrán valores bajos de FID, y algunos usuarios probablemente tendrán valores de FID de alta “.

Por lo que la mayoría de los sitios fallan FID

Desafortunadamente, muchos sistemas de gestión de contenido, temas y complementos no se construyeron para cumplir con esta métrica relativamente nueva.

Este es el Razón por qué tantos editores son dism.yed para descubrir que sus sitios no pasan la primera prueba de retraso de entrada.

AnunciCementContinue Lectura a continuación

Pero eso está cambiando a medida que la comunidad de desarrollo de software web responde a las demandas de diferentes estándares de codificación de la comunidad editorial.

Y no es que los desarrolladores de software que realicen los sistemas de gestión de contenido tengan la culpa de producir productos que no se encuentren en contra de estas métricas.

Por ejemplo, WordPress abordó una deficiencia en el Editor de sitios web de Gutenberg que estaba causando Para anotar menos bien de lo que pudo.

Gutenberg es una forma visual de construir sitios utilizando la interfaz o la metáfora de los bloques. Hay un bloque de widgets, un bloque de formulario de contacto y un bloque de pie de página, etc.

para que el proceso de creación de una página web sea más visual y dUna a través de la metáfora de los bloques de construcción, construyendo literalmente una página con diferentes bloques.

Hay diferentes tipos de bloques que se ven y se comportan de diferentes maneras. Cada bloque individual tiene un código de estilo correspondiente (CSS), con gran parte de que es específico y único a ese bloque individual.

La forma estándar de codificar estos estilos es crear una hoja de estilo que contenga los estilos que son únicos a cada bloque. Tiene sentido hacerlo de esta manera porque tiene una ubicación central donde existe todo el código específico para los bloques.

AnunciCementContinue Lectura a continuación

El resultado es que en una página que podría consistir en (digamos) veinte bloques, WordPress cargaría los estilos para aquellos bloques más todos los otros bloques que no se están utilizando.

Antes de Core Web VTUTALS (CWV), que se consideró la forma estándar de empaquetar CSS.

Dado que la introducción de los vitales web de núcleo, que la práctica se considera un código hinchado.

Esto no está significado como un leve Contra los desarrolladores de WordPress. Hicieron un trabajo fantástico.

Este es solo un reflejo de la forma en que los cambios que cambian rápidamente pueden alcanzar un cuello de botella en la etapa de desarrollo de software antes de integrarse en el ecosistema de codificación.

Pasamos por lo mismo. Cosa con la transición al primer diseño web.

Gutenberg 10.1 Rendimiento mejorado

WordPress

Gutenberg 10.1 introdujo una forma mejorada de cargar los estilos

solo cargando los estilos que se necesitaron y no cargar los estilos de bloque que no se utilizaron.

Esta es una gran victoria para el woRdpress, los editores que confían en WordPress, y, por supuesto, los usuarios que visitan los sitios creados con WordPress.

AnunciCementContinue Lectura a continuación

Tiempo para solucionar el primer retraso de entrada es ahora . Espere que cada vez más desarrolladores de software responsables del CMS, los temas y los complementos pasarán a las primeras prácticas de codificación amigables con el retardo de la entrada.

, pero hasta que suceda, la carga está en el editor para mejorar los pasos para mejorar primero Retraso de entrada. Entendiendo que es el primer paso. Citas

Informe de experiencia de usuario cromado

PageSpeed ​​Insights

Faro de Herramientas de Chrome Dev

Consola de búsqueda de Google (Informe de Vitales Web del núcleo)

Optimice el primer retardo de entrada

Primer retardo de entrada Métricas de rendimiento centradas por el usuario Script GitHub para medir los vitales web de núcleo

Categories
Core Web Vitals

Cómo puedes medir los vitales web principales

Google ha definido un conjunto de propietarios de sitios de métricas en caso de optimizarse cuando se optimiza para Experiencia del usuario .

mediante la definición de estos núcleo vitales web

, Google tiene como objetivo proporcionar una guía unificada para las señales de calidad que Google dice que es esencial para brindar una gran experiencia de usuario en la Web.

“La optimización de la calidad de la experiencia del usuario es clave para el éxito a largo plazo de cualquier sitio en la web.

Si usted es propietario de un negocio, comercializador o desarrollador, los vitales web pueden ayudarlo a cuantificar la experiencia de su sitio e identificar oportunidades para mejorar “.

Google enfatiza la importancia de las vitales web principales sobre otras métricas, ya que son fundamentales para todas las experiencias web.

Las expectativas de los usuarios para las experiencias web pueden variar segúnSitio y contexto, pero algunos siguen siendo coherentes, independientemente de dónde estén en la web.

Las vitales web del núcleo son las necesidades de la experiencia del usuario que todos los sitios web deben esforzarse por cumplir. Específicamente, Google identifica La experiencia del usuario principal necesita como: Carga , Interactividad

y

Estabilidad visual

.

AnunciCementContinue Lectura a continuación

A continuación, se miden esas necesidades de experiencia de usuario. .

Medición de la experiencia del usuario con los vitales web básicos Google dice que los propietarios del sitio pueden medir la calidad de la experiencia del usuario de su sitio con estas métricas: Pintura contenta más grande : El tiempo que tarda el contenido principal de una página para cargar. Una medición de LCP ideal es menor o igual a 2.5 segundos . Primer retardo de entrada : elTiempo que se tarda en que una página se vuelva interactiva. Una medición ideal es menor o igual a 100 ms . Cambio de diseño acumulativo

: la cantidad de cambio de diseño inesperado de contenido de la página visual. Una medición ideal es menor o igual a How You Can Measure Core Web Vitals 0.1

. How You Can Measure Core Web Vitals

Google explica por qué estas tres métricas, en particular, son tan IMPORTANTE:

“Todas estas métricas capturan importantes resultados centrados en el usuario, son medibles de campo y tienen soportamiento de equivalentes métricos de diagnóstico de laboratorio y herramientas. Por ejemplo, mientras que la pintura más grande es la línea superior. Métrica de carga, también depende en gran medida de la primera pintura contenta (FCP) y el tiempo del primer byte (TTFB), que sigue siendo crítico para monitorear y mejorar “. AnuncioContinue leyendo a continuación

Relacionado:

Googler explica los factores de la clasificación de la usabilidad y la experiencia de los usuarios

Cómo medir las vitales web del núcleo

Google incorpora las capacidades de medición de las vinales web principales en Muchas de sus herramientas existentes.

Los vitales web de núcleo ahora se pueden medir utilizando:

Búsqueda consola.pagespeed Insights. How You Can Measure Core Web Vitals Faro.

cromo devtools.chrome UX Report.Web Vitals Extension. Aquí hay más sobre el uso de cada una de estas herramientas para medir los vitales web de núcleo. How You Can Measure Core Web Vitals Consola de búsqueda

Hay un New Core Web Vitals Informe en la consola de búsqueda para ayudar a los propietarios del sitio a evaluar las páginas en todo un sitio.

El informe identifica grupos de páginas que requieren atención basada en datos del mundo real del Informe de CHROME UX.

Con estoInforme, tenga en cuenta que las URL se omitirán si no tienen una cantidad mínima de datos de informes.

How You Can Measure Core Web Vitals PagesPeed Insights

PageSpeed ​​Insights se ha actualizado para usar el faro 6.0, lo que lo hace capaz de Medición de las vitales web de núcleo en las secciones de laboratorio y de campo del informe. How You Can Measure Core Web Vitals Los vitales web de núcleo se anotan con una cinta azul, como se muestra a continuación.

How You Can Measure Core Web Vitals How You Can Measure Core Web Vitals

Faro How You Can Measure Core Web Vitals Faro se actualizó recientemente a la versión 6.0, incluidas auditorías adicionales, nuevas métricas y una puntuación de rendimiento recientemente compuesta. How You Can Measure Core Web Vitals

Dos de estas nuevas métricas agregadas son la pintura contenta más grande (LCP) y el desplazamiento de diseño acumulativo (CLS).

AnunciCementContinue leyendo Abajo

estas métricas son el laboratorio implementaLas vinales web principales y proporcionan información de diagnóstico para optimizar la experiencia del usuario.

La tercera nueva métrica: se dice que el tiempo de bloqueo total (TBT) se correlaciona bien con el primer retardo de entrada (FID), que es otra web central Métrica de los Vitales.

Todos los productos que potencias de faro se actualizan para reflejar la última versión. How You Can Measure Core Web Vitals

Informe de Chrome UX How You Can Measure Core Web Vitals También se conoce como Crux, este informe es un público DataSet of Real User Experience Datos sobre millones de sitios web.

El informe de CHROME UX mide las versiones de campo de todos los vitales web principales, lo que significa que informa datos del mundo real en lugar de datos de laboratorio. Google ha actualizado recientemente el informe con una nueva página de destino de la Web Vitals.

How You Can Measure Core Web Vitals

How You Can Measure Core Web Vitals Se puede acceder al informe

aquí

.

AnunciCementContinue Lectura a continuación

Chrome DevTools

Chrome DevTools se ha actualizado para ayudar a los propietarios del sitio a encontrar y reparar los problemas de inestabilidad visual en una página que puede contribuir al cambio de diseño acumulativo (CLS). [CLS).

How You Can Measure Core Web Vitals

How You Can Measure Core Web Vitals

Seleccione un cambio de diseño para ver sus detalles en la pestaña Resumen. Para visualizar dónde ocurrió el cambio en sí, se cierne sobre el movimiento y se mudó a los campos.

Cromo DevTools también mide el tiempo de bloqueo total (TBT), que es útil para mejorar el primer retraso de entrada (FID).

AnunciCementContinue La lectura a continuación How You Can Measure Core Web Vitals TBT se muestra ahora en el pie de página del panel de rendimiento de Chrome DevTools cuando mide el rendimiento de la página.

How You Can Measure Core Web Vitals

Performance Optimizaciones que mejoran TBT en el laboratorio también deberíanMejorar FID.

Extensión de las vitalizaciones web

Una nueva extensión, ahora disponible para instalar desde la tienda web de Chrome, mide las métricas de tres vitales web principales en tiempo real.

Puede descargar e instalar la extensión

aquí

.


¿Qué pasa con otras métricas valiosas?

Tan importante como los vitales web de Core WEB, no son la solo Métricas de la experiencia de usuario para enfocarse. AnunciCementContinue Lectura a continuación

A medida que Google mejora su comprensión de la experiencia del usuario en el futuro. Actualizará los vitales web del núcleo anualmente. Google también proporcionará actualizaciones sobre los futuros candidatos de los vitales web, la motivación detrás de elegirlos y el estado de la implementación. Por ahora, al menos, el La empresa es pesadamente INVEstado en la mejora de su comprensión de la velocidad de la página: “Mirando hacia adelante hacia 2021, estamos invirtiendo en la construcción de mejor comprensión y capacidad para medir la velocidad de la página y otras características de la experiencia de los usuarios críticos. Por ejemplo, extender la capacidad de medir la latencia de entrada en todas las interacciones, no solo la primera; Nuevas métricas para medir y cuantificar la suavidad; primitivos y métricas de apoyo que permitirán la entrega de experiencias de preservación instantánea y de privacidad en la web; y más. ” Créditos de la imagen: Paulo Bipa