Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Google Lighthouse

4/16
Recursos

Es una herramienta oficial de Google que viene con Chrome, con la cual podemos hacer un diagnóstico a una Web App. Estos diagnósticos se centran en Performance y Accesibilidad, pero también tiene una herramienta para diagnosticar si nuestra Web App se considera una PWA o no y que pasos debemos de tomar para que lo sea.

Lighthouse no sustituye hacer pruebas con un dispositivo móvil real, siempre realiza pruebas en un dispositivo móvil.

El diagnostico de Performance nos muestra dos de los conceptos más importantes en performance: First meaningful Paint y First interactive.

First meaningful Paint o primer pintado significativo, esto señala cuanto tiempo tardo el navegador en renderizar la aplicación de una forma que tenga sentido. Generalmente queremos que este situado entre 1 y 2 segundos.

First interactive o primera interacción, señala el tiempo cuando ya se cargó React, inicializo la aplicación y que podamos correr comandos dentro de la aplicación.

¿Cómo bajamos estos tiempos?

Para bajar el Time To First Meaningful Paint podemos hacer Server Side Rendering, reducir el tamaño de nuestro HTML y CSS o simplemente teniendo servidores más rápidos.
El Time To Interactive tiene mucho que ver con el framework que estemos utilizando, usualmente queremos que tarde menos de 5 segundos.

Aportes 25

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

La API se actualizo ahora hay que cambiar baseUrl y las peticiones fetch():
.

const baseUrl = "https://www.themealdb.com/api/json/v1/1";

async function getLatest() {
  const request = await fetch(`${baseUrl}/search.php?f=b`);
  const data = await request.json()
  const recipes = data.meals.map((m) => normalizeMeal(m))

  return recipes
}

async function getRecipe(recipeId) {
  const request = await fetch(`${baseUrl}/lookup.php?i=${recipeId}`)
  const data = await request.json()
  if( ! data.meals ) return null
  const recipe = normalizeMeal(data.meals.shift())

  return recipe
}

Si se bajaron el código fuente de la anterior clase y les dio problemas en correrlo yo realice los siguientes pasos:
Instalar isomorphic-fetch que se lo utiliza en el proyecto pero en el package.json no habia.

npm i isomorphic-fetch

La API se actualizo el único cambio que hay que hacer es en el archivo mealdb-api.js es cambiar la version del API a v2

const baseUrl = 'https://www.themealdb.com/api/json/v2/1'

20-04-2022.
1-Descargar proyecto en recursos
2-Abrir proyecto en VScode, allí abrir terminal y ejecutar:
$ npm i isomorphic-fetch

3-En el archivo mealdb-api.js, cambiar la baseUrl por:
baseUrl = “https://www.themealdb.com/api/json/v1/1”

4- En el mismo archivo cambiar la liner fetch, quedando así:
const request = await fetch(${baseUrl}/search.php?s=b)

!! funciona para seguir el curso

Miren la diferencia entre hacer el lighthouse en el computador

ha hacerlo en el celular

Hola Devs:
-Nueva baseUrl = https://www.themealdb.com/api/json/v1/1
-Nueva url en el fetch = ${baseUrl}/search.php?s=b
Recuerden, #NuncaParesDeAprender 💚

Disculpen mi ignorancia, descargué el repo, abrí la consola, ubiqué la carpeta del proyecto y ejecuté npm run dev. Me arrojó este error

"react-scripts" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]0.1.0 dev: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?```

La api solo funciona para patreons al parecer

muchachos asi quedo el archivo que realiza las llamadas a la API de themealdb

// import 'isomorphic-fetch'

const baseUrl = 'https://www.themealdb.com/api/json/v1/1'

export default {
  getLatest,
  getRecipe
}

async function getLatest() {
  const request = await fetch(`${baseUrl}/search.php?f=b`)
  const data = await request.json()
  const recipes = data.meals.map((m) => normalizeMeal(m))

  return recipes
}

async function getRecipe(recipeId) {
  const request = await fetch(`${baseUrl}/lookup.php?i=${recipeId}`)
  const data = await request.json()
  if( ! data.meals ) return null
  const recipe = normalizeMeal(data.meals.shift())

  return recipe
}

function normalizeMeal(meal) {
  const newMeal = {}

  newMeal.id = meal.idMeal
  newMeal.name = meal.strMeal
  newMeal.category = meal.strCategory
  newMeal.origin = meal.strArea
  newMeal.instructions = meal.strInstructions.split('\n').filter((i) => i.trim() !== '')
  newMeal.thumbnail = meal.strMealThumb
  newMeal.tags = meal.strTags ? meal.strTags.split(',') : []
  newMeal.youtube = meal.strYoutube
  newMeal.ingredients = []
  newMeal.url = meal.strSource
  newMeal.dateModified = meal.dateModified

  for( let i=1; i<=20; i++ ) {
    if( meal[`strIngredient${i}`] !== '' && meal[`strMeasure${i}`] !== '' ) {
      newMeal.ingredients.push({
        ingredient: meal[`strIngredient${i}`],
        measure: meal[`strMeasure${i}`]
      })
    }
  }

  return newMeal
}


Cloné el proyecto, instalé las dependencias, luego hice npm run dev, y la página sólo me muestra el título, intenta traer las recetas pero no lo logra.

Al inspeccionar página, voy a la consola y me muestra
SyntaxError: Unexpected token < in JSON at position 0 __stack_frame_overlay_proxy_console__ @ index.js:2178

En la actualidad no puedo consumir la API, por lo que voy a hacerla de otra temática, aquí dejo algunas Apis que ustedes pueden consumir también:
https://profile.es/blog/apis-front-end/

Consejos para mejorar las métricas del Google LightHouse

En el curso de devtools enseñan a como testear un celular conectado al computador por si quiere saben como hacerlo,
y ademas cuando corren el comando dev les aparece la url de local y de network con el de network pueden escribirlo en el celular y eso le abrira la aplicacion en el navegador

Actualmente para hacer algunas consultas a la api, hay que pagar por patreon, por lo que el codigo actual no funcionara.

Este es la api: https://www.themealdb.com/api.php

Alli pueden ver las peticiones que pueden hacer

Lo estoy haciendo con un proyecto personal y el First Meaningful Paint fue de 12 segundos. 🎭

Wow ¡Qué interesante herramienta la de Google Lighthouse!

woww que interesante, la verdad estoy realizando este curso en un proyecto personal que tengo y no tenia ni idea de la valioza herramienta que es Google lighthouse. Super espero que las demás clases también la pueda poner en practica

No conocía esta herramienta y vaya que me ha sorprendido, con esta clase ya valió la pena el curso. Excelente

Ayudaa… porque cuando corro el comando npm run dev me salta:
“Module not found: Can’t resolve ‘./pages/Home’ in '/home/priscila/Projects/Platzi/prueba-clic2ring/platzi-recetas/src”?
Les agradeceria

muy buena herramienta

./src/mealdb-api.js
Module not found: Can’t resolve ‘isomorphic-fetch’ in ‘D:\cursos react\pwa\platzi-recetas\src’ buenas compañero que me hizo flata que tendre de mas alguien tiene un git clone completo que mi hizo falta instalar

Cuando le doy click a alguna receta me arroja un error dice que hay un problema

me sale este error: index.js:2178 SyntaxError: Unexpected end of JSON input

La api ahora requiere pagar 2 dólares para poder usarla pero pueden cambiar el filtro de búsqueda por

const request = await fetch(`${baseUrl}/search.php?f=a`)
buenas noches. el lighthouse se me queda analizando y no avanza de la primera parte. se queda pegado en "Lighthouse Is warnning up..."

h