Una guía técnica de SEO para las métricas de rendimiento de Lighthouse

Una guía técnica de SEO para las métricas de rendimiento de Lighthouse

enero 21, 2021 0 Por admin


Tal vez esté aquí porque es un fanático de los indicadores de rendimiento. O tal vez no sabe qué es Lighthouse y tiene demasiado miedo de preguntar.

Cualquiera de los dos es una gran opción. ¡Bienvenidos!

Para esta alegre aventura de desmitificación de la documentación del desarrollador, recluté a un experto en SEO y Google Data Studio Rachel Anderson.

Juntos esperamos aprovechar sus esfuerzos para mejorar el rendimiento. "Hacer que todos los números sean verdes" a algunos elementos de acción claros y significativos.

Examinaremos:

  • ¿Qué es el faro? (En caso de que no lo supiera y tuviera miedo de preguntar).
  • Actualizaciones del modo de cálculo de la puntuación de rendimiento (versiones 6 y 7).
  • Cómo probar el rendimiento con Lighthouse.
  • Qué métricas componen la puntuación de rendimiento de Lighthouse.
  • ¿Qué significan estas métricas?
  • Cómo mejorarlos.

¿Qué es el faro?

Lighthouse es una herramienta de auditoría de código abierto que proporciona puntuaciones estandarizadas en cinco áreas:

  • Rendimiento.
  • Aplicación web progresiva.
  • Las mejores prácticas.
  • Accesibilidad.
  • SEO.

Publicidad

Continuar leyendo a continuación

Para los propósitos de este artículo, usaremos el nombre Lighthouse para referirnos a la serie de pruebas que ejecuta el repositorio compartido de Github, independientemente del método de ejecución.

Lighthouse ejecuta pruebas de rendimiento utilizando datos emulados, también conocidos como datos de laboratorio.

Se trata de datos de rendimiento recopilados en un entorno controlado con configuraciones de red y dispositivos predefinidos.

Los datos de laboratorio son útiles para depurar problemas de rendimiento. Esto no significa que la experiencia en su máquina local en un entorno controlado represente las experiencias de humanos reales en la naturaleza.

Actualizaciones de Lighthouse: Web Core Vitals

El 5 de mayo de 2020, Chromium Project anunció un conjunto de tres métricas con las que el navegador de código abierto respaldado por Google mediría el rendimiento.

Las métricas, llamadas Web Vitals, son parte de una iniciativa de Google diseñada para proporcionar una guía unificada para las señales de calidad.

El propósito de estas métricas es medir el rendimiento web de forma centrada en el usuario.

En menos de dos semanas, Lighthouse v6 se implementó con una versión modificada de Web Core Vitals en el corazón de la actualización.

Publicidad

Continuar leyendo a continuación

En julio de 2020, las métricas unificadas de Lighthouse v6 se adoptaron en todos los productos de Google con el lanzamiento de Chrome 84.

El panel de Auditorías de Chrome DevTools ha cambiado de nombre a Lighthouse. Las estadísticas de Pagespeed y Google Search Console también se refieren a estas métricas unificadas.

Web Core Vitals representa el 55% de la puntuación de rendimiento ponderada de Lighthouse. Este cambio de enfoque establece metas nuevas y más específicas.

En general, la mayoría de las páginas tuvieron un impacto mínimo con un 83,32% de las pruebas que cambiaron diez puntos o menos cuando se degradaron a v6.

La versión 7 está disponible actualmente en Github y se espera que se implemente ampliamente con la versión estable de Chrome 89 en marzo de 2021.

Cómo probar el rendimiento con Lighthouse

Preguntas de metodología

Fuera de la caja, Lighthouse revisa una página a la vez.

Una puntuación de página única no representa su sitio, y una página de destino rápida no significa un sitio rápido.

Pruebe varios tipos de páginas en su sitio.

Identifique sus tipos de páginas principales, plantillas y puntos de conversión de objetivos (páginas de registro, suscripción y pago).

Página de muestra de inventario de prueba

URL Tipo de página
/ Página de inicio
/herramientas Plantilla de categoría
/ herramientas / destornillador Plantilla de página de lista de productos
/ acme / deluxe-yunque Plantilla de página de detalles del producto
/ Carro Carretilla
/ revisa Revisa
/confirmación de pedido Confirmación de pedido
/ Blog Raíz del blog
/ blog / correcaminos-101 Plantilla de blog

Antes de comenzar la optimización, ejecute Lighthouse en cada una de sus páginas de muestra y guarde los datos del informe.

Registre sus puntuaciones y la lista de mejoras a realizar.

Evite la pérdida de datos guardando los resultados JSON y utilizando Lighthouse Viewer cuando se necesita información detallada sobre los resultados.

Optimice su cartera de pedidos utilizando el ROI

Poner en práctica los recursos de desarrollo sobre las recomendaciones de SEO es difícil.

Un SEO interno podría destruir su páncreas al tener un pastel de cumpleaños por cada cumpleaños tardío. O al menos aprender a odiar el pastel.

En mi experiencia como SEO corporativo interno, el truco para priorizar las iniciativas de rendimiento es tener los números para respaldar la inversión.

Este punto de partida se convertirá en signos de dólar que servirán para justificar y recompensar los esfuerzos de desarrollo.

Es muy probable que tenga más de un área marcada durante la prueba. ¡Es bueno!

Si se está preguntando qué cambios serán los mejores para su inversión, consulte la Calculadora de puntaje de Lighthouse.

Cómo ejecutar pruebas de faros

También lo son muchos caminos que conducen a Oz. Claro, algunos espantapájaros pueden ser especialmente ruidosos con un cierto tono de ladrillo, pero estos son tus objetivos.

Publicidad

Continuar leyendo a continuación

¿Busca incorporar pruebas de SEO en el proceso de publicación? Es hora de aprender un poco sobre la NPM.

¿Tiene menos de cinco minutos para prepararse para una reunión con un cliente potencial? Unos pocos informes únicos deberían funcionar.

Independientemente de la forma en que se ejecute, de forma predeterminada en el dispositivo móvil, a menos que tenga un caso de uso especial para el escritorio.

Para informes ad hoc: Chrome Devtools

Pruebe una página a la vez con el panel insignia en Chrome DevTools. Dado que el informe emulará la experiencia de un usuario al utilizar su navegador, utilice una instancia de incógnito con todas las extensiones y el caché del navegador desactivados.

Consejo profesional: Crea un perfil de Chrome para la prueba. Manténgalo local (sin sincronización habilitada, guarde la contraseña o enlace a una cuenta de Google existente) y no instale extensiones para el usuario.

Cómo ejecutar un buque insignia de prueba con Chrome DevTools

    1. Abre una instancia de incógnito de Chrome.
    2. Vaya al panel Red de Chrome Developer Tools (Comando + Opción + I en Mac o Ctrl + Shift + I en Windows y Linux).
    3. Marque la casilla para deshabilitar la caché.
    4. Ve al panel de Faro.
    5. Haga clic en Generar informe.
    6. Guarda el archivo.

Publicidad

Continuar leyendo a continuación

Beneficios de ejecutar Lighthouse desde DevTools

Contras de ejecutar Lighthouse desde DevTools

  • Un informe a la vez.
  • Requiere que guarde manualmente los resultados.

Para probar con frecuencia las mismas páginas: web.dev

Es como DevTools, ¡pero no tienes que acordarte de desactivar todas esas molestas extensiones!

  1. Visite web.dev/measure/.
  2. Inicia sesión con tu cuenta de Google.
  3. Ingrese su URL.
  4. Haga clic en Ejecutar auditoría.

Beneficios de ejecutar el buque insignia de web.dev

  • ¡Capture una ingeniosa cronología de resultados! (Siempre que esté conectado).

Lanzar Lighthouse desde web.dev

Contras de ejecutar Lighthouse en web.dev

  • Un informe a la vez.
  • Deberá recordar qué URL está rastreando a lo largo del tiempo.

Para pruebas a gran escala (y de sentido común): línea de comandos de nodo

  1. Instale npm.
    (Consejo para Mac Pro: use homebrew para evitar desagradables problemas de adicción).
  2. Instale el módulo del nodo Lighthouse con
    npm install -faro g
  3. Ejecute un solo texto con
    faro 
  4. Ejecute pruebas en listas de usuario mediante la ejecución de pruebas mediante programación.

Beneficios de ejecutar Lighthouse desde Node

Publicidad

Continuar leyendo a continuación

  • Se pueden ejecutar muchos informes a la vez.
  • Se puede configurar para que se ejecute automáticamente para mantenerse al día con los cambios a lo largo del tiempo.

Contras de ejecutar el faro desde el nudo

  • Requiere conocimientos de codificación.
  • Configuración más larga.

Explicación de las métricas de rendimiento del faro

Métricas de rendimiento de faro para referencias técnicas "ancho =" 760 "alto =" 131 "tamaños =" (ancho máximo: 760 px) 100vw, 760 px "srcset =" https://cdn.seoconsem.com/wp-content / uploads / 2019/02 / lighthouse-metrics-768x132.png 768w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/lighthouse-metrics-480x82.png 480w, https: // cdn .seoconsem. com / wp-content / uploads / 2019/02 / lighthouse-metrics-680x117.png 680w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/lighthouse-metrics-1024x176.png 1024w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/lighthouse-metrics.png 1446w "src =" https://cdn.seoconsem.com/wp-content/uploads/2019/02/ lighthouse-metrics-768x132.png

En las versiones 6 y 7, la puntuación de rendimiento de Lighthouse consta de siete métricas, cada una de las cuales aporta un porcentaje de la puntuación de rendimiento total.

Nombre de métrica Peso
Pintura de contenido más grande (LCP) 25%
Tiempo total de bloqueo (TBT) 25%
Primera pintura con contenido (FCP) 15%
Índice de velocidad (SI) 15%
Tiempo para interactuar (TTI) 15%
Desplazamiento de diseño acumulativo (CLS) 5%

Pintura de contenido más grande (LCP)

Qué representa: Percepción de un usuario de la experiencia de carga.

Ponderación de la puntuación de rendimiento de Lighthouse: 25%

Qué mide: El punto en la línea de tiempo de carga de la página donde la imagen o bloque de texto más grande de la página es visible en la ventana.

Publicidad

Continuar leyendo a continuación

Cómo se mide: Lighthouse extrae datos LCP de la herramienta de rastreo de Chrome.

¿Es la pintura con mayor contenido un núcleo web vital? ¡Si!

Puntuación LCP

Objetivo: lograr LCP en <2,5 segundos.

Tiempo LCP
(en milisegundos)
Codigo de color
0 hasta 2500 Verde (rápido)
2.501 hasta 4.000
Más de 4000 Rojo (lento)

¿Qué elementos pueden formar parte del LCP?

  • Texto.
  • Imagenes
  • Videos.
  • Imágenes de fondo.

¿Qué cuenta como LCP en su página?

¡Depende! LCP generalmente varía según el modelo de página.

Esto significa que puede medir un puñado de páginas utilizando la misma plantilla y configurar LCP.

Publicidad

Continuar leyendo a continuación

Cómo configurar LCP usando Chrome Devtools

  1. Abre la página en Chrome.
  2. Vaya al panel Rendimiento de las herramientas de desarrollo (Comando + Opción + I en Mac o Ctrl + Shift + I en Windows y Linux).
  3. Pase el cursor sobre el marcador LCP en la sección Tiempos.
  4. El elemento o elementos que corresponden a LCP se detallan en el campo Nodo asociado.

Métricas de rendimiento de Lighthouse: marketing de LCP en DevTools resaltando y declarando el nodo para LCP "width =" 760 "height =" 453 "size =" (max-width: 760px) 100vw, 760px "srcset =" https: // cdn .seoconsem .com / wp-content / uploads / 2020/12 / plus grand-contentful-paint-devtools-5fcd7f4a5ebbd-768x458.jpg 768w, https://cdn.seoconsem.com/wp-content/uploads/2020/12 / mayor- contentful-paint-devtools-5fcd7f4a5ebbd-480x286.jpg 480w, https://cdn.seoconsem.com/wp-content/uploads/2020/12/largest-contentful-paint-devtools-5fcd7f4a5ebbd-680x40 680w, https //cdn.seoconsem.com/wp-content/uploads/2020/12/largest-contentful-paint-devtools-5fcd7f4a5ebbd.jpg 780w "src =" https://cdn.seoconsem.com/wp-content / uploads / 2020/12 / large-content-painting-devtools-5fcd7f4a5ebbd-768x458.jpg

¿Qué causa un LCP defectuoso?

Un mal LCP generalmente proviene de cuatro problemas:

  1. Tiempos de respuesta del servidor lentos.
  2. Representación de bloques de JavaScript y CSS.
  3. Tiempo de carga de recursos.
  4. Representación del lado del cliente.

Cómo arreglar un LCP deficiente

Si la causa es un tiempo de respuesta lento del servidor:

  • Optimice su servidor.
  • Dirija a los usuarios a un CDN cercano.
  • Recursos en caché.
  • Sirva las páginas HTML primero.
  • Establezca rápidamente conexiones con terceros.

Si la causa es una falla en la representación de JavaScript y CSS:

  • Minimice el CSS.
  • Aplazar CSS no crítico.
  • Revisión en línea de CSS.
  • Reducir y comprimir archivos JavaScript.
  • Aplazar JavaScript no utilizado.
  • Minimice los polyfills no utilizados.

Si la causa es el tiempo de carga del recurso:

  • Optimiza y comprime imágenes.
  • Precargue recursos importantes.
  • Comprime archivos de texto.
  • Proporcionar diferentes activos en función de la conexión de red (servicio adaptativo).
  • Almacene los activos en caché con un trabajador de servicio.

Si la causa es una representación del lado del cliente:

  • Minimice JavaScript crítico.
  • Utilice una estrategia de representación diferente (consulte el desglose de las opciones de representación en la Guía angular).

Recursos para mejorar LCP

Tiempo total de bloqueo (TBT)

Qué representa: Capacidad de respuesta a la entrada del usuario.

Publicidad

Continuar leyendo a continuación

Ponderación de la puntuación de rendimiento de Lighthouse: 25%

Qué mide: TBT mide el tiempo entre la primera pintura Contentful y el tiempo de interactividad. TBT es el equivalente en laboratorio del First Entry Delay (FID): los datos de campo utilizados en el informe de Chrome UX y la señal de clasificación de la experiencia de la página siguiente de Google.

Cómo se mide: Tiempo total que el hilo principal está ocupado con tareas que duran más de 50 ms. Si una tarea tarda 80 ms en ejecutarse, 30 ms de ese tiempo se contarán en TBT. Si una tarea tarda 45 ms en ejecutarse, se agregarán 0 ms a TBT.

¿Es el tiempo total de bloqueo crítico para Web Core? ¡Si!

Puntaje TBT

Objetivo: lograr una puntuación TBT de menos de 300 milisegundos.

Tiempo TBT
(en milisegundos)
Codigo de color
0 hasta 300 Verde (rápido)
301-600
Más de 600 Rojo (lento)

El primer retraso de entrada, datos de campo equivalentes a TBT, tiene diferentes umbrales.

Tiempo de FID
(en milisegundos)
Codigo de color
0 hasta 100 Verde (rápido)
101-300
Más de 300 Rojo (lento)

Tareas largas y tiempo total de bloqueo

Publicidad

Continuar leyendo a continuación

El TBT mide las tareas largas, aquellas que toman más de 50 ms.

Cuando un navegador carga su sitio, hay esencialmente una cola de scripts de una sola línea esperando ser ejecutados.

Cualquier entrada del usuario debe ir a esta misma cola.

Cuando el navegador no puede responder a la entrada del usuario porque se están ejecutando otras tareas, el usuario percibe esto como un retraso.

Esencialmente, las tareas largas son como si esa persona en tu cafetería favorita tardara demasiado en pedir una bebida.

Como alguien que pide un 2% de venti mousse de vainilla con cuatro bombas de grasa y cinco de espuma de moca, las tareas largas son una fuente importante de malas experiencias.

Las tareas largas son una fuente importante de mala experiencia de usuario. "Ancho =" 760 "alto =" 333 "tamaños =" (ancho máximo: 760 px) 100vw, 760 px "srcset =" https://cdn.seoconsem.com/wp -content / uploads / 2019/02 / short- vs-long-tasks-1-768x337.png 768w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/short-vs-long- tasks-1-480x210.png 480w, https: //cdn.seoconsem.com/wp-content/uploads/2019/02/short-vs-long-tasks-1-680x298.png 680w, https: // cdn. Searchenginejournal.com/wp-content/uploads/2019/02/short-vs-long-tasks-1-1024x449.png 1024w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/short -vs-long-tasks-1-1600x702.png 1600w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/short-vs-long-tasks-1.png 1756w "src =" https://cdn.seoconsem.com/wp-content/uploads/2019/02/short-vs-long-tasks-1-768x337.png

¿Qué está causando un TBT alto en su página?

Publicidad

Continuar leyendo a continuación

JavaScript pesado.

Eso es todo.

Cómo ver TBT usando Chrome Devtools

  1. Abra la página en Chrome.
  2. Vaya al panel Rendimiento de las herramientas de desarrollo (Comando + Opción + I en Mac o Ctrl + Shift + I en Windows y Linux).
  3. Haga clic en el botón de recarga para iniciar un seguimiento de rendimiento.
  4. Busque los marcadores rojos en la esquina derecha de las tareas. Estos indican tareas largas que tomaron más de 50 ms.

Una guía técnica de SEO para las métricas de rendimiento del faro "width =" 582 "height =" 201 "tamaños =" (ancho máximo: 582px) 100vw, 582px "srcset =" https://cdn.seoconsem.com/ wp-content / uploads / 2020/12 / tbt-long-tasks-using-devtools-6007aa7880840.jpg 582w, https://cdn.seoconsem.com/wp-content/uploads/2020/12/tbt-long-tasks -using-devtools -6007aa7880840-480x166.jpg 480w "src =" https://cdn.seoconsem.com/wp-content/uploads/2020/12/tbt-long-tasks-using-devtools-6007aa7880840.jpg

Cómo arreglar un TBT pobre

  • Separe las tareas largas.
  • Optimice su página para que esté lista para la interacción.
  • Utilice un trabajador web.
  • Reducir el tiempo de ejecución de JavaScript.

Recursos para mejorar los TBT

Primera pintura con contenido (FCP)

Qué representa: FCP marca el momento en que se pinta (visible) el primer texto o imagen.

Ponderación de la puntuación de rendimiento de Lighthouse: 15%

Qué mide: En el momento en que puedo ver la página que solicité, responde. Mi pulgar puede dejar de flotar sobre el botón de retroceso.

Publicidad

Continuar leyendo a continuación

Cómo se mide: Su puntaje FCP en Lighthouse se mide comparando los tiempos FCP de su página con los tiempos FCP para los datos reales del sitio web almacenados por el archivo HTTP. Su FCP crece si es más rápido que otras páginas en el archivo HTTP.

¿First Contentful Paint es esencial para la web? No

Puntuación FCP

Objetivo: llegar al FCP en <2 segundos.

Tiempo FCP

(en segundos)

Codigo de color Puntuación FCP (percentil de archivo HTTP)
0-2 Verde (rápido) 75-100
2-4 Naranja (moderado) 50-74
4 Rojo (lento) 0-49

¿Qué elementos pueden formar parte del FCP?

El tiempo necesario para hacer visible el primer elemento en el DOM es el FCP. Todo lo que ocurra antes de un elemento que muestre contenido no blanco en la página (excluidos los iframes) cuenta para el FCP.

Dado que los iframes no se consideran parte de FCP, si son el primer contenido que se muestra, FCP continuará contando hasta que se cargue el primer contenido que no sea iframe, pero se cargue el tiempo de carga del primer contenido que no sea iframe. El iframe no se cuenta en el FCP.

Publicidad

Continuar leyendo a continuación

La documentación sobre FCP también señala que el tiempo de carga de la fuente a menudo está influenciado por el tiempo de carga de la fuente y hay consejos para mejorar la carga de la fuente.

Cómo configurar FCP usando Chrome Devtools

  1. Abra la página en Chrome.
  2. Vaya al panel Rendimiento de las herramientas de desarrollo (Comando + Opción + I en Mac o Ctrl + Shift + I en Windows y Linux).
  3. Haga clic en el marcador FCP en la sección Tiempos.
  4. La pestaña de resumen tiene una marca de tiempo con el FCP en ms.

Cómo mejorar FCP

Para que el contenido se muestre al usuario, el navegador primero debe descargar, analizar y procesar cualquier hoja de estilo externa que encuentre antes de poder mostrar o representar contenido en la pantalla de un usuario.

La forma más rápida de evitar el retraso de los recursos externos es utilizar estilos en línea para el contenido de la mitad superior de la página.

Para mantener su sitio escalable de una manera sostenible, use una herramienta automatizada como el ático de Apache y mod_pagespeed. Estas soluciones vienen con algunas restricciones de funciones, requieren pruebas y pueden no ser adecuadas para todos.

Universalmente, todos podemos mejorar la duración de nuestro sitio para la primera pintura de contenido al reducir el alcance y la complejidad de los cálculos de estilo.

Publicidad

Continuar leyendo a continuación

Si un estilo no está en uso, elimínelo. Puede identificar CSS no utilizado con la función de cobertura de código incorporada de Chrome Dev Tool.

Utilice mejores datos para tomar mejores decisiones.

De manera similar a TTI, puede capturar métricas de usuarios reales para FCP utilizando Google Analytics para correlacionar las mejoras con los KPI.

Índice de velocidad

Qué representa: cuánto es visible a la vez mientras se carga.

Ponderación de la puntuación de rendimiento de Lighthouse: 15%

Qué mide: El índice de velocidad es el tiempo promedio que se muestran las partes visibles de la página.

Cómo se mide: La medición de la calificación de velocidad de Lighthouse proviene de un módulo de nodo llamado Speedline.

Tendrá que preguntar a los amables ayudantes en webpagetest.org para obtener más detalles, pero en términos generales, los puntajes de Speedline varían según el tamaño de la ventana (se lee como la pantalla del dispositivo) y tiene un algoritmo para Calcule la integridad de cada imagen.

Índice de velocidad "ancho =" 628 "alto =" 336 "tamaños =" (ancho máximo: 628 px) 100vw, 628 px "srcset =" https://cdn.seoconsem.com/wp-content/uploads/2019/02 / speedline-algo-visual.png 628w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/speedline-algo-visual-480x257.png 480w "src =" https: // cdn. Searchenginejournal .com / wp-content / uploads / 2019/02 / speedline-algo-visual.png

¿Es Speed ​​Index un núcleo web vital? No

Publicidad

Continuar leyendo a continuación

Notación SI

Objetivo: alcanzar el SI en <4,3 segundos.

SI tiempo

(en segundos)

Codigo de color Puntuación FCP (percentil de archivo HTTP)
0–4,3 Verde (rápido) 75-100
4.4-5.8 Naranja (moderado) 50-74
5.8+ Rojo (lento) 0-49

Cómo mejorar el SI

La puntuación de velocidad refleja la ruta de representación crítica de su sitio. Un recurso "crítico" significa que el recurso es necesario para la primera pintura o es crucial para la funcionalidad básica de la página.

Cuanto más larga y densa sea la ruta, más lento será su sitio para entregar una página visual. Si su ruta está optimizada, entregará contenido a los usuarios más rápido y obtendrá una puntuación más alta en el índice de velocidad.

Cómo afecta la ruta crítica al renderizado

Impacto de la ruta crítica en el renderizado: visual "width =" 611 "height =" 300 "tamaños =" (max-width: 611px) 100vw, 611px "srcset =" https://cdn.seoconsem.com/wp-content / uploads / 2019/02 / progress-rendering.png 611w, https://cdn.seoconsem.com/wp-content/uploads/2019/02/progressive-rendering-480x236.png 480w "src =" https: // cdn .seoconsem.com / wp-content / uploads / 2019/02 / progress-rendering.png

Las recomendaciones emblemáticas que normalmente se asocian con una ruta de procesamiento crítica lenta incluyen:

Publicidad

Continuar leyendo a continuación

  • Minimiza el trabajo del hilo principal.
  • Reducir el tiempo de ejecución de JavaScript.
  • Reduzca la profundidad de las solicitudes críticas.
  • Elimina los recursos que bloquean la representación
  • Aplazar las imágenes fuera de la pantalla.

Tiempo de interactividad

Qué representa: Capacidad de respuesta de la carga; identificar dónde una página parece receptiva pero aún no lo es.

Ponderación de la puntuación de rendimiento de Lighthouse: 15%

Qué mide: El tiempo entre el momento en que la página comienza a cargarse y el momento en que se cargan sus recursos primarios y son capaces de responder a la entrada del usuario.

Cómo se mide: TTI mide el tiempo que tarda una página en convertirse completamente interactivo. Una página se considera completamente interactiva cuando:

  • La página muestra contenido útil, que se mide con la primera pintura de contenido.
  • Los controladores de eventos se guardan para los elementos de página más visibles.
  • La página responde a las interacciones del usuario en 50 milisegundos.

Publicidad

Continuar leyendo a continuación

¿Es el tiempo de interactividad vital para la web? No

Calificación TTI

Objetivo: lograr una puntuación TTI de menos de 3,8 segundos.

Puntuación TTI

(en segundos)

Codigo de color
0-3,8 Verde (rápido)
3.8 – 7.3 Naranja (moderado)
7.3+ Rojo (pobre)

Desplazamiento de diseño acumulativo (CLS)

Qué representa: La percepción de un usuario de la estabilidad visual de una página.

Ponderación de la puntuación de rendimiento de Lighthouse: 5% *

* Espere que CLS aumente su ponderación a medida que elimina errores. La apuesta inteligente dice Q4 2021.

Qué mide: Cuantifica los elementos de la página desplazados hasta que la página ha terminado de cargarse.

Cómo se mide: A diferencia de otras métricas, CLS no se mide a lo largo del tiempo. En cambio, es una medida calculada en función del número de fotogramas en los que se mueven los elementos y la distancia total en píxeles que se mueven los elementos.

Métricas de rendimiento de Lighthouse: Puntuación de diseño CLS "width =" 760 "height =" 367 "tamaños =" (ancho máximo: 760px) 100vw, 760px "srcset =" https://cdn.seoconsem.com/wp-content/uploads /2020/12/cls-measurement-6007addc33e58-768x371.jpg 768w, https://cdn.seoconsem.com/wp-content/uploads/2020/12/cls-measurement-6007addc33e58-480x232.jpg 480w, https: / /cdn.seoconsem.com/wp-content/uploads/2020/12/cls-measurement-6007addc33e58-680x328.jpg 680w, https://cdn.seoconsem.com/wp-content/uploads/2020/12/cls- medida-6007addc33e58.jpg 968w "src =" https://cdn.seoconsem.com/wp-content/uploads/2020/12/cls-measurement-6007addc33e58-768x371.jpg

Puntuación CLS

Publicidad

Continuar leyendo a continuación

Objetivo: lograr una puntuación CLS inferior a 0,1.

Puntuación CLS Codigo de color
0-0,01 Verde (bueno)
0,1-0,25 Naranja (para mejorar)
0.25+ Rojo (pobre)

¿Qué elementos pueden formar parte de CLS?

Cualquier elemento visual que aparezca encima del pliegue en cualquier punto de la carga.

Así es: si carga su pie de página primero, luego el contenido principal de la página, su CLS va a doler.

Causas de un CLS deficiente

  • Imágenes sin dimensiones.
  • Anuncios, integraciones e iframes adimensionales.
  • Contenido inyectado dinámicamente.
  • Fuentes web que causan FOIT / FOUT.
  • Acciones que esperan una respuesta de la red antes de actualizar el DOM.

Cómo configurar CLS con las herramientas de desarrollo de Chrome

  1. Abre la página en Chrome.
  2. Vaya al panel Rendimiento de las herramientas de desarrollo (Comando + Opción + I en Mac o Ctrl + Shift + I en Windows y Linux).
  3. Desplácese y muévase de izquierda a derecha sobre las capturas de pantalla de carga (asegúrese de que la casilla de verificación de capturas de pantalla esté marcada).
  4. Esté atento a los elementos que rebotan después de la primera pintura para identificar los elementos que causan CLS.

Cómo mejorar CLS

Publicidad

Continuar leyendo a continuación

Una vez que identifique los elementos infractores, deberá actualizarlos para que sean estables mientras se carga la página.

Par exemple, si les annonces à chargement lent sont à l&#39;origine du score CLS élevé, vous pouvez utiliser des images d&#39;espace réservé de la même taille pour remplir cet espace lors du chargement de l&#39;annonce afin d&#39;éviter le décalage de page.

Voici quelques moyens courants d&#39;améliorer CLS:

  • Incluez toujours les attributs de taille de largeur et de hauteur sur les images et les éléments vidéo.
  • Réservez de l&#39;espace pour les espaces publicitaires (et ne le réduisez pas).
  • Évitez d&#39;insérer un nouveau contenu au-dessus du contenu existant.
  • Faites attention lorsque vous placez des annonces non collantes près du haut de la fenêtre.
  • Préchargez les polices.

Ressources CLS

Publicidad

Continuar leyendo a continuación

Conclusión

La complexité des mesures de performance reflète les défis auxquels tous les sites sont confrontés.

Nous utilisons des mesures de performance comme proxy pour l&#39;expérience utilisateur – cela signifie prendre en compte certaines licornes.

Des outils tels que Google&#39;s Test My Site et Combien coûte mon site? peut vous aider à présenter des arguments de conversion et axés sur le client pour expliquer pourquoi la performance est importante.

Espérons qu&#39;une fois que votre projet aura du succès, ces définitions vous aideront à traduire la mesure de performance unique de Lighthouse en tickets d&#39;action pour une équipe d&#39;ingénieurs qualifiés et collaboratifs.

Suivez vos données et criez-les depuis les toits.

Autant Google a du mal à quantifier les expériences qualitatives, autant les professionnels du référencement et les développeurs doivent décoder comment traduire un concept en code.

Testez, itérez et partagez ce que vous apprenez! J&#39;ai hâte de voir de quoi tu es capable, belle licorne.

Más recursos:

Publicidad

Continuar leyendo a continuación


Créditos de imagen

Todas las capturas de pantalla fueron tomadas por el autor, enero de 2021