Cómo optimizar la velocidad de carga con Lighthouse

Cómo optimizar la velocidad de carga con Lighthouse

Lighthouse es una herramienta automatizada de código abierto para mejorar la calidad de sus aplicaciones web. Está integrado directamente en el panel de Auditorías de Chrome DevTools. También puede ejecutar Lighthouse desde la línea de comandos o instalar la extension de Chrome de Lighthouse. En este artículo nos centraremos en cómo optimizar la velocidad de carga con Lighthouse

Es necesario auditar la velocidad de carga de nuestros sitios web tanto para dispositivos de escritorio y móviles.

Por que optimizar la velocidad de carga con Lighthouse para dispositivos móviles

 

La principal razón es que la velocidad de carga móvil de una web es un factor de clasificación para motores de búsqueda como Google y Bing. Google ya ha develado que el factor de la velocidad de carga forma parte de sus criterios de evaluación habituales, ahora los resultados de búsquedas (SERPs) realizadas desde dispositivos móviles estarán afectadas por cuan rápido cargan.

Google se centra en la experiencia  de usuario, el usuario es quien importa; desde contenido centrado en las necesidades del usuario, capacidad de respuesta,  hasta la velocidad de carga móvil (rendimiento).

Hoy en día, se habla más de la sensación de velocidad que de velocidad. Las primeras impresiones importan. Los clientes son impacientes, por lo que la velocidad de su sitio tiene un gran impacto en las tasas de conversión y rebote

La verdad es que el rendimiento es relativo:

  • Un sitio puede ser rápido para un usuario (en una red rápida con un dispositivo potente) pero lento para otro usuario (en una red lenta con un dispositivo de gama baja).
  • Dos sitios pueden terminar de cargarse exactamente en el mismo período de tiempo, pero uno puede parecer que se carga más rápido (si carga contenido progresivamente en lugar de esperar hasta el final para mostrar algo).
  • Puede parecer que un sitio se carga rápidamente pero luego responde lentamente (o nada) a la interacción del usuario.

Métricas por las que el Usuario percibe el Rendimiento:

Existen varios otros tipos de métricas que son relevantes para la forma en que los usuarios perciben el rendimiento.

  • Velocidad de carga percibida: la rapidez con que una página puede cargar y mostrar todos sus elementos visuales en la pantalla.
  • Capacidad de respuesta de carga: la rapidez con que una página puede cargar y ejecutar cualquier código JavaScript requerido para que los componentes respondan rápidamente a la interacción del usuario
  • Capacidad de respuesta en tiempo de ejecución: después de cargar la página, qué tan rápido puede responder la página a la interacción del usuario.
  • Estabilidad visual: ¿los elementos en la página cambian de manera que los usuarios no esperan e interfieren potencialmente con sus interacciones?
  • Suavidad: ¿las transiciones y animaciones se procesan a una velocidad de fotogramas constante y fluyen de un estado a otro?

Métricas importantes para medir

Si bien esta lista incluye métricas que miden muchos de los diversos aspectos del rendimiento relevantes para los usuarios, no incluye todo (por ejemplo, la capacidad de respuesta y la fluidez en tiempo de ejecución no están cubiertas actualmente).

Lighthouse es una herramienta muy útil de Google.

Cada vez que se propone mejorar el rendimiento de carga de una página, siempre comience con la auditoría es decir; con LightHouse.

La auditoría Lighthouse tiene dos funciones importantes.

 

  • Crea una línea de base para medir los cambios posteriores.
  • Proporciona consejos prácticos sobre cómo mejorar.

Cómo optimizar la velocidad de carga con Lighthouse:

  1. Cargue la pagina web que desea auditar con Lighhouse.
  2. Si no instaló la extension de Chrome de Lighthouse, hágalo.
  3. Abra Lighthouse y verá un conjunto de opciones de configuración.

Cómo optimizar la velocidad de carga con Lighthouse
La opción Móvil simula un dispositivo móvil cambiando
la cadena de agente de usuario y cambia el tamaño de la ventana gráfica.
La opción de escritorio prácticamente deshabilita las cosas móviles.
Lighthouse controla qué categorías de auditorías desea ejecutar.

   4. Haga clic en Generate report.

Lighthouse generará un reporte dependiendo de las categorías que haya seleccionado:

Reportes de Lighthouse
Ejemplo de reporte de Lighthouse

 

Ahora tenemos un informe. Esta es nuestra línea de base.

Comprendiendo el Informe

El número en la parte superior de su informe es tu puntaje general de rendimiento para cada categoría. Cuanto más alto, mejor.

Debajo de eso tenemos la sección Métrica.

Cada métrica proporciona información sobre un aspecto diferente de la experiencia de carga.

Por ejemplo, primera pintura satisfactoria (First Contentful Paint) mide cuando el contenido principal de la página se muestra al usuario mientras que Time to Interactive mide cuándo la página está lista para manejar las interacciones del usuario.

Desplácese sobre una métrica para obtener más información al respecto, y haga clic en más información para leer su documentación.

Debajo de las métricas hay una colección de capturas de pantalla que muestran cómo la página se veía como cargada.

La sección de Oportunidades proporciona consejos específicos.
sobre cómo mejorar el rendimiento de la página.

La sección de Diagnóstico le brinda información más detallada
sobre lo que sucedió mientras se cargaba la página, y la sección de auditorías aprobadas te muestra qué está haciendo bien el sitio.

Ahora que tenemos una línea de base, podemos comenzar a experimentar con cambios que esperamos acelerar la página.

Vamos a hacer un cambio a la vez y luego ejecutar una auditoría para medir cómo aisló ese problema.

El cambio afecta el rendimiento. Si realizamos múltiples cambios y luego realizamos una auditoría, no estamos seguros de cómo cada cambio afecta a la página.

¿Los Resultados pueden verse afectados?

Los resultados se ven afectados por el entorno de la máquina y el contexto local:

  • conexión a internet.
  • procesador del equipo.
  • extensiones Chrome funcionando en segundo plano, es por esto que se recomienda cargar la página desde el modo incógnito (Ctrl+Mayuscula+N)
  • sesiones de usuario abiertas en sitios.
  • versión de Lighthouse que utilices.

Ahora debería tener una idea bastante más clara de cómo optimizar la velocidad de carga con Lighthouse.

Contenido Relacionado:

Core Web Vitals. Cómo Medir Estas Señales De Calidad
Beneficios de las aplicaciones web progresivas para empresas
Cumulative Layout Shift
Largest Contentful Paint 
First Input Delay
Speed Index

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

This function has been disabled for Blog de Marketing digital.