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.