Imagens podem responder por grande parte dos bytes; a lista de rede mostra quais arquivos pesam no carregamento observado.
Antes de começar
Escolha uma rota e cenário de cache consistentes e separe imagens do restante dos recursos.
Passo a passo
-
Use a aba Network para ordenar por tamanho e conferir dimensões, formato, duplicatas e momento de carregamento.
-
Compare os principais arquivos com suas dimensões exibidas e priorize a maior oportunidade real.
Limites e cuidados
O maior arquivo nem sempre é o maior atraso percebido; verifique prioridade e posição na tela.
Continue na biblioteca
Fonte oficial: Como servir imagens responsivas — web.dev.