Los humanos reales quieren Buenas experiencias web . ¿Qué aspecto tiene eso en la práctica?
Bueno, un estudio reciente Citado por Google en una publicación de blog sobre las vitales web web principales encontró que los usuarios de Web Mobile solo mantuvieron su atención en la pantalla. -8 segundos a la vez.
Lea eso nuevamente.
Tiene menos de 8 segundos para ofrecer contenido interactivo y obtener un usuario para completar una tarea.
Ingrese los vitales web de núcleo (CWV). Estas tres métricas están diseñadas para medir el rendimiento del sitio en la experiencia humana. El Proyecto de cromo de código abierto anunció las métricas a principios de mayo de 2020 y se adoptaron rápidamente a través de los productos de Google.
¿Cómo calificamos el rendimiento en las mediciones centradas por el usuario?
¿Está cargando? ¿Puedo interactuar? Es visualmente apuñalado¿LE?
Fundamentalmente, los vitales web web principales miden cuánto tiempo lleva completar las funciones de script necesitadas para pintar el contenido de pliegues anteriores. La arena para estas tareas herculadas es una ventana de 360 x 640. ¡Se adapta a la derecha en su bolsillo!
AnuncioContinue Lectura a continuación
Este tambor de guerra para la deuda tecnológica no protegida es una bendición a muchos propietarios de productos y profesionales de la tecnología de tecnología que han estado atrasados a favor de las nuevas características y las chucherías brillantes.
¿Es la actualización de la experiencia de la página que va a ser MobileGGEDON 4.0?
Probablemente no.
, pero cuando su página pasa las evaluaciones de CWV, los usuarios son 24%
Es menos probable que abandone las cargas de la página. Estos esfuerzos benefician a todas las fuentes y medianas, y lo más importante, los humanos reales.
La actualización de la experiencia de la página
para todo el buzZ, CWV será elementos en una señal de clasificación. Se espera que se despliegue gradualmente a mediados de junio al 20 de agosto de 2021, la clasificación de la experiencia de la página se compondrá de: núcleo vitales web. Pintura contenta más grande . Primer retardo de entrada . Estabilidad visual
. Friendly Friendly.Safe Browsing.https.No Intrussticials. Actualizado La documentación
aclara que la implementación será gradual y que “los sitios generalmente no deben esperar cambios drásticos”.
advertisementcontinue Lectura a continuación
Cosas importantes que debe saber sobre la actualización:
La experiencia de la página se evalúa por URL.Page La experiencia se basa en un navegador móvil. Ya no se requiere para los principales historias de carrusels. Passing CWV no es Un requisito de aparecer en las principales historias de carrusels.
Un nuevo informe de experiencia de página enBúsqueda Consola
Búsqueda Consola ahora incluye un informe de experiencia de Page
. El recurso fresco incluye datos retrocediados durante los últimos 90 días.
Para que una URL sea “buena”, debe cumplir Los siguientes criterios:
La URL tiene un buen estado en el Informe CORE WEB VIVALs
. La URL no tiene problemas de usabilidad móvil de acuerdo con el Informe de usabilidad móvil. El sitio no tiene problemas de seguridad. Se sirve la URL a través de HTTPS.El sitio no tiene problemas de experiencia de anuncios, o el sitio no se evaluó para la experiencia de AD. El nuevo informe ofrece a los widgets de alto nivel que vinculan a los informes para cada uno de los cinco criterios “buenos”.
Flujo de trabajo para diagnóstico y acción MEJORAS DE CWV
Primero, una advertencia importante con respecto a FIELD VS Lab Data. Los datos de campo son los datos de rendimiento recopilados de las cargas de la página real que sus usuarios están experimentando en la naturaleza. También puede escuchar los datos de campo denominados Monitoreo de usuario real.
Evaluaciones de vitales web principales y la señal de clasificación de la experiencia de la página utilizará los datos de campo recopilados por el Informe de Experiencia del usuario de Chrome (CROUG).
¿Qué usuarios son parte del Informe de experiencia de usuario de Chrome? Los datos de CROUX son usuarios agregados que cumplen con tres criterios:
El usuario optó para sincronizar su historial de navegación. El usuario tiene no configure una frase de contraseña de sincronización. El usuario tiene habilitado el informe de estadísticas de uso.
Croux es su fuente de verdad para la evaluación de los vitales web de Core.
Puede Puede Puedes acceder a los datos de CRUX usando Google Search Console, PageSpeed Insights (Página -EVEL),
Proyecto público de Google Bigquery
, o como un tablero de instrumentos de origen
en Google Data Studio. ¿Por qué usaría algo más? Bueno, los datos de campo de CWV son un conjunto restringido de métricas con capacidades y requisitos de depuración limitados para la disponibilidad de datos. AnunciCementContinue Lectura a continuación
¿Por qué mi página no tiene datos disponibles de CCUX?
Al probar su página, puede ver “El Informe de experiencia de usuario de Chrome no tiene suficientes datos de velocidad del mundo real para esta página”.
Esto se debe a que los datos de Croux son anonimizados. Debe haber suficientes cargas de página para informar sin la posibilidad razonable de que se identifique el usuario individual.
Los vitales del núcleo web se identifican mejor mediante datos de campo y luego diagnosticados / qAED utilizando datos de laboratorio.
AnunciCementContinue La lectura a continuación
Los datos de laboratorio le permiten depurar el rendimiento con la visibilidad de extremo a extremo y la profundidad en UX. Se llama “Laboratorio”, ya que se recopilan estos datos emulados dentro de un entorno controlado con un dispositivo predefinido y la configuración de la red.
Puede obtener datos de laboratorio de PagePeed Insights, Web.dev/Measure,
Faro de Chrome Devtool Panel, y rastreadores con sede en cromo, como un faro local de Nodejs o FallFrowl.
Divida en un proceso de flujo de trabajo. 1. Identifique los problemas con los datos de CRUX agrupados por patrones de comportamiento en la consola de búsqueda.
Comience con el informe de la WEB del núcleo de la consola de búsqueda para identificar grupos de páginas que requieren atención. Este conjunto de datos utiliza datos de CRUX y usted tiene la amabilidad de agrupar juntos ejemplosE URL basada en patrones de comportamiento.
Si resuelve el problema de la raíz de una página, es probable que lo arregles para todas las páginas compartiendo ese cwv woe. Normalmente, estos problemas se comparten mediante una plantilla, una instancia de CMS o elemento en la página. GSC hace la agrupación para usted.
Enfoque en los datos móviles, ya que Google se está moviendo a un índice de primer nivel y CWV se establece para afectar a los SERP móviles. Priorice sus esfuerzos en función del número de URL afectado.
Haga clic en un problema para ver las URL de ejemplo que exhiben los mismos patrones de comportamiento.
AnuncioContinue Lectura a continuación
Guarde estas URLs de ejemplo para pruebas a lo largo del proceso de mejora.
2. Use PagePeed Insights para casarse con los datos de campo con diagnósticos de laboratorio.
Una vez que hayasPáginas identificadas que necesitan trabajo, use PagePeed Insights (Powered by Fighthouse y Chrome Ux Informe) para diagnosticar los problemas de laboratorio y de campo en una página.
Recuerde que las pruebas de laboratorio son pruebas emuladas de una sola vez. Una prueba no es una fuente de verdad o una respuesta definitiva. Pruebe múltiples urls de ejemplo.
advertisementcontinue Lectura a continuación
PageSpeed Insights solo se puede usar para probar las URL disponibles públicamente e indexables.
Si está trabajando en las páginas nodex o autenticadas, los datos de CRUX están disponibles a través de API o
BigQuery
. Las pruebas de laboratorio deben usar
Faro
. 3. Crea un boleto. Haz el trabajo de desarrollo.
Lo aliento como profesionales de SEO para ser parte del refinamiento del boleto y los procesos de control de calidad.
Los equipos de desarrollo típicamente trabajan en sprints. Cada sprint inCludes set boletos. Tener boletos bien escritos Permite que su equipo de desarrollo mejore mejor el esfuerzo y obtenga el boleto en un Sprint.
En sus boletos, incluya:
Story Siga un formato simple:
Como
, quiero
para
.
EG.: Como sitio de Performant, Quiero incluir CSS en línea para el nodo X en la plantilla de la página y para lograr la pintura contenta más grande para esta plantilla de página en menos de 2.5 segundos.
Criterios de aceptación
Defina cuando el Se ha logrado el objetivo. ¿Qué significa “hecho”? Por ejemplo: :
IZNLINE Cualquier CSS de ruta crítica utilizada para el contenido de pliegue arriba al incluirlo directamente en
. CSS crítico (lectura como: que relacionada con el nodo x) aparece sobre los enlaces de recursos JS y CSS en el .AdvertiSementContinue Lectura a continuación
URL de prueba / estrategia
Incluyen las URL de ejemplo agrupadas que ha copiado desde la consola de búsqueda. Proporcione un conjunto de pasos para que los ingenieros de QA se sigan.
Piense en qué herramienta se usa, qué métrica / marcador debe buscar, y el comportamiento que indica un pase o falla.
Enlaces al desarrollador Documento
Use la documentación de primera parte cuando esté disponible. Por favor, no hay blogs mullidos. ¿Por favor? EG .:◆ CSS CRÍTICO CRÍTICO DE LÍNEA, WEB.DEV
EXTRACTE CSS críticos, Web.dev 4. El control de calidad cambia en ambientes de estadificación utilizando el faro.
Antes de que el código se presiona a la producción, a menudo se coloca en un entorno de estadificación para las pruebas. Use un faro (a través de Chrome DevTools o instancia de nodo local) para medir los vitales web de Core. Si eres nuevo para probar WIth Fight, puede conocer las formas de probar y probar la metodología en
una Guía técnica de SEO de las métricas de rendimiento del faro
. < 2.5 seconds.
Tenga en cuenta que los entornos más bajos suelen tener menos recursos y serán menos actuadores. que la producción.
La lectura de PublicidadContinue a continuación se basa en los criterios de aceptación a los hogares en si el trabajo de desarrollo completado cumplió con la tarea dada.
La pintura contenta más grande
representa
: Experiencia de carga percibida.
Medición : el punto en la línea de tiempo de carga de la página cuando la imagen más grande de la página o el bloque de texto es visible dentro de la ventanaPort.
Comportamientos clave : Las páginas que utilizan las plantillas de la misma página generalmente comparten el mismo nodo LCP.
Meta
disponibles como
: Datos de laboratorio y campo.
¿Qué puede ser LCP?
Las medidas métricas de LCP cuando el texto o la imagen más grandes El elemento en la ventana es visible.
Posibles elementos que pueden ser un nodo LCP de página incluyen:
elementos.
Elementos dentro de un
Tag.Poster Images de
Elements.Mements.Background imágenes cargadas a través de
URL ()
Función CSS. Los nodos de texto dentro de los elementos de nivel de bloque. Espere ver elementos adicionales como
y agregado en iteraciones futuras.
Cómo identificar LCP con cromado DevTools Abra la página en Chrome que emule un MOTO 4G.Navige al panel de rendimiento de las herramientas de desarrollo (
comando + opción + I en Mac o ContinOL + SHIFT + I en Windows y Linux). Encontrará el marcador
LCP en la sección de Tiempos. Los elementos que corresponden a LCP se detallan en el campo Nodo relacionado.
¿Qué causa un pobre LCP?
Hay cuatro problemas comunes que causan un pobre LCP:
advertisementContinue Reading Belowslow Server Response Times.Render- Bloqueo de JavaScript y CSS.SSSLOW CARGA DE RECURSOS Tiempos de carga. Representación lateralClient. Los problemas de origen para LCP están pintados en brazos anchos en el mejor de los casos. Desafortunadamente, ninguna de las frases únicas anteriores probablemente serán suficientes para pasar a su equipo de dev con resultados significativos.
Sin embargo, puede dar el impulso de la emisión en el inicio en cuál de los cuatro orígenes está en juego.
Mejorar el LCP va a ser colaborativo. Conseguirlo arreglarloEd significa sentarse en las actualizaciones de DEV y su seguimiento de la parte interesada.
Diagnóstico de LCP deficiente debido al tiempo de respuesta de servidor lento
Dónde mirar
:
CROUX Dashboard v2 – Tiempo al primer byte (TTFB) (Página 6)
Si lo ve constantemente Pobre TTFB en los datos de su campo,
,
,
es el tiempo de respuesta del servidor lento arrastrando LCP.
AnunciCementContinue Lectura a continuación Cómo solucionar el tiempo de respuesta del servidor lento
El tiempo de respuesta del servidor está hecho de numerosos factores a medida a la pila de tecnología del sitio. No hay balas de plata aquí. Su mejor curso de acción es abrir un boleto con su equipo de desarrollo. Algunas formas posibles de mejorar TTFB son:
Optimice los usuarios del servidor. ROUTE a un CDN.CAC cercanoél activo. Páginas HTML Cache-First.Establecer las conexiones de terceros con anticipación. Diagnóstico de LCP deficiente debido a que el bloqueo de procesamiento JavaScript y CSS
: Faro (a través de
web.dev/Measure , Chrome DevTools, Pagespeed Insights, o Nuejs Instancia). Cada una de las soluciones a continuación incluye un indicador de auditoría relevante.
Cómo solucionar CSS de bloqueo de procesamiento
CSS se bloquea inherentamente el rendimiento de la ruta de procesamiento de procesamiento crítico. De forma predeterminada, CSS se trata como un recurso de bloqueo de procesamiento.
El navegador descarga todos los recursos CSS, independientemente del comportamiento de bloqueo o no bloqueo.
Minifique CSS.
Si su sitio utiliza un módulo Bundler o una herramienta de compilación, encuentre el complemento que minimizará sistemáticamente el SCRIPts.
AnuncioContinue Lectura a continuación Aplazamiento CSS no crítico.
El informe de cobertura de código en DevTools lo ayudará a identificar qué estilos se utilizan en la página. Si no se usa en ninguna páginas, entonces retírelo por completo. (Sin juicio, los archivos CSS pueden hincharse rápidamente en el cajón de la basura proverbial). Si los estilos se usan en otra página, haga una hoja de estilo separada para aquellas páginas que lo usan para llamar.
CSS crítico en línea.
Incluyen los CSS de la ruta crítica utilizados para el contenido de pliegues anteriores (según lo identificado por el informe de cobertura del código) directamente en
.
Use consultas de medios dinámicos.
Las consultas de medios son filtros simples que cuando se aplica a los estilos CSS, rompen los estilos en función de los tipos de dispositivos que representa el COntent.
Uso de consultas de medios dinámicos significa en lugar de calcular estilos para todas las visitaciones , está llamando y calculando esos valores a la ventana que solicita.
Para solucionar el bloqueo de procesamiento JavaScript
Minifique y comprima los archivos JavaScript.
Deberá trabajar con los desarrolladores para minificar y comprimir las cargas útiles de la red. AnunciCementContinue leyendo Debajo de
Minificación
implica eliminar el espacio en blanco y el código innecesario. Se hace mejor con una herramienta de compresión JavaScript.
La compresión implica modificar algorítmicamente modificar el formato de datos para el servidor de ejecución y las interacciones de los clientes.
diferir a JavaScript no utilizado.
División de código CHOPS UP LOTROS PIEZOS DE JS para entregar SMAller Packages. Luego, puede cargar aquellos que importan primero el contenido de pliegues.
Minimizar el Polyfills no utilizado.
¿Recuerda cómo Googlebot estaba atrapado en Chrome 44 por lo que se sentía siglos? Un Polyfills es una pieza de código utilizada para proporcionar una funcionalidad moderna en los navegadores más antiguos que no lo apoyan de forma nativa.
Ahora que Googlebot es de hoja perenne, también pasa por el nombre
deuda de tecnología
.
Algunos compiladores tienen funcionalidades incorporadas para eliminar los plagos heredados.
Cómo solucionar los scripts de terceros de bloqueo de procesamiento
. .
Si la secuencia de comandos no contribuye al contenido de pliegue, use
ASYNC <1kb. o DIRTAR
Atributos
Si el script usa un
en elcabeza, retírela. Póngase en contacto con el proveedor de un método de implementación actualizado.
lo consolidan. AnunciCementContinue Lectura a continuación
Uso de script de terceros. ¿Quién está a cargo de la herramienta? Una herramienta de terceros sin que alguien lo administre también se conoce como una responsabilidad.
¿Qué valor proporciona? ¿Es ese valor mayor que el impacto en el rendimiento? ¿Se puede lograr el resultado mediante la consolidación de herramientas?
Actualice. <= 100 milliseconds.
Puede ser otra opción para llegar al proveedor para ver si tienen un magro o asíncrono actualizado. versión. A veces lo hacen y no dicen a las personas que tienen su antigua implementación.
Diagnóstico de LCP deficiente debido a tiempos de carga de recursos lentos
Dónde mirar : Faro (a través de web.dev/measure
, Chrome DevTools, PagePeed Insights, o Nuejs Instancia). Cada una de las soluciones a continuación incluye un indicador de auditoría relevante.
Los navegadores obtienen y ejecutan recursos a medida que los descubren. A veces nuestros caminos al descubrimiento son menos que lo ideal. Otras veces Los recursos no están optimizados para sus experiencias en la página.
Aquí hay formas de combatir las causas más comunes de los tiempos de carga de recursos lentos:
advertisementcontinue Lectura a continuación Optimice y comprime imágenes . <= 300 milliseconds.
Nadie necesita un archivo PNG de 10MB. Rara vez hay un caso de uso para enviar un archivo de imagen grande. O un PNG.
Precarga de recursos importantes. Si un recurso es parte de la ruta crítica, un atributo simple
rel = “Preload”
le dice al navegador que lo busca tan pronto como posible. Comprimir archivos de texto.
Codificar, comprimir, repetir.
Entregue diferentes activos basados en la conexión de red (
Servicio de adaptación
).
Un dispositivo móvil en una red 4G no es Es probable que necesite / quiera / tolere el tiempo de carga de los activos listos para un monitor Ultra 4K. Use la API de información de la red
que permite a las aplicaciones web acceder a la información sobre la red del usuario. Activos de caché utilizando un trabajador de servicio.
Mientras Googlebot no ejecuta a los trabajadores de servicios, un usuario. El dispositivo en la conexión de la red de un dedal de la red ciertamente lo hará. Trabaje con su equipo de desarrollo para aprovechar la API de almacenamiento de caché
.
Diagnóstico de LCP deficiente debido a la representación del lado del cliente
Dónde mirar : para una sola vez Miradas, vea la fuente de la página. Si es un par de líneas de gibberi.SH, la página está renderizada por el cliente.
Los elementos dentro de una página pueden ser renderizados por el cliente. Para detectar qué elementos, comparan la fuente de página inicial con el HTML rendido. Si está utilizando un rastreador, compare la diferencia de conteo de palabras renderizada. Los vitales web de núcleo son una forma de medir la efectividad de nuestras estrategias de representación.
Todas las opciones de representación tienen la misma salida ( Todos ellos construyen páginas web), pero las métricas de CWV miden lo rápido que ofrecemos lo que importa cuando importa.
La representación del lado del cliente rara vez es la respuesta a menos que la pregunta sea: “¿Qué cambios entraron en producción al mismo tiempo? ¿Ese tráfico orgánico comenzó a caer? “
Cómo corregir la representación del lado del cliente
” Detener “realmente no es una respuesta útil. Preciso, pero no útil. Así que en vez: AnunciCementContinue Lectura a continuación
Minimiza a JavaScript crítico.
Use la división de código, sacudidas de árboles y funciones en línea en la cabeza para las funcionalidades de pliegues. Mantenga esos scripts en línea Use la representación del lado del servidor.
Al hacer que sus servidores ejecuten los elementos JS, puede devolverlo por completo HTML. Tenga en cuenta que esto aumentará su TTFB a medida que se ejecutan los scripts antes de que su servidor responda. Use la prendas previas.
En la hora de construcción, ejecute sus scripts y hu) HTML listo para las solicitudes entrantes. Esta opción tiene un mejor tiempo de respuesta del servidor, pero no funcionará para los sitios con el inventario o los precios que cambian con frecuencia. Para ser borrado: La representación dinámica
no es una solución a la representación del lado del cliente. Está dando los problemas del lado del cliente RenDering a un amigo. Primer retardo de entrada (FID)
representa
: capacidad de respuesta a la entrada del usuario.
Medición
: la Tiempo desde cuando un usuario primero interactúa con una página a la hora en que el navegador realmente puede comenzar a procesar los manipuladores de eventos en respuesta a esa interacción.
Comportamientos de teclas
: FID solo está disponible como Datos de campo.
Meta
: 75% de las cargas de páginas logran FID en
disponibles : Datos de campo.
Use el tiempo total de bloqueo (TBT) para las pruebas de laboratorio
Dado que la FID solo está disponible como datos de laboratorio, deberá usar el tiempo de bloqueo total para las pruebas de laboratorio. Los dos logran el mismo resultado final con diferentes umbrales.
TBT representa
: capacidad de respuesta a la entrada del usuario.
TBT MEasuramiento : Tiempo total en el que el hilo principal está ocupado por tareas que llevan más de 50 ms para completar. AnunciCementContinue Lectura a continuación Meta :
DISPONIBLE Como
: datos de laboratorio.
¿Qué causa el pobre FID?
Const JSHEAVY = VERDADERO; MIENTRAS (JSHEAVY) {Console.log (“FID FAIL”)}
JavaScript pesado. Eso es.
Los FID pobres provienen de JS que ocupan el hilo principal, lo que significa que las interacciones de su usuario se ven obligadas a esperar.
¿Qué elementos en la página se ven afectados por FID? FID es una forma de medir la actividad del hilo principal. Antes de que los elementos en la página puedan responder a la interacción del usuario, las tareas en el progreso en el hilo principal tienen que completar.
A continuación se muestran algunos de los elementos más prevalentes que su usuario está taPping en Frustración: Camisones de texto.Checkboxes.Radio Botones (
y
). Seleccione los desplegables (
Dónde buscar
: Para confirmar que es un problema para que los usuarios se ven CROUX Dashboard V2 – Primer retardo de entrada (FID) (página 3). Utilice Chrome DevTools para identificar las tareas exactas.
Cómo ver TBT usando Chrome DevTools Abra la página en Chrome.Navige a la red Panel de herramientas de red (
Comando + Opción + I en Mac o
Control + SHIFT + I en Windows y Linux) .Tick El cuadro para deshabilitar el caché. NAVIGE al panel de rendimiento y verifique la casilla para las vitales web. botón para iniciar una traza de rendimiento. Sook para los bloques azules etiquetados tareas largas o los marcadores de la esquina derecha derecha en elEsquina derecha de tareas. Estos indican tareas largas que tomaron más de 50 ms. Finalizar el TBT para la página en la parte inferior del resumen.
Cómo solucionar Pobre FID
Deje de cargar tantos scripts de terceros.
AnunciCementContinue La lectura a continuación
El código de terceros coloca su rendimiento detrás de la pila de otro equipo.
Libera el hilo principal rompiendo tareas largas.
Si está enviando un paquete de JS masivo para cada página, hay muchas funcionalidades en ese paquete que no contribuyen a la página.
Aunque no están contribuyendo, Cada función JS tiene queSé descargado, analizado, compilado y ejecutado.
Rompiendo ese gran paquete en trozos más pequeños y solo enviando aquellos que contribuyen, liberarás el hilo principal.
Revise su Administrador de etiquetas.
Implementación de etiquetas de Out-of-the-Box Los oyentes de eventos de incendios que atarán su hilo principal.
Los administradores de etiquetas pueden ser entrada de la etiqueta. Manipuladores que bloquean el desplazamiento. Trabaje con desarrolladores a
DEBOUND Sus manipuladores de entrada
.
Optimice su página para la preparación de la interacción.
envíe y ejecute esos paquetes JS en un orden que importa.
advertisementcontinue leyendo a continuación
¿Está por encima del pliegue? Se prioriza. Utilice
rel = precarga
.
¡Bastante importante pero no lo suficiente para bloquear la representación? Añadir el
Async
atributo.
¿Por debajo del pliegue? Retrasarlo con el atributo
DEFER
Use un trabajador web.
Los trabajadores web
permiten que JavaScript se ejecute en un Hilo de fondo En lugar de la rosca principal, su FID se califica.
Reduce el tiempo de ejecución de JavaScript.
Si está enviando un paquete JS masivo JS por cada Página, hay muchas funcionalidades en ese paquete que no contribuyen a la página. Aunque no están contribuyendo, cada función de JS debe ser descargada, analizada, compilada y ejecutada.
Rompiendo ese gran paquete en trozos más pequeños ( división de código ) y solo enviando aquellos que contribuyen ( temblando ), liberarás el hilo principal.
SIGO CURÓRULATIVOTRIPTIVO DE UT Representa : Estabilidad visual. Medición : un cálculo basado en el número de marcos en los que los elementos se mueven visualmente y La distancia total en píxeles se movió el elemento (s). AnunciCementContinue Lectura a continuación Puntuación de cambio de diseño = fracción de impacto * Fracción de distancia Comportamientos de teclas : CLS es la única web principal vital que no se mide en el tiempo. En su lugar, CLS es una métrica calculada. Los cálculos exactos están siendo iterados activamente en . Meta : 75% de las cargas de páginas tienen una métrica CLS calculada de> 0.10. Disponible como : datos de laboratorio y campo. Diagnóstico de POOR CLS Dónde buscar : Para confirmar que es un problema para los usuarios Tablero de tablero de cruje V2 – acumulativoDesplazamiento de diseño (CLS) (página 4). Use cualquier herramienta con el faro para identificar el (los) elemento (s) de rebote ( cromado DevTools proporcionará una mayor información sobre las coordenadas de lo excitable Elemento y cuántas veces se mueve. PublicidadContinue Lectura a continuación Cómo ver CLS usando Chrome DevTools Abra la página en Chrome.Navige al panel de red de Herramientas de desarrollo ( Comando + opción + i en Mac o Control + Mayús + I en Windows y Linux) .Tick El cuadro para deshabilitar el caché. NAVIGE al panel de rendimiento y verifique la casilla para los vitales web. El botón de recarga para iniciar un seguimiento de rendimiento. Haga clic en el (los) marcador (s) rojo (s) en la sección de experiencia. Sook para el nombre del nodo, resaltado del nodo en la página y la coordinadaAtes para cada vez que se mueva el elemento. ¿Qué se puede contar en CLS? Si aparece un elemento en la ventana inicial inicial , se convierte en parte del cálculo de la métrica. Si carga su pie de página antes de su contenido principal y aparece en la ventana gráfica, luego el pie de página es parte de su puntaje CLS (probablemente atroco). ¿Qué causa pobres CLS? ¿Es su aviso de cookies? Probablemente sea su nombre de cookie . AnunciCementContinue Lectura a continuación Alternativamente, busque: imágenes sin dimensiones.ads, incrustas y iframes sin dimensiones. Contenido inyectado digimalmente. Fuentes de tela causando folleto /Fout.CHAINS PARA LOS RECURSOS CRÍTICOS. Las actividades que esperan una respuesta de la red antes de la actualización de DOM. Cómo solucionar POOR CLS SIEMPREIncluya Ancho y altura atributos de tamaño en imágenes y elementos de video. Es tan simple como , pero tampoco. El diseño web sensible vio la disminución de las declaraciones de altura y anchura. El impacto negativo de esto son las páginas que se reflejan una vez que apareció la imagen en la pantalla. La mejor práctica es aprovechar Hojas de estilo de los usuarios para declarar las dimensiones sistemáticamente basadas en la relación de aspecto de la imagen. Espacio de reserva para las ranuras AD (y no lo colapse). Si eres un sitio de publicación, nunca vas a ganar un argumento sobre el rendimiento negativo Impacto de los anuncios de terceros. En su lugar, identifique el anuncio de tamaño más grande que podría usarse en un espacio de ranura y reserva. Si el anuncio no llena, mantén el marcador de posición.. La brecha es mejor que un cambio de diseño. advertisementcontinue Lectura a continuación Evite insertar contenido nuevo por encima del contenido existente. Un elemento no debe ingresar al arena de lucha a menos que esté listo para ser contado. Cuida al colocar anuncios no pegajosos cerca de la parte superior de la ventana. Como regla general, evite los anuncios cerca de la parte superior de la página . Es probable que vea aquellos marcados en el nuevo informe de experiencia de la página de GSC. Fuentes de precarga y recursos críticos. Fuente Cargando tarde Causa un flash completo y volver a escribir. Prelación le dice al navegador que le gustaría buscarlo antes de lo que el navegador lo descubriría porque está seguro de que es importante para la página actual. Evite las cadenas para los recursos necesarios para crear contenido anterior. suceden las cadenas cuando llame a un recurso que llama un recurso. Si se llama un script un activo crítico, entonces no se puede llamar hasta que se ejecute ese script. Evite Document.Write () AnuncioContinue Lectura a continuación Los navegadores modernos admiten analizadores especulativos del hilo principal. Lea como: funcionan con anticipación mientras que los scripts se están descargando y ejecutando, como leer las tareas en una clase. DOCUMENT.WRITE () Entra y cambia el libro de texto. Ahora que la lectura del trabajo con anticipación era inútil. Posibilidades son esta no es la obra de tus devs. Hable con su punto de contacto para esa herramienta de terceros “Magic”. El futuro de las métricas CWV tiene la intención de actualizar los componentes de la experiencia de la página anualmente. Las futuras métricas CWV se documentarán de manera similar a la implementación de la señal inicial. ¡Imagina un mundo donde los profesionales de SEO recibieron un año por adelantado que venía Panda! Los vitales web del núcleo ya son del 55% de Su puntaje de su faro V7. Actualmente, actualmente, la pintura contenta (LCP) más grande y el primer retraso de entrada (FID) se ponderan en un 25%. El cambio de diseño acumulado es un escaso del 5%, pero podemos esperar ver estos iguales. El dinero inteligente está en el P4 2021 una vez que el equipo de cromo hones en el cálculo de la métrica. AnunciCementContinue leyendo a continuación SEO Pros, podemos diagnosticar y proporcionar soluciones para una mejor experiencia centrada en el usuario. Aqui tEsencial: esas inversiones y mejoras afectan a todos los usuarios. El ROI se puede encontrar en cada medio. Cada canal. El rendimiento orgánico es un reflejo general de la salud del sitio. Aproveche esa posición a medida que continúe abogando y iterir. . Compartir lo que se aprende Lo más importante: | ¯¯¯¯¯¯¯¯¯¯¯ | que no tenga miedo a Más en público | ___________ | (\ __ __ /) || (• ㅅ •) || / づ Más recursos: Google Preguntas frecuentes proporcionan puntos de vista de las vinales web centrales Las 8 estrategias de optimización de sitios web esenciales Una guía completa de SEO: lo que necesita saber Créditos de la imagen Todas las capturas de pantalla tomadas por el autor, abril de 2021