Grandes payloads de rede estão altamente correlacionados a longos tempos de carregamento. Eles também custam dinheiro aos usuários. Por exemplo, os usuários podem ter que pagar por mais dados móveis. 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 fica entre 1.700 e 1.900 KiB. Para ajudar a exibir os payloads mais altos, o Lighthouse sinaliza as páginas com um total de solicitações de rede superior a 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 teoricamente pode ser transferido por download em uma conexão 3G enquanto ainda alcança um Tempo para interação da página (link em inglês) de 10 segundos ou menos.
Veja algumas maneiras de manter o tamanho do payload baixo:
- Adiar solicitações até que sejam necessárias. Consulte o Padrão PRPL para uma abordagem possível.
- Otimize as solicitações para que elas 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 novamente o download dos recursos em visitas repetidas. Consulte a página de destino da confiabilidade da rede para saber como funciona o armazenamento em cache 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 recursos em cache com o service worker do Angular.
Drupal
Use Estilos de imagem responsiva para reduzir o tamanho das imagens carregadas na sua página. Se você estiver usando visualizações 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
Considere mostrar trechos nas suas categorias de artigos (uma solução conhecida é o link "Saiba mais"), reduzir o número de artigos mostrados em uma determinada página, dividir as postagens longas em várias páginas ou usar um plug-in para carregar os comentários lentamente.
WordPress
Considere mostrar trechos nas suas listas de postagens (você pode usar a tag "mais"), reduzir o número de postagens exibidas em uma determinada página, dividir suas postagens longas em várias páginas ou usar um plug-in para carregar os comentários lentamente.
Recursos
Código-fonte para a auditoria Evitar payloads de rede muito grandes