¿Qué tan esenciales son los elementos esenciales de la web?

¿Qué tan esenciales son los elementos esenciales de la web?

mayo 4, 2021 0 Por admin


Veamos cómo puede usar Lighthouse para encontrar los problemas exactos que podría estar enfrentando.

Mira Core Web Vitals en Lighthouse

Para abrir Lighthouse, haga clic derecho en cualquier lugar de la página web y seleccione Inspeccionar.

¿Qué tan esenciales son los elementos esenciales de la web?Nike.com

Ir a la Faro informar y buscar en el Oportunidades enumera. Estos le indican dónde puede optimizar la velocidad de la página a través del desarrollo.

¿Qué importancia tiene Core Web Vitals? "Width =" 624 "height =" 172 "tamaños =" (ancho máximo: 624px) 100vw, 624px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture8- 607fa7514f464.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture8-607fa7514f464-480x132.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture8-607fa7514f464.png

Inspección LCP

Desplácese hacia abajo para encontrar dónde dice Mostrar traza original. Esto lo llevará a la línea de tiempo, donde puede encontrar cuándo se guardaron los Core Web Vitals.

¿Qué importancia tiene Core Web Vitals? "Width =" 624 "height =" 467 "tamaños =" (ancho máximo: 624px) 100vw, 624px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture9- 607fa77e9e9b3.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture9-607fa77e9e9b3-480x359.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture9-607fa77e9e9b3.png

En la captura de pantalla a continuación, puede ver FP (First Paint), FCP (Content Rich First Paint) y LCP enumerados en los tiempos.

¿Qué importancia tiene Core Web Vitals? "Width =" 624 "height =" 373 "tamaños =" (ancho máximo: 624px) 100vw, 624px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture10- 607fa7b5355a6.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture10-607fa7b5355a6-480x287.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture10-607fa7b5355a6.png

Una vez en la línea de tiempo, puede acercarse para ver la captura de pantalla. Esto le ayuda a comprender qué elemento insignia obtiene la mayor puntuación.

En este caso, es un marcador de posición para una imagen grande. Este marcador de posición es una buena práctica para optimizar LCP.

Aquí hay otro ejemplo de investigación sobre LCP. Tenga en cuenta la brecha en el tiempo que tardó en cargarse esta imagen, lo que resulta en una métrica de LCP incorrecta.

¿Qué importancia tiene Core Web Vitals? "Ancho =" 624 "alto =" 340 "tamaños =" (ancho máximo: 624 px) 100vw, 624 px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture11- 607fa806bc368.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture11-607fa806bc368-480x262.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture11-607fa806bc368.pngEdition.cnn.com

Una vez más, Lighthouse mostrará sus oportunidades y diagnósticos recomendados sobre el rendimiento del sitio web para que pueda encontrar formas de mejorar LCP.

¿Qué importancia tiene Core Web Vitals? "Width =" 624 "height =" 435 "size =" (ancho máximo: 624px) 100vw, 624px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture12- 607fac9d1cdaa.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture12-607fac9d1cdaa-480x335.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture12-607fac9d1cdaa.png

Este es un buen lugar para guardar una captura de pantalla para su desarrollador y compartir las recomendaciones.

Descripción general del rendimiento de Semrush

Otro lugar para obtener ideas es Semrush.

Desde la herramienta Site Audit, el Rendimiento del sitio El informe ofrecerá información sobre cómo resolver cualquier problema relacionado con la velocidad que se haya observado durante el rastreo.

Para cada problema, puede ver exactamente dónde sucedió y recibir ideas sobre cómo puede mejorar sus métricas de LCP.

Aquí verá un informe sobre todos los problemas relacionados con JavaScript, carga lenta de la página y HTML que podría optimizarse.

¿Qué importancia tiene Core Web Vitals? "Width =" 624 "height =" 424 "tamaños =" (ancho máximo: 624px) 100vw, 624px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture13- 607facd3408de.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture13-607facd3408de-480x326.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture13-607facd3408de.png

Si no eres tan experto en tecnología como tu equipo de desarrollo, puede ser difícil decidir qué arreglar primero.

Una buena forma de hacerlo es recopilar tanta información específica como sea posible y dársela a sus desarrolladores para que puedan encontrar una solución desde su perspectiva.

Inspección FID / TBT

A continuación, es hora de echar un vistazo a la primera demora de entrada, es decir, cuánto tiempo pasa antes de que un usuario interactúe con la página.

Según el artículo web.dev de Google, "Los retrasos prolongados en la primera entrada suelen ocurrir entre First Contentful Paint (FCP) y Time to Interactive (TTI)".

Para medir esto a través de la simulación, herramientas como Semrush y Lighthouse utilizan el tiempo de bloqueo total (TBT), una métrica recomendada por Google como reemplazo de FID.

El TBT mide el tiempo total entre la primera pintura contenciosa (FCP) y el tiempo de interactividad (TTI) y se correlaciona con el FID, capturando cuestiones que afectan la interactividad y se pueden lograr en condiciones de laboratorio.

Para inspeccionar, podemos mirar una imagen de muestra de carga lenta usando el Rendimiento pestaña en la consola de desarrollo. Puede hacer clic Mostrar traza original en el informe Lighthouse.

Luego, active la configuración de Web Vitals para ver cuándo Tareas largas tarda más de 50 ms.

¿Qué importancia tiene Core Web Vitals? "Width =" 624 "height =" 432 "tamaños =" (ancho máximo: 624px) 100vw, 624px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture14- 607face44e0e0.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture14-607face44e0e0-480x332.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture14-607face44e0e0.png

Estos son los casos en los que se podría trabajar el FID.

Algunas de las recomendaciones de Lighthouse que podrían ayudar con FID incluyen:

  • Evite las tareas largas.
  • Minimiza el trabajo del hilo principal.
  • Mantenga el número de solicitudes bajo y los tamaños de transferencia pequeños.

Puede resultar útil ver qué secuencias de comandos de JavaScript pueden haber provocado trabajos prolongados en su página.

Inspección CLS

El desplazamiento de diseño acumulativo es la métrica que básicamente le dice cuánto salta y cambia la página debido a problemas con imágenes, fuentes y elementos dinámicos como ventanas emergentes.

Para saber qué parte de una página ha realizado cambios:

  • Vaya a la pestaña Rendimiento (haga clic en Mostrar traza original en el informe Lighthouse).
  • Ver el Vivir seguimiento para encontrar cuándo ocurrieron los cambios.
  • Acercar y buscar Desplazamientos de diseño para ver qué parte de la página realizó estos cambios al cargar.

¿Qué importancia tiene Core Web Vitals? "Width =" 624 "height =" 412 "tamaños =" (ancho máximo: 624px) 100vw, 624px "srcset =" https://cdn.seoconsem.com/wp-content/uploads / 2021/04 / picture15- 607fad29987ff.png 624w, https://cdn.seoconsem.com/wp-content/uploads/2021/04/picture15-607fad29987ff-480x317.png 480w "src =" https: // cdn. Searchenginejournal.com/wp-content/uploads/2021/04/picture15-607fad29987ff.png

Algunas recomendaciones de Lighthouse que pueden ayudar a administrar los cambios de diseño son las siguientes:

Conclusión

Si bien nadie puede saber cuánto impacto tendrá Core Web Vitals en las clasificaciones de Google, siempre es mejor estar preparado y saber dónde pueden ir sus páginas web más rápido y tener una mejor experiencia.

Es por eso que le recomendamos que utilice tanto la auditoría del sitio como el buque insignia de Semrush para obtener toda la información que necesita y brindarle a su equipo de desarrollo instrucciones claras para mejorar estos elementos vitales.

Recuerde, el propio Google ha enfatizado que "la calidad y el contenido relevante" siempre deben ser su máxima prioridad, con la experiencia en la página como un factor adicional además de ese enfoque inicial.