Turbine suas habilidades de detetive de desempenho com o Lighthouse e o Chrome DevTools.
Como desenvolvedor, você geralmente não tem controle sobre quais scripts de terceiros seu site carrega. Antes de otimizar o conteúdo de terceiros, você precisa fazer um trabalho de detetive para descobrir o que está deixando seu site lento. 🕵️
Nesta postagem, você vai aprender a usar o Lighthouse e o Chrome DevTools para identificar recursos de terceiros lentos. A postagem aborda técnicas cada vez mais robustas que podem ser melhor combinadas.
Se você só tiver 5 minutos
A auditoria de desempenho do Lighthouse ajuda a descobrir oportunidades para acelerar o carregamento de páginas. Scripts de terceiros lentos provavelmente aparecem na seção Diagnóstico nas auditorias Reduzir o tempo de execução do JavaScript e Evitar payloads de rede muito grandes.
Para executar uma auditoria:
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Lighthouse.
- Clique em Dispositivo móvel.
- Marque a caixa de seleção Desempenho. Você pode desmarcar o restante das caixas de seleção na seção Auditorias.
- Clique em Simulado 3G rápido, 4x lentidão da CPU.
- Marque a caixa de seleção Limpar armazenamento.
- Clique em Executar auditorias.
Uso de terceiros
A auditoria de Uso de terceiros do Lighthouse mostra uma lista dos provedores terceirizados que uma página usa. Essa visão geral pode ajudar você a entender melhor o panorama geral e identificar códigos redundantes de terceiros. A auditoria está disponível na extensão do Lighthouse e será adicionada em breve ao DevTools no Chrome 77.
Reduzir o tempo de execução do JavaScript
A auditoria Reduzir o tempo de execução do JavaScript do Lighthouse destaca scripts que levam muito tempo para serem analisados, compilados ou avaliados. Marque a caixa de seleção Mostrar recursos de terceiros para descobrir scripts de terceiros que consomem muita CPU.
Evitar payloads de rede muito grandes
A auditoria Evitar payloads de rede muito grandes do Lighthouse identifica solicitações de rede, inclusive de terceiros, que podem atrasar o tempo de carregamento da página. A auditoria falha quando o payload da rede excede 4.000 KB.
Bloquear solicitações de rede no Chrome DevTools
O bloqueio de solicitação de rede do Chrome DevTools permite que você veja como sua página se comporta quando determinado script, folha de estilo ou outro recurso não está disponível. Depois de identificar scripts de terceiros que você suspeita que afetam o desempenho, avalie como o tempo de carregamento muda. Para isso, bloqueie as solicitações para esses scripts.
Para ativar o bloqueio de solicitações: 1. Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools. 1. Clique na guia Rede. 1. Clique com o botão direito do mouse em qualquer solicitação no painel Rede. 1. Selecione Bloquear URL da solicitação.
Uma guia Request block vai aparecer na gaveta do DevTools. É possível gerenciar quais solicitações foram bloqueadas nessa página.
Para medir o impacto de scripts de terceiros, faça o seguinte:
- Avalie quanto tempo sua página leva para carregar usando o painel Rede. Para emular condições reais, ative a limitação de rede e a limitação da CPU. Em conexões e hardware de desktop mais rápidos, o impacto de scripts caros pode não ser tão representativo quanto em um celular.
- Bloqueie os URLs ou domínios responsáveis por scripts de terceiros que você acredita serem um problema.
- Atualize a página e avalie de novo quanto tempo leva para carregar sem os scripts de terceiros bloqueados.
Esperamos que você perceba uma melhoria na velocidade, mas é possível que o bloqueio de scripts de terceiros ocasionalmente não gere o efeito esperado. Se esse for o caso, reduza a lista de URLs bloqueados até isolar aquele que está causando lentidão.
Fazer três ou mais execuções de medição e analisar os valores médios provavelmente produzirá resultados mais estáveis. Como o conteúdo de terceiros pode, ocasionalmente, obter recursos diferentes por carregamento de página, essa abordagem pode fornecer uma estimativa mais realista. Agora o DevTools oferece suporte a várias gravações no painel Performance, o que facilita esse processo.