Grandes payloads de rede estão diretamente relacionados a tempos de carregamento maiores. Elas também custam dinheiro aos usuários. Por exemplo, os usuários podem ter que pagar por mais dados de celular. Portanto, reduzir o tamanho total das solicitações de rede da página é bom para a experiência dos usuários no seu site e nas carteiras deles.
Como a auditoria de payload de rede do Lighthouse falha
O Lighthouse mostra o tamanho total em kibibytes (KiB) de todos os recursos solicitados pela sua página. As solicitações maiores são apresentadas primeiro:
Com base nos dados do HTTP Archive, o payload médio da rede está entre 1.700 e 1.900 KiB. Para ajudar a mostrar os payloads mais altos, o Lighthouse sinaliza páginas com solicitações de rede totais que excedem 5.000 KiB.
Como reduzir o tamanho do payload
Tente manter o tamanho total de bytes abaixo de 1.600 KiB. Esse objetivo é baseado na quantidade de dados que podem ser teoricamente transferidos por uma conexão 3G e ainda alcançar um tempo de interação de 10 segundos ou menos.
Aqui estão algumas maneiras de manter o tamanho do payload baixo:
- Adie as solicitações até que sejam necessárias. Consulte o padrão PRPL (em inglês) para ver uma possível abordagem.
- Otimize as solicitações para que sejam o menor possível. As técnicas possíveis incluem:
- Armazene em cache as solicitações para que a página não faça o download dos recursos em visitas repetidas. Consulte a página de destino sobre confiabilidade de rede para saber como o armazenamento em cache funciona e como implementá-lo.
Orientações específicas para a pilha
Angular
Aplique a divisão de código no nível da rota para minimizar o tamanho dos pacotes JavaScript. Além disso, considere armazenar os ativos em cache com antecedência com o service worker Angular.
Drupal
Use Estilo de Imagem Responsiva para reduzir o tamanho das imagens carregadas na sua página. Se você estiver usando Views para mostrar vários itens de conteúdo em uma página, implemente a paginação para limitar o número de itens mostrados em uma determinada página.
Joomla
Mostre trechos nas suas categorias de artigo (uma solução comum é um link "saiba mais"), reduza o número de artigos exibidos em uma determinada página, divida postagens longas em várias páginas ou use um plug-in para carregar lentamente os comentários.
WordPress
Mostre trechos nas suas listas de postagem (você pode usar a tag "more"), reduza o número de postagens exibidas em uma determinada página, divida as postagens longas em várias páginas ou use um plug-in para carregar lentamente os comentários.