No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

An谩lisis con Lighthouse

30/32
Recursos

Recuerda que no podemos mejorar lo que no podemos medir. Para ello vamos a utilizar la herramienta Lighthouse, que nos ayuda a medir temas de accesibilidad, performance, buenas pr谩cticas, entre otras. No tendr谩s que preocuparte por instalar nada, ya que viene embebida en las DevTools de Chrome.

C贸mo acceder a Lighthouse

  1. Abrimos el proyecto en nuestro navegador.

  2. Clic derecho en alguna parte del proyecto. Clic en 鈥淚nspeccionar鈥 para abrir las DevTools.

  3. Al extender la secci贸n de pesta帽as, seleccionamos 鈥淟ighthouse鈥.

  4. Observamos varias opciones que podemos analizar. Puedes seleccionar todas o las que necesites. S贸lo podemos generar un reporte por versi贸n mobile o desktop. Si quieres ambas, genera otro reporte con la opci贸n que te falte.

  5. Una vez hecha la elecci贸n, clic en 鈥淕enerar reporte鈥. Esperamos a que termine de generarlo.

  6. Analizamos los resultados

C贸mo monitorear el performance

Toma en cuenta que no debes frustarte por resultados no perfectos. Mientras se encuentre por encima del 90% significa que tu p谩gina est谩 bien construida. Esto es porque hay muchos factores que determinan estas estad铆sticas como una mala conexi贸n a internet, un mal computador o alg煤n otro incoveniente que no puedas controlar.

El valor m谩s bajo es el performance, o la velocidad de carga de nuestra p谩gina. Revisamos las razones haciendo clic sobre el mismo valor.

Se despliegan todos los detalles que se encontraron. Vamos a la secci贸n de oportunidades.

Al desplegar cada una de las sugerencias que nos hace la herramienta, encontramos que la imagen de la secci贸n comod铆n est谩 algo pesada. Incluso nos recomienda comprimirla para aliviar un poco la puntuaci贸n que nos est谩 dando.
Podr铆amos tambi茅n, por ejemplo, seleccionar un tama帽o de imagen m谩s peque帽o para m贸vil y otro para desktop. De esta manera s贸lo se descargar铆a la que necesite el usuario.

C贸mo monitorear accessibility

Esta parte es muy importante. Lighthouse nos recomienda ajustar mejor los constrastes de ciertas etiquetas de p谩rrafo para personas que tienen problemas de visi贸n. En este caso podr铆as subir la opacidad de ciertas fuentes cuyo fondo tiene un color similar.

Te recomiendo tomar el Curso de Accesibilidad Web para que puedas profundizar m谩s sobre este tema.

Qu茅 puedes hacer con el feature de 鈥渕ejora鈥

Al realizar el an谩lisis en la versi贸n de escritorio vemos c贸mo el performance sube mucho. Esto se debe a que una computadora puede tener mucho m谩s poder de c贸mputo que un dispositivo m贸vil, como en este caso. Si aplicaste muchos estilos y elementos personales es probable que la parte de performance est茅 m谩s baja.

Te recomiendo tomar el Curso de Optimizaci贸n Web de cualquier manera para construir p谩ginas web que vayan a la velocidad de la luz.

Toma en cuenta las recomendaciones que hace Lighthouse ya que es una forma de mejorar tu p谩gina en estos sentidos y lograr que sea mucho m谩s f谩cil y c贸moda de usar para la mayor铆a de usuarios posibles. 隆Haz de esta herramienta un superpoder para mejorar tus proyectos!

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 178

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Si a alguien le sucede lo siguiente, puede instalar la extensi贸n Live Server para VSCode y pulsar el bot贸n situado abajo a la derecha que dice Go Live.

Lighthouse es simplemente fascinante

Se puede incluir en la etiqueta IMG la propiedad loading=鈥渓azy鈥 para que el navegador solo descargue las im谩genes cuando se visualizan.

<img
          loading="lazy"
          src="./assets/img/logo-footer.svg"
          alt="Logo de Batabit 2020"
        />

Version movil de platzi xD me dejo sorprendido la verdad 馃槃

Version Desktop de platzi

El 96 en accesibilidad, me dan por el bendito contraste pero ya que鈥︷煒, se ven bonitos los colores, no quiero cambiarlos 馃槅 al menos se por qu茅 no llego a 100, antes lo ve铆a imposible pero ahora se que no es tan dificil 馃槂

Utilicen esta herramienta en modo incognito, seg煤n he visto las extensiones que tenemos instaladas realentizan el proceso de carga de las p谩ginas y baja la puntuaci贸n.

Si usan firefox tienen que instalar la extension les dejo el link
https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/

Movil

Coputador

Del curso definitivo de HTML y CSS me qued贸 eso de achicar el peso de las img!!

As铆 salieron los resultados:

Mobile

Desktop

Segu铆 todas las recomendaciones que me dec铆a lighthouse, testee nuevamente mi p谩gina y me baj贸 el % de performance. jaja.

鉂わ笍 Si crees que Diego De Granda es un buen instructor :3

Mi repo, espero les guste, tiene un poco mas de detalles responsive y dos animaciones: https://amaurysg.github.io/mobile-first-batatabit/

鈥淣o puedes mejorar lo que no se mide鈥

Me falta mejorar en mobile algunas cosas
Desktop

Mobile

No olviden que es mejor hacer el test en modo inc贸gnito, ya que as铆 no afectar谩n las extensiones, el cach茅 y m谩s cosas que tengan en su navegador鈥 aqu铆 dejo la diferencia entre mis resultados鈥
Normal:

Inc贸gnito

Lo del poder de computo y de donde se este evaluando es cierto e influye bastante. Prueben hacer las mismas pruebas pero ya con el proyecto en producci贸n.

https://educodes.github.io/Batatabit/


Para poder mejorar el perfonmance podemos comprimir las imagenes para que estas pesen menos y sea mas facil cargarlas en la pagina, aqui les dejo unos sitios donde puede hacerlo:


Me siento en paz

Esta herramiento la utilce el curso de chrome dev tools. Analizamos paginas web reales y esta buenisimo lo que te permite revisar.

Para ser el primer proyecto no esta nada mal鈥ienso yo鈥jjj鈥prendiendo cada dia mas鈥 vamos por mas siempre
Mobile

Desktop

La accesibilidad rebaja mucho por lo de los contraste pero asi esta en figma

mi pc no le puedo exigir mucho jeje:

el primer analisis de mobile me dio un perfomance de 55 comprimi la imagen de bitcoin con tinypng y la diferencia fue notoria ,(sin hablar del interenet que no ayuda mucho) tal vez no la ideal pero mejoro muchisimo鈥stoy feliz con este curso he aprendido muchiiiisimo

--lighthouse herramienta que nos ayuda a medir ciertos parametros para la mejora de nuestro proyecto --perfomance implica la velocidad que tarda el proyecto en renderizarse --un score de 40 es preocupante, los puntos que estan en rojo hay que prestarle atencion --las imagenes es bueno comprimirlas para que ocupen menos espacio bajando su peso --reto:subir el score de perfomance y accesibilidad

COMUNIDAD.
Es una alegr铆a para m铆, para nosotros que estamos aprendiendo estas herramientas creativas. Busco ser expresico con los fundamentos antes de ser eficiente con frameworks.

Se consigui贸 buen puntaje en Lighthouse con el proyecto de este curso 馃槃

Analizando que la pagina est茅 optimizado para un buen SEO

asi me quedo en computador.

Este curso me ayud贸 bastante en muchas malas pr谩cticas y a esforzarme a resolver problemas.
++Clave:++Realizar uno mismo el modelo de la clase y despu茅s comprobar y comparar con el que hace el profesor. Yo hice dos branchs don git para manejar mi versi贸n y otra que hac铆a con las explicaciones del profesor

Intentare llegar al 100, siento que voy en buen camino.

Que buena herramienta!!!. Muchas gracias por compartirla profe.

Desktop

Mobile

Aqu铆 dejo mi repositorio le cambie algunos estilos para que cumpliera con temas de accesibilidad, algunos temas de color mas que todo.
https://jkgc.github.io/BatataBit/

resultados:

mobile:

desktop:

  • performance: aument贸 a 100
![](https://static.platzi.com/media/user_upload/image-5abc7adc-bebc-4c6c-a758-364f8b0d532f.jpg)
![](https://static.platzi.com/media/user_upload/image-4e055ee9-f284-4ed3-8c05-3b64c6f3f9b2.jpg)
![](https://static.platzi.com/media/user_upload/image-102e0e3a-2e8c-4cb0-9d65-2df9695c1c6e.jpg)
Mis resultados: ![](https://static.platzi.com/media/user_upload/Screenshot%20from%202023-12-08%2023-36-10-26eec840-af66-48f8-97df-8105191851ae.jpg)
opte por convertir las im谩genes a formato webp y el peso bajo demasiado sin perder calidad.

excelente

Clase 30: Recuerda que no podemos mejorar lo que no podemos medir. Para ello vamos a utilizar la herramienta Lighthouse, que nos ayuda a medir temas de accesibilidad, performance, buenas pr谩cticas, entre otras. No tendr谩s que preocuparte por instalar nada, ya que viene embebida en las DevTools de Chrome. ## C贸mo acceder a Lighthouse 1. Abrimos el proyecto en nuestro navegador. 2. Clic derecho en alguna parte del proyecto. Clic en 鈥淚nspeccionar鈥 para abrir las DevTools. 3. Al extender la secci贸n de pesta帽as, seleccionamos 鈥淟ighthouse鈥. 4. Observamos varias opciones que podemos analizar. Puedes seleccionar todas o las que necesites. S贸lo podemos generar un reporte por versi贸n mobile o desktop. Si quieres ambas, genera otro reporte con la opci贸n que te falte. 5. Una vez hecha la elecci贸n, clic en 鈥淕enerar reporte鈥. Esperamos a que termine de generarlo. 6. Analizamos los resultados ## C贸mo monitorear el performance Toma en cuenta que no debes frustarte por resultados no perfectos. Mientras se encuentre por encima del 90% significa que tu p谩gina est谩 bien construida. Esto es porque hay muchos factores que determinan estas estad铆sticas como una mala conexi贸n a internet, un mal computador o alg煤n otro incoveniente que no puedas controlar. El valor m谩s bajo es el performance, o la velocidad de carga de nuestra p谩gina. Revisamos las razones haciendo clic sobre el mismo valor. Se despliegan todos los detalles que se encontraron. Vamos a la secci贸n de oportunidades. Al desplegar cada una de las sugerencias que nos hace la herramienta, encontramos que la imagen de la secci贸n comod铆n est谩 algo pesada. Incluso nos recomienda comprimirla para aliviar un poco la puntuaci贸n que nos est谩 dando. Podr铆amos tambi茅n, por ejemplo, seleccionar un tama帽o de imagen m谩s peque帽o para m贸vil y otro para desktop. De esta manera s贸lo se descargar铆a la que necesite el usuario. ## C贸mo monitorear *accessibility* Esta parte es muy importante. Lighthouse nos recomienda ajustar mejor los constrastes de ciertas etiquetas de p谩rrafo para personas que tienen problemas de visi贸n. En este caso podr铆as subir la opacidad de ciertas fuentes cuyo fondo tiene un color similar. Te recomiendo tomar el [Curso de Accesibilidad Web](https://platzi.com/cursos/accesibilidad-web/) para que puedas profundizar m谩s sobre este tema. ## Qu茅 puedes hacer con el feature de 鈥渕ejora鈥 Al realizar el an谩lisis en la versi贸n de escritorio vemos c贸mo el performance sube mucho. Esto se debe a que una computadora puede tener mucho m谩s poder de c贸mputo que un dispositivo m贸vil, como en este caso. Si aplicaste muchos estilos y elementos personales es probable que la parte de performance est茅 m谩s baja. Te recomiendo tomar el [Curso de Optimizaci贸n Web](https://platzi.com/cursos/web-performance/) de cualquier manera para construir p谩ginas web que vayan a la velocidad de la luz. Toma en cuenta las recomendaciones que hace Lighthouse ya que es una forma de mejorar tu p谩gina en estos sentidos y lograr que sea mucho m谩s f谩cil y c贸moda de usar para la mayor铆a de usuarios posibles. 隆Haz de esta herramienta un superpoder para mejorar tus proyectos!

En dispositivo m贸vil:

Estoy muy agradecido por toda la informaci贸n compartida en este curso y los cursos anteriores. Ya puedo notar una evoluci贸n respecto a mis habilidades con HTML y CSS, me siento con m谩s confianza en mi mismo y entusiasmado por continuar aprendiendo aqu铆 en Platzi. 馃挭馃徎馃挌
Les comparto mis resultados de Lighthouse:

![]()Generate a Lighthouse report![](<"C:\Users\jmt23\Pictures\Screenshots\Screenshot 2023-10-19 200300.png">)![](https://www.linkedin.com/posts/jesus-manuel-tavarez-4a22b21a7_generate-a-lighthouse-report-activity-7120833291447939072-L5Hs?utm_source=share\&utm_medium=member_desktop)

Con mobile:

con desktop:

Creo que el hecho de cargar algunas im谩genes desde el CSS eso afecta un poco el performance, tuve que cargarla desde el archivo de HTML y colocar la propiedad "loading = lazy" y tambi茅n comprim铆 la imagen.

Mobile

Desktop

No conocia Lighthouse, mil gracias. 馃槂

Comparto mis resultados:

Mobile:

Desktop:

A seguir practicando.

Lighthouse me ha encantado es una devtool muy completa y util para todos nosotros.

qu猫 curso tan genial! 鈾

Mejore el performance en MOVIL comprimiendo las imagenes, usando lazy loading y cargando diferentes tama帽os de imagenes segun el tipo de dispositivo. La accesibilidad la mejore hasta un cierto punto porque considere que ya se veia bien. Como dijo Diego 鈥淣o hay que obsecionarnos con estas medidas鈥

Que buena herramienta es Lighthouse no sab铆a que exist铆a y que bien que ya est茅 integrada en los navegadores.

.
Mi an谩lisis Mobile:

.

Mi analisis de desktop:

mi performance

Muy bueno este curso 10/10

Logrado

Mis estadisticas en Movil

Y las estadisticas en Computador

Increible, no conocia Lighthouse

Hola a todossss, genial este curso, miren como me quedo el an谩lisis pero tengo un problema no entend铆 bien como hacer los break points o media query, pues en laptop se ve super pero en celular para nada, alguien me puede ayudar? graciasssss

Pude optimizarlo hasta este punto 馃憖, el primero es Mobile y el otro Desktop

Muy buen curso! Este profesor es muy profesional!

Genial curso, genial el profe Diego y genial Lighthouse.
Me encanta que va al grano.
Por ejemplo, con Lighthouse, cambiando la imagen que m谩s impactaba el Performance en Mobile de jpg a png, sube el rendimiento hasta un 91%:

隆Y si pasamos ese png por tinypng, es posible mejorar a煤n m谩s! 馃槃

Aqu铆 mis resultados despu茅s de hacer unos cambios 馃檹

  • Desktop

  • Mobile

Recuerden que cualquier extensi贸n que tengan instalada en sus navegadoras puede impactar significativamente el rendimiento. Para evitar esto, pueden realizar el informe de Lighthouse en una p谩gina inc贸gnito. Recuerden tambi茅n hacerlo siempre desde un live server, o sino Lighthouse no podr谩 realizar la prueba. Para abrir el link de live server en una p谩gina inc贸gnito, solo copian el link desde el navegador y lo pegan en la p谩gina inc贸gnito.
.
Con extensiones:

.
Sin extensiones (p谩gina inc贸gnito):

Esta clase es la cereza del curso.

Movil

Desktop

Qu茅 hermoso es ver estas metricas cuando haces las modificaciones que te pide Lighthouse

Aqu铆 mi an谩lisis con la herramienta Lighthouse

Mobile

Desktop

![]( 馃槃

An谩lisis con Lighthouse

Mobile

Desktop

Este fue el resultado que me salio en Lighthouse 鉂わ笍

Mis m茅tricas en Lighthouse
mobile

Desktop

I (L) Lighthouse

Qu茅 herramienta m谩s increible la verdad. 隆BRUTAL!


Las im谩genes han sido mis ovejitas negras xD

Mobile:

Desktop:

Mobile

Desktop

Mi analisis en desktop:

Para un mejor performance con las im谩genes se recomienda usar el formato webp en lugar de png o jpg. Yo obtuve 96 solo por eso.
Pueden usar esta herramienta para transformar https://convertio.co/es/

excelente herramienta, el performance me arrojo 21 como resultado 馃槳, pero es porque mi laptop es un dinosaurio y es bastante lenta.

Que buen curso!

Izi Pizi. Le quite SEO y PWA ya que la landing page no ha sido optimizada para ello.

Mobile:

Desktop:

Mis m茅tricas en lighthouse. Que genial curso.

Mobile:

Desktop:

Nunca usen una img como .svg ya que durante este curso tuve muchos problemas de carga agregando la img central de la chica, y cuando analize con lighthouse ni siquiera avanzo a generar el informe estuve mas de 5min esperando por lo que cambie a png y bual谩

Un excelente curso!

Mis resultados:

Mobile:

Desktop:

Resultado Mobile

Resultado Desktop

Ac谩 mis resultados, muy buena herramienta y gran curso 馃榿馃榿
gracias a todos

馃No ten铆a mucha esperanza pero al parecer no est谩 mal jaja

  • Mobile
  • Desktop

Mi analisis Mobile!!

Mi an谩lisis desktop!

Sali贸 as铆.