Punto de partida. Actividad «Optimización y comparación de la web», sesión 1 de 6. Abre los materiales enlazados y crea el registro de la unidad. 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 web consume recursos al enviar archivos, ejecutar código y utilizar dispositivos y servidores. El tamaño transferido es una magnitud observable; la huella ambiental completa exige considerar más factores. Mejorar rendimiento puede ayudar, pero una página rápida no es automáticamente sostenible.
PixelStore es un proyecto de laboratorio que ya funciona. Nuestro objetivo es conservar su utilidad reduciendo recursos innecesarios. Una imagen excesivamente grande puede ser candidata; eliminar el catálogo para que la página pese menos destruye el servicio que debemos mantener.
Consultar ejemplos y conceptos de esta sesión
¿Dónde se desperdician recursos?
| Desperdicio | Cómo se ve |
|---|---|
| Imágenes sobredimensionadas | Se muestra a 400 × 300 y se descarga a 6000 × 4000 |
| Formatos poco adecuados | 4 MB cuando otra versión casi idéntica pesa 300 KB |
| JavaScript innecesario | Una librería enorme para usar una única función |
| Vídeos automáticos | El usuario entra y empieza a bajarse un vídeo que quizá no quería ver |
| Scripts de terceros | Publicidad, analytics, mapas, chats, widgets, trackers |
| Fuentes de más | Cinco familias por cuatro pesos, cuando se usan dos |
| Datos innecesarios | La API devuelve 10.000 productos y el usuario ve 20 |
Rendimiento y sostenibilidad
Muchas optimizaciones que reducen recursos mejoran a la vez la velocidad, la experiencia de usuario, el tiempo de carga, el consumo de datos móviles del usuario y el coste de infraestructura.
- Imagen más ligera
- Menos transferencia
- Menos tiempo de descarga
- Menos datos del usuario
Por eso rendimiento y sostenibilidad suelen apuntar en la misma dirección, aunque no son lo mismo, y conviene no confundirlos: una web puede ser rapidísima porque tiene un servidor enorme detrás.
Se trabaja
45 minutos · trabajo guiado sobre la actividad
- Abre la ficha de PixelStore y crea el registro de UD3. Escribe qué funciones debe conservar la tienda: catálogo, imágenes útiles, enlaces, formulario y el recorrido disponible en esta versión.
- Dibuja una visita con navegador, red y servidor. Enumera archivos que podrían descargarse: HTML, CSS, JavaScript, imágenes, fuentes y recursos externos.
- Usa la página de ejemplo de la guía o la vista proporcionada en el aula para localizar tres posibles desperdicios. Todavía son hipótesis; escribe qué medirías para confirmarlas.
- Clasifica una propuesta en reducir tamaño, evitar descarga o evitar procesamiento. Explica una consecuencia negativa posible, como perder legibilidad o funcionalidad.
- Prepara la tabla de medición con recurso, tamaño, peticiones, condición de prueba y observación. Reserva columnas antes/después sin rellenarlas con las cifras de ejemplo.
Cierre
5 minutos · comprobar el resultado
Al terminar la sesión:
El objetivo conserva el servicio y las hipótesis se podrán contrastar. No necesitas conocimientos de agentes de Digitalización para realizar la práctica.