Ícones parecem pequenos, mas podem afetar desempenho quando são carregados em grande quantidade, dependem de fontes externas ou provocam mudanças de layout. A otimização começa na arte e termina na forma como o navegador recebe o arquivo.
O objetivo não é apenas reduzir bytes. Um ícone eficiente também precisa ser legível, acessível e consistente com a interface.
Remova detalhes que não sobrevivem ao tamanho final
Analise o ícone no tamanho em que será usado. Elementos que ficam invisíveis em 20 pixels apenas aumentam complexidade. Simplifique contornos, reduza pontos vetoriais e preserve espaços internos para que a forma não fique fechada.
Teste em fundo claro e escuro. Uma arte que funciona em um mockup grande pode perder contraste dentro de um botão real.
Evite fontes de ícones bloqueantes
Fontes de ícones podem atrasar a exibição e mostrar quadrados vazios enquanto o arquivo é baixado. Elas também carregam muitos glifos não utilizados. Prefira SVGs selecionados individualmente ou um sprite pequeno quando houver muitos símbolos repetidos.
Se uma fonte for inevitável, faça preload apenas quando ela for realmente crítica e configure font-display de forma apropriada.
Defina dimensões e preserve o espaço
Informe width e height ou reserve a proporção com CSS. Isso impede que a página se mova quando o arquivo termina de carregar. Para PNGs, use uma origem com densidade suficiente e exiba em tamanho menor quando necessário.
<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>Use lazy loading com critério
Ícones presentes no cabeçalho, no primeiro botão ou na área visível inicial devem carregar imediatamente. Bibliotecas, galerias e exemplos abaixo da dobra podem ser adiados. O excesso de lazy loading em elementos visíveis piora a experiência e o LCP.
Agrupe carregamentos sob demanda por funcionalidade. Por exemplo, o código de exportação ICO só precisa ser baixado quando o usuário solicita esse formato.
Meça no produto real
Use ferramentas como Lighthouse e PageSpeed para identificar JavaScript não utilizado, recursos bloqueantes e mudanças de layout. Depois, confirme manualmente em um celular intermediário e em conexão limitada. Uma pontuação isolada não substitui testes de usabilidade.
- Verifique se não há rolagem horizontal.
- Garanta alvos de toque confortáveis.
- Teste leitores de tela e navegação por teclado.
- Compare o peso total antes e depois da otimização.