Desglose del peso de la página

Cada archivo tiene dos tamaños

Está el tamaño que tiene un archivo en la red y el que tiene una vez descomprimido. Digamos que tu servidor comprime un script de 400 KB hasta 110 KB. El visitante paga 110 KB de descarga y de datos móviles, y su teléfono aun así tiene que leer los 400 KB. Esta herramienta califica la primera cifra, los bytes transferidos, y muestra la segunda al lado.

Los bytes se convierten rápido en tiempo de espera. Con el perfil lento de 4G que usa Lighthouse en sus pruebas, 1,6 megabits por segundo, una página de 2 MB tarda unos diez segundos en descargarse, y eso es antes de que se ejecute ningún script.

Qué se descarga

Cuando tiene el HTML, la herramienta solicita lo que pediría un navegador en una primera carga:

• hojas de estilo y archivos anunciados con rel="preload" o modulepreload;
• scripts con un src, salvo los de reserva nomodule y los tipos de script que un navegador no ejecuta;
• imágenes: para srcset y <picture> toma el candidato más grande que elegiría un navegador de escritorio, y lee data-src en las imágenes de carga diferida;
• carteles de vídeo, el favicon y las imágenes en atributos style en línea;
• fuentes declaradas en reglas @font-face (el archivo WOFF2 cuando lo hay, doce fuentes como máximo) y hojas de estilo traídas con @import.

Unos pocos límites mantienen la comprobación corta: 80 archivos, 6 MB por archivo, 15 MB en total. Si una página pasa de 80 archivos, el número de solicitudes se muestra como “≥”.

La escala de notas

Para que te hagas una idea, la página móvil mediana medida por el HTTP Archive pesa unos 2,3 MB, lo que aquí recibe una D. Así que una página puede ser perfectamente normal para la web y aun así ser lenta en un teléfono.

Qué hacer con los hallazgos

Imágenes de más de 200 KB

Casi siempre es una imagen servida más grande de lo que se muestra. Expórtala al ancho mostrado, o al doble para pantallas de alta densidad, y deja que srcset ofrezca versiones más pequeñas a los teléfonos.

Imágenes JPEG o PNG

Cuando el servidor lo permite, la herramienta recodifica las ocho imágenes más pesadas como WebP (calidad 80) y AVIF (calidad 55) y muestra el tamaño de cada resultado. Así el ahorro se mide con tus propias imágenes. Sirve el formato nuevo con una alternativa:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="…">
</picture>

Imágenes sin width ni height

Esto no va del peso. Es la razón por la que el texto salta mientras carga la página. Añade los dos atributos.

Archivos de texto enviados sin comprimir

HTML, CSS, JavaScript o SVG de más de 1,5 KB que llegaron sin gzip ni Brotli. La auditoría de compresión y caché tiene los ajustes del servidor.

Más de 1 MB de JavaScript, o 300 KB de fuentes

Quita las bibliotecas y los complementos que nadie usa, carga el resto solo en las páginas que los necesitan y deja dos o tres pesos de fuente en WOFF2.

La cifra de carbono y lo que no se cuenta

La estimación sigue la versión 4 del modelo Sustainable Web Design. Cuenta 0,300 kWh por cada gigabyte transferido, lo que abarca centros de datos, redes y dispositivos de los visitantes junto con su fabricación, y lo multiplica por una media mundial de 494 g de CO₂e por kWh. Eso da unos 0,15 g por megabyte. La comparación con un coche de gasolina usa 170 g por kilómetro. Tómala como un orden de magnitud, útil para comparar dos versiones de una página.