Introducción a Chrome Lighthouse

Chrome Lighthouse ha existido por un tiempo, pero ¿y si le pido que explique qué hace, puede explicarlo vívidamente?

Descubrí que muchos desarrolladores web, incluidos los principiantes, no han oído hablar de esta herramienta y los que sí la han probado todavía no la han probado, eso no está bien :(.

En este artículo, te presentaré Chrome Lighthouse, qué hace y cómo comenzar a usarlo.

PD: Este artículo se publicó por primera vez en mi blog.

Empecemos :)

Según Wikipedia, un faro es una torre, edificio u otro tipo de estructura diseñada para emitir luz desde un sistema de lámparas y lentes y para servir como ayuda de navegación para los pilotos marítimos en el mar o en vías navegables interiores.

Bien, convierta esto en un término tecnológico;

Lighthouse es una torre, edificio u otro tipo de estructura diseñada para emitir luz desde un sistema en el panel "Auditorías" en las Herramientas para desarrolladores de Chrome y para servir como guía para los desarrolladores.

¿Tiene algún sentido? :)

Bueno, Lighthouse es una herramienta desarrollada por Google que analiza aplicaciones web y páginas web, recopilando métricas de rendimiento modernas e información sobre las mejores prácticas de los desarrolladores.

Piense en Lighthouse como el velocímetro de un automóvil que controla y equilibra el límite de velocidad del automóvil.

Básicamente, Lighthouse trabaja con las mejores prácticas de los desarrolladores y las métricas de rendimiento. Ejecuta verificaciones en una aplicación web y le brinda comentarios sobre errores, prácticas por debajo del estándar, consejos para un mejor rendimiento y cómo solucionarlos.

Según Google Developers Docs

Lighthouse es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. Puede ejecutarlo en cualquier página web, pública o que requiera autenticación. Tiene auditorías de rendimiento, accesibilidad, aplicaciones web progresivas y más. Puede ejecutar Lighthouse en Chrome DevTools, desde la línea de comandos o como un módulo de nodo. Le da a Lighthouse una URL para auditar, ejecuta una serie de auditorías en la página y luego genera un informe sobre el rendimiento de la página. A partir de ahí, utilice las auditorías fallidas como indicadores sobre cómo mejorar la página. Cada auditoría tiene un documento de referencia que explica por qué la auditoría es importante y cómo solucionarlo.

Eso es prácticamente todo sobre Lighthouse. Audita la URL de una aplicación web y genera un informe que le indica qué tan mala y buena es su aplicación web de acuerdo con los estándares web y las mejores prácticas de los desarrolladores. También se adjunta a cada sección del informe la documentación que explica por qué se auditó esa parte de su aplicación, por qué debería mejorar esa parte de su aplicación y cómo solucionarlo.

Aquí hay una demostración del informe de auditorías de Lighthouse para este blog //bolajiayodeji.com

Bastante bien, ¿verdad? :)

Lo que debe tener en cuenta es que no obtuve excelentes puntajes como este en mi primera auditoría. Tuve que usar mi primer informe para corregir y mejorar el rendimiento y la calidad de mi aplicación.

Esta es la idea detrás de Lighthouse, es identificar y solucionar problemas comunes que afectan el rendimiento, la accesibilidad y la experiencia del usuario de sus sitios.

Ahora, pasemos a la parte interesante, ¡ CÓMO EMPEZAR!

LightHouse está disponible en tres flujos de trabajo

  • Herramientas para desarrolladores de Chrome
  • Línea de comando (nodo)
  • Una extensión de Chrome

Yo personalmente prefiero usar LightHouse en Dev Tools. Usar la extensión no tiene sentido ya que la herramienta de desarrollo y la extensión funcionan en el mismo navegador Chrome, bueno, nuestra preferencia varía, use lo que funcione mejor para usted.

Lighthouse estuvo disponible por primera vez solo con la extensión de Chrome antes de agregarse a Chrome DevTools.

Usar Lighthouse en la línea de comandos también es genial, (para geeks :))

¡¡¡Empecemos!!!

[1] Ejecute Lighthouse en Chrome DevTools

  • Descargue el navegador web Google Chrome aquí
Tenga en cuenta que Lighthouse solo se puede ejecutar en una computadora de escritorio y no en un dispositivo móvil
  • Vaya a la URL que desea auditar en Google Chrome.
Puede auditar cualquier URL en la web.
  • Abra Chrome DevTools
Command+Option+C (Mac) Control+Shift+C (Windows, Linux, Chrome OS).
  • Haga clic en el panel Auditorías

A la izquierda está la ventana gráfica de la página que será auditada, aquí está mi blog :). A la derecha está el panel Auditorías de Chrome DevTools, que ahora funciona con Lighthouse

  • Haga clic en Ejecutar auditorías
DevTools le muestra una lista de categorías de auditoría. Asegúrese de dejarlos todos marcados. Si desea personalizar qué parte de su aplicación se auditará, puede configurarlo marcando las categorías que desea auditar.
  • Después de 60 a 90 segundos, dependiendo de la potencia de Internet, Lighthouse le proporciona un informe en la página.
No es que la velocidad de Internet y las extensiones preinstaladas puedan afectar las auditorías de Lighthouse. Para una mejor experiencia, ejecute auditorías en modo Icognitopara evitar cualquier interferencia

[2] Ejecuta Lighthouse en la línea de comandos

  • Descargue el navegador web Google Chrome aquí
  • Descargue el nodo aquí, si ya lo tiene instalado, ¡omita este paso!
  • Instalar faro
npm install -g lighthouse # or use yarn: yarn global add lighthouse
La -gbandera lo instala como un módulo global.
  • Ejecute sus auditorías
lighthouse 

Muestra;

lighthouse //bolajiayodeji.com/

De forma predeterminada, Lighthouse escribe el informe en un archivo HTML. Puede controlar el formato de salida pasando banderas.

El informe se puede mostrar en formato HTML o JSON

Muestras de salida:

lighthouse # saves `./_.report.html` lighthouse --output json # json output sent to stdout lighthouse --output html --output-path ./report.html # saves `./report.html` # NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats lighthouse --output json --output html --output-path ./myfile.json # saves `./myfile.report.json` and `./myfile.report.html` lighthouse --output json --output html # saves `./_.report.json` and `./_.report.html` lighthouse --output-path=~/mydir/foo.out --save-assets # saves `~/mydir/foo.report.html` # saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json` lighthouse --output-path=./report.json --output json # saves `./report.json`

Ejecutar $ lighthouse --helppara las opciones de CLI

[3] Ejecuta Lighthouse con la extensión de Chrome

Como dije anteriormente, el flujo de trabajo de DevTools es el mejor ya que proporciona los mismos beneficios que el flujo de trabajo de extensión, con la ventaja adicional de que no se necesita instalación.

Para utilizar este método necesita instalar la extensión, pero si tiene sus motivos, aquí está la guía ;

  • Descargue el navegador web Google Chrome aquí
  • Install the Lighthouse Chrome Extension from the Chrome Webstore.
  • Navigate to the page you want to audit
  • Click Lighthouse Icon.
It should be next to the Chrome address bar. If not, open Chrome’s main menu (the three dots on the upper right) and access it at the top of the menu. After clicking, the Lighthouse menu expands.
  • Click Generate report.
Lighthouse runs its audits against the opened page, then opens up a new tab with a report of the results.

Bingo! You did it

That’s pretty much it, Lighthouse is a great tool, especially for beginners.

It is a very useful tool when it comes to auditing Progressive web apps.

I actually learned so much about optimization and performance standards when I started using Lighthouse. In no time you would become an expert in building full optimized web apps with great performance, accessibility and user experience. :)

Lighthouse is not magic, it was created by humans. It is open source and contributions are welcome. Check out the repository’s issue tracker to find bugs that you can fix, or audits that you can create or improve upon. The issues tracker is also a good place to discuss audit metrics, ideas for new audits, or anything else related to Lighthouse.

Thank you for reading this, after installing and using Lighthouse, share your success stories in the comments!

Also, I just launched my blog where I write articles on web and frontend development, don’t forget to visit and share!!!