Evitar payloads de rede muito grandes

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:

Captura de tela da auditoria "Evite payloads de rede muito grandes" do Lighthouse

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:

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.

Recursos

Código-fonte da auditoria Evitar payloads de rede enormes