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.
Bienvenida al curso
Por qué aprender Responsive Design con Mobile First
Setup inicial
Analizando el diseño: proyecto del curso
El valor de Mobile First
Arquitectura inicial
Assets de nuestro proyecto
Fuentes de nuestro proyecto
Estilos base
Sección de Header
Maquetación del header
Implementando BEM
Uso de linear-gradient
Uso de position para botón flotante
Sección de Intercambios
Estructura base de la sección de intercambio
Imagen de background
Estructura de tabla de monedas
Estilos base de tabla de monedas
Detallando estilos de tabla de monedas
Finalizando estilos de tabla de monedas
Sección de Beneficios
Estructura base de la sección de beneficios
Estilos de la sección de beneficios
Maquetando tarjetas de beneficios
Sección de Planes
Maquetando sección comodín
Estructura de sección de planes
Aplicando estilos a sección de planes
Aplicando estilos a las tarjetas de la sección de planes
Detallando estilos en tarjetas de planes
Aplicando estilos al botón de call to action
Scroll horizontal con CSS
Sección de Footer
Footer
Media Queries
Aplicando media queries
Lighthouse
Análisis con Lighthouse
Próximos pasos
Cierre y próximos pasos
Comparte tu proyecto y certifícate
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Análisis con Lighthouse
30/32Recursos
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
-
Abrimos el proyecto en nuestro navegador.
-
Clic derecho en alguna parte del proyecto. Clic en “Inspeccionar” para abrir las DevTools.
-
Al extender la sección de pestañas, seleccionamos “Lighthouse”.
-
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.
-
Una vez hecha la elección, clic en “Generar reporte”. Esperamos a que termine de generarlo.
-
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 “mejora”
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 181
Preguntas 21
Ordenar por:
Lighthouse es simplemente fascinante
Se puede incluir en la etiqueta IMG la propiedad loading=“lazy” 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.
Mi repo, espero les guste, tiene un poco mas de detalles responsive y dos animaciones: https://amaurysg.github.io/mobile-first-batatabit/
“No 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.
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…pienso yo…jjjj…aprendiendo cada dia mas…y 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…estoy 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/
Excelente!
Si a alguien no lo deja desde la extension, se encuentra en el mismo DevTools:
Mi chrome no tiene Lighthouse, alguna alternativa para sitios no publicados?
resultados:
mobile:
desktop:
- performance: aumentó a 100
Mis resultados: 
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 “Inspeccionar” para abrir las DevTools.
3. Al extender la sección de pestañas, seleccionamos “Lighthouse”.
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 “Generar 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 “mejora”
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">)
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 “No 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
Link de mi proyecto https://eufanzky.github.io/Databit/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?