Categories
Noticias

Primer retraso de entrada – una explicación simple

Primer retardo de entrada (FID) es una métrica de experiencia de usuario que se introduce Google y Pronto usará como un pequeño factor de clasificación. Este artículo ofrece una visión general de FID fácil de entender para ayudar a dar sentido al tema.

El primer retraso de entrada es más que tratar de complacer a Google. Las mejoras al rendimiento del sitio generalmente conducen a un aumento de SALes, adolescentes y clientes potenciales.

Definición de Primer Retraso de entrada

FID es la medición del tiempo que tarda en que un navegador responda a la primera interacción de un visitante del sitio con el sitio mientras el sitio esta cargando. Esto a veces se denomina latencia de entrada.

Una interacción puede tocarse un botón, un enlace o una pulsación de teclas y la respuesta dada en respuesta. Las áreas de entrada de texto, desplegamientos y casillas de verificación son otros tipos de puntos de interacción que se midificarán FID.

AnunciCementContinue Lectura a continuación

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

El objetivo de FID es medir lo que responde un sitio es mientras que se está cargando.

La causa del primer retardo de entrada

El primer retardo de entrada es generalmente causaD por imágenes y scripts que se descargan de manera no ordenada. Esta codificación desordenada hace que la página web se descargue en pausar excesivamente, luego inicie la pausa. 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, lo que causa accidentes y desaceleraciones. La fijación se trata de traer el orden al tráfico.

Google describe la causa de

de la latencia de entrada

como esta:

“En general, la demora de entrada (aka la latencia de entrada) ocurre Debido a que el hilo principal del navegador está ocupado haciendo otra cosa, por lo que no puede (aún) responder al 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. Si bien está haciendo eso, no puede ejecutar a los oyentes de eventos porque el JavaScript, su carga puede decirle que haga algo más “.

AnuncioContinue leyendo a continuación

Cómo arreglar la latencia de entrada

desde la raíz La causa del primer retraso en la entrada es la descarga desorganizada de scripts e imágenes, la forma de solucionar el problema es aportar sobre la forma de que esos scripts e imágenes se presentan al navegador para descargar.

Resolviendo el problema 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 y comenzar la descarga de páginas web no organizadas.

Por qué los navegadores no responden

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

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

Las tareas de representación individuales se denominan hilos. El hilo de la palabra es corto para “hilo de ejecución”, lo que 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 que se llama un hilo principal. El hilo principal es responsable de crear (representación) la página web que un sitio visitor se ve

El hilo principal se puede visualizar como una carretera 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.

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, cuando se ejecuta el código, de manera ordenada para que la página web se descargue de la manera más rápida posible.

AnunciCementContinue Reading a continuación

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

cuando viene a los vitales web de núcleo y especialmente con el primer retraso en la entrada, hay algún código sobre lo que hay poco que se puede hacer. HoweveR, es probable que esto sea el caso con sus competidores.

Por ejemplo, si su empresa depende de Google AdSense (un gran script de bloqueo), el problema será el mismo para su competidor.

En muchos casos, puede ser suficiente hacer lo mejor que pueda, ya que sus competidores tampoco pueden hacerlo mejor.

Por lo tanto, en aquellos casos, es mejor tomar sus victorias donde Puede encontrarlos y no sudar 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, un JavaScript puede estar allí para asegurarse de que se ingrese tanto el nombre y el apellido. Cuando se presiona un botón, un JavaScript puede estar allí para decirle al navegador que genere unMensaje de agradecimiento en una ventana emergente.

advertisementcontinue leyendo a continuación

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

Si un archivo JavaScript grande se encuentra cerca de la parte superior de la página, entonces ese archivo va a bloquear el resto de la página debajo de la representación (se vuelve visible e interactivo) hasta que ese script haya 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 colóquelos en la parte inferior de la página para que no interfieran con todos los elementos de la página que están esperando.

Pero esto puede ser un problema si, por ejemplo,Se coloca al final de una página web muy larga. La razón es 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á quedando al final). La página puede descargar más rápido, pero luego el puesto mientras espera a que se ejecute el JavaScript.

AnunciCementContinue leyendo a continuación

¡Hay una solución para eso!

Atributos diferenciales y de ASYNC

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

Un atributo HTML es algo que transforma un elemento HTML, como la extensión del propósito o el comportamiento del elemento.

Es como si aprendieras una habilidad, esa habilidad se convierte en unaAtributo de quién eres.

En este caso, los atributos de diferenciación y Async cambian la forma en que se comporta un archivo JavaScript.

Uno de los cambios importantes es que le dicen al navegador que no se haga una pausa para el javascript. Estos atributos le dicen al navegador que mantenga el subproceso principal.

Los archivos de JavaScript se descargarán y procesarán independientemente del hilo principal, lo que permitirá al navegador hacer más rápido la página web.

Atributo de Async

Los archivos JavaScript con el atributo ASYNC se descargarán y luego se ejecutarán tan pronto como se descargue. Cuando comienza a ejecutarse es el punto en el que el archivo JavaScript bloquea el hilo principal.

AnunciCementContinue Lectura a continuación

Normalmente, el archivo bloquearía el hilo principal cuando comienza a descargarse. Pero no con el asyncatributo.

Esto se llama una descarga asíncrona, donde se descarga independientemente del hilo principal y en paralelo con él.

El atributo de ASYNC es útil para los archivos JavaScript de terceros como la publicidad y el intercambio social. , los archivos en los que no importa en qué orden se ejecutan.

Atributo de diferencia

Los archivos JavaScript con el atributo “

” también descargarán asíncrono.

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 que se encuentran 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 se ejecutan materia.

En general, use el atributo de diferenciador para los scripts que no son esenciales para la representación de la página en sí.

La latencia de entrada es diferente para todos los usuarios

Es importante tener en cuenta que el primer retraso de entrada Las puntuaciones son variables e inconsistentes. Las puntuaciones varían de visitantes a visitante.

AnuncioContinue Lectura a continuación

La varianza en las puntuaciones es inevitable porque la puntuación depende de las interacciones que son particulares para el individuo que visite un sitio.

Algunos visitantes podrían distraerse y no interactúe hasta un momento en el que todos los activos estén cargados y listos para interactuar 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 algunos usuarios estarán en malos momentos (cuando el hilo principal esté ocupado durante un período de tiempo extendido), y las primeras interacciones de algunos usuarios estarán 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 altos “

Por qué la mayoría de los sitios fallan FID

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

Esta es la razón por la cual tantos editores se consternan para descubrir que sus sitios no pasan la primera entrada. Prueba de retraso.

AnuncioContinue leyendo a continuación

, pero eso es algo que está cambiando como la comunidad de desarrollo de software web.Sponds a las demandas de diferentes estándares de codificación de la comunidad de publicaciones.

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

Por ejemplo, WordPress dirigió una deficiencia en el editor del sitio web de Gutenberg que estaba causando que anotara 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.

Por lo tanto, el proceso de creación de una página web es más visual y realizado 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. EAEl bloque individual de CH tiene un código de estilo correspondiente (CSS), con gran parte de ellos específico y exclusivo de ese bloque individual.

AnunciCementContinue Lectura a continuación La forma estándar de codificar estos estilos es crear una hoja de estilo que contenga los estilos que Son únicos para 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.

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 utilizan

antes de los vitales web de Core (CWV) que se consideró como la forma estándar de empaquetar CSS.

después de la Introducción de los vitales web de núcleo que la práctica se considera un código BLOAT.

Esto no essignificaba 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 dentro del ecosistema de codificación.

Pasamos por lo mismo. Cosa con la transición al primer diseño web móvil. AnuncioContinue Lectura a continuación Gutenberg 10.1 Rendimiento mejorado

WordPress Gutenberg 10.1 Introdujo una forma mejorada de cargar los estilos solo cargando el Estilos que se necesitaban y no cargando los estilos de bloques que no se iban a utilizar.

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

Tiempo para solucionar la primera entrada deLa Lay está ahora

Creo que a un avance más y más desarrolladores de software responsables del CMS, los temas y los complementos pasarán a las primeras prácticas de codificación de retardo de entrada.

, pero hasta que eso suceda, el Burden está en el editor para tomar medidas para mejorar el primer 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 *