Los iconos son pequeños, pero una colección grande, fuentes externas o dimensiones inestables pueden afectar al rendimiento. La optimización empieza en la obra y termina en la entrega al navegador.
El objetivo no es solo reducir bytes. El icono también debe ser legible, accesible y coherente con la interfaz.
Elimina detalles que no sobreviven
Revisa el icono en su tamaño final. Los elementos invisibles a 20 píxeles solo añaden complejidad. Simplifica contornos, reduce puntos y conserva espacios interiores.
Prueba en fondos claros y oscuros. Una arte grande puede perder contraste dentro de un botón real.
Evita fuentes de iconos bloqueantes
Las fuentes pueden retrasar la visualización y mostrar cuadros vacíos durante la descarga. También incluyen muchos glifos no usados. Prefiere SVG individuales o un sprite pequeño.
Si la fuente es inevitable, precárgala solo cuando sea crítica y usa una estrategia font-display apropiada.
Define dimensiones y reserva espacio
Declara width y height o conserva la proporción con CSS para evitar cambios de layout. Para PNG, proporciona densidad suficiente.
<img src="/icons/profile.png" width="48" height="48" alt="" decoding="async" />
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">…</svg>Usa lazy loading con criterio
Los iconos del encabezado y primeras acciones deben cargar de inmediato. Las galerías debajo del pliegue pueden diferirse. Aplicar lazy loading a elementos visibles puede empeorar LCP.
Divide el código pesado por intención. La exportación ICO solo necesita descargarse cuando el usuario la solicita.
Mide el producto real
Usa Lighthouse y PageSpeed para localizar JavaScript no utilizado, recursos bloqueantes y saltos de layout. Después, prueba en un móvil intermedio y una conexión limitada.
- Comprueba que no haya scroll horizontal.
- Ofrece áreas táctiles cómodas.
- Prueba lectores de pantalla y teclado.
- Compara el peso total antes y después.