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

Leave a Reply

Your email address will not be published. Required fields are marked *