Punto de partida. Actividad «Optimización y comparación de la web», sesión 2 de 6. Abre el avance de la sesión anterior; los pasos de hoy indican qué conservar y qué completar. La guía de arranque permite preparar las herramientas sin depender de otros módulos.
Se explica
10 minutos · contexto, explicación y ejemplo
Una medida de partida permite comparar un cambio. Si medimos una vez con caché y otra sin ella, quizá comparemos condiciones distintas en vez de versiones. DevTools es el conjunto de herramientas del navegador; su pestaña Red muestra peticiones, respuestas y transferencia.
Lighthouse ejecuta comprobaciones y produce indicadores bajo unas condiciones determinadas. Su puntuación no equivale a porcentaje de sostenibilidad. Hoy guardaremos versión, configuración y resultados para repetir el procedimiento después de optimizar.
Consultar ejemplos y conceptos de esta sesión
Chrome DevTools
Abre la web y pulsa F12, o accede por Herramientas de desarrollador. Interesa sobre todo el panel Network.
Cada vez que se carga una página el navegador pide recursos, y ahí vemos el nombre, el tipo, el tamaño, el tiempo, el servidor y el número de peticiones:
| Recurso | Tipo | Tamaño |
|---|---|---|
| index.html | HTML | 15 KB |
| style.css | CSS | 35 KB |
| app.js | JS | 480 KB |
| hero.jpg | Imagen | 4,2 MB |
| logo.png | Imagen | 800 KB |
¿Qué salta a la vista? Casi seguro hero.jpg, con sus 4,2 MB. Una sola imagen puede pesar más que todo el código de la página.
También veremos el número de peticiones. Que sean 180 en lugar de 20 no significa automáticamente que la web esté mal, pero obliga a preguntar si todas hacen falta.
Lighthouse
Lighthouse es una herramienta automatizada integrada en Chrome que audita rendimiento, accesibilidad, buenas prácticas y SEO.
No usaremos su puntuación como una verdad. Es una herramienta de diagnóstico: sirve para saber dónde mirar, no para saber si hemos acabado.
Un Performance de 92 no significa que la web sea «un 92 % sostenible», del mismo modo que un 100 tampoco significa que no quede nada por mejorar: significa que esa herramienta, con esos criterios, no ha encontrado nada. Lo que importa es lo que hay detrás del número.
Se trabaja
45 minutos · trabajo guiado sobre la actividad
- Sigue la guía de PixelStore: descarga o clona la versión
main, abre su carpeta y arráncala con el servidor local indicado. Visita la URL HTTP, no el archivo mediante doble clic. - Comprueba que el catálogo aparece. Si falta, revisa la consola y las respuestas de Red antes de medir. No tomes como referencia una página que no terminó de cargar.
- Abre Red, activa la condición de caché indicada en la guía y recarga. Anota transferencia total, número de peticiones y los cinco recursos mayores. Guarda una captura con las condiciones.
- Ejecuta Lighthouse con el perfil acordado. Registra sus valores como resultados de esa herramienta, separados de los bytes observados en Red.
- Elige tres problemas de mayor prioridad y escribe una hipótesis de mejora para cada uno. Guarda la tabla inicial y la versión del proyecto antes de tocar archivos.
Cierre
5 minutos · comprobar el resultado
Al terminar la sesión:
La medición es reproducible y la página funciona. Cada hipótesis menciona un recurso observado, no una recomendación genérica del asistente.