Lighthouse: otimize a velocidade do site

Objetivo do tutorial

Este tutorial ensina a usar o Chrome DevTools para encontrar maneiras de acelerar o carregamento de sites.

Continue lendo ou assista à versão em vídeo deste tutorial:

Pré-requisitos

É necessário ter experiência básica em desenvolvimento na Web, semelhante ao ensinado nesta Classe de introdução ao desenvolvimento da Web.

Você não precisa saber nada sobre desempenho de carregamento.

Introdução

Meu nome é Tony. Tony é muito famoso na sociedade de gatos. Ele criou um site para que os fãs possam saber quais são as comidas favoritas dele. Os fãs dele adoram o site, mas Tony fica ouvindo reclamações de que o carregamento do site está lento. Tony pediu que você o ajudasse a acelerar o site.

Etapa 1: auditar o site

Sempre que você quiser melhorar o desempenho de carregamento de um site, comece com uma auditoria. A auditoria tem duas funções importantes:

• Ele cria uma linha de base para você avaliar as mudanças seguintes.
• Ela traz dicas úteis sobre quais mudanças terão mais impacto.

Configurar

Primeiro, você precisa configurar um novo ambiente de trabalho no site do Tony para fazer alterações mais tarde:

1. Faça o remix do projeto do site no Glitch. O novo projeto é aberto em uma guia. Ela será chamada de guia do editor.

   

   O nome do projeto muda de tony para um nome gerado aleatoriamente. Agora você tem sua própria cópia editável do código. Mais tarde, você fará alterações nesse código.

2. Na parte de baixo da guia do editor, clique em Visualizar > Visualizar em uma nova janela. A demonstração abre em uma nova guia. Ela será chamada de guia de demonstração. O site pode levar algum tempo para carregar.

   

3. Abra o DevTools junto com a demonstração.

   

Definir um valor de referência

A referência é um registro do desempenho do site antes das melhorias de desempenho.

1. Abra o painel do Lighthouse. Ele pode estar oculto atrás de double_arrow Mais painéis.

   

2. Corresponda as configurações do relatório do Lighthouse às definições da captura de tela. Veja a seguir uma explicação das diferentes opções:

   • check_box Limpar armazenamento. Quando você marca esta caixa de seleção, todo o armazenamento associado à página é apagado antes de cada auditoria. Deixe essa configuração ativada se você quiser fazer auditoria da experiência dos visitantes que estão visitando seu site pela primeira vez. Desative essa configuração quando quiser usar a experiência de visita repetida.
   • Limitação simulada (padrão) arrow_drop_down. Essa opção simula as condições típicas de navegação em um dispositivo móvel. Ela é chamada de "simulada" porque o Lighthouse não limita durante o processo de auditoria. Em vez disso, ele apenas extrapola quanto tempo a página levaria para carregar em condições de dispositivos móveis. A configuração Limitação do DevTools (avançado), por outro lado, limita a CPU e a rede, em detrimento de um processo de auditoria mais longo.
   • Modo > radio_button_checked Navegação (padrão). Esse modo analisa um único carregamento de página, e é isso que precisamos neste tutorial. Para mais informações, consulte Os três modos.
   • Dispositivo > radio_button_checked Dispositivo móvel. A opção para dispositivos móveis muda a string do user agent e simula uma janela de visualização móvel. A opção para computadores desativa as mudanças para dispositivos móveis.
   • Categorias > check_box Desempenho. Quando uma única categoria é ativada, o Lighthouse gera um relatório somente com o conjunto correspondente de auditorias. Você pode deixar as outras categorias ativadas para ver os tipos de recomendações que elas oferecem. Desativar categorias irrelevantes acelera um pouco o processo de auditoria.

3. Clique em Analisar o carregamento de página. Depois de 10 a 30 segundos, o painel Lighthouse mostra um relatório do desempenho do site.

   

Como lidar com erros de relatório

Se você receber um erro no relatório do Lighthouse, tente executar a guia de demonstração em uma janela anônima sem outras guias abertas. Isso garante que você esteja executando o Chrome em um estado limpo. As extensões do Chrome, em especial, podem interferir no processo de auditoria.

Entender seu relatório

O número na parte superior do relatório é a pontuação de desempenho geral do site. Mais tarde, ao fazer alterações no código, você verá esse número aumentar. Uma pontuação mais alta significa uma performance melhor.

Métricas

Role para baixo até a seção Métricas e clique em Expandir visualização. Para ler a documentação sobre uma métrica, clique em Saiba mais....

Esta seção fornece medidas quantitativas do desempenho do site. Cada métrica fornece informações sobre um aspecto diferente do desempenho. Por exemplo, a Primeira exibição de conteúdo informa quando o conteúdo é exibido na tela pela primeira vez, o que é um marco importante na percepção do usuário sobre o carregamento da página, enquanto o Tempo para interação da página marca o ponto em que a página parece pronta o suficiente para processar as interações do usuário.

Capturas de tela

Em seguida, há uma coleção de capturas de tela que mostram a aparência da página durante o carregamento.

Oportunidades

A seguir, a seção Oportunidades, que fornece dicas específicas sobre como melhorar o desempenho de carregamento dessa página específica.

Clique em uma oportunidade para saber mais sobre ela.

Clique em Saiba mais... para ver a documentação sobre por que uma oportunidade é importante e recomendações específicas sobre como corrigi-la.

Diagnósticos

A seção Diagnóstico fornece mais informações sobre os fatores que contribuem para o tempo de carregamento da página.

Auditorias aprovadas

A seção Auditorias aprovadas mostra o que o site está fazendo corretamente. Clique para expandir a seção.

Etapa 2: experimento

A seção Oportunidades do relatório do Lighthouse oferece dicas sobre como melhorar o desempenho da página. Nesta seção, você vai implementar as mudanças recomendadas na base de código, auditando o site após cada mudança para medir como isso afeta a velocidade.

Ativar a compactação de texto

Seu relatório informa que ativar a compactação de texto é uma das principais oportunidades para melhorar o desempenho da página.

A compactação de texto ocorre quando você reduz ou compacta o tamanho de um arquivo de texto antes de enviá-lo pela rede. É como você compacta uma pasta antes de enviá-la por e-mail para reduzir o tamanho.

Antes de ativar a compactação, confira algumas maneiras de verificar manualmente se os recursos de texto estão compactados.

Abra o painel Rede e marque settings Configurações > check_box Usar linhas de solicitação grandes.

Cada célula Size mostra dois valores. O valor superior é o tamanho do recurso transferido por download. O valor inferior é o tamanho do recurso descompactado. Se os dois valores forem iguais, o recurso não vai ser compactado quando for enviado pela rede. Neste exemplo, os valores de cima e de baixo para bundle.js são 1.4 MB.

Você também pode verificar a compactação inspecionando os cabeçalhos HTTP de um recurso:

1. Clique em bundle.js e abra a guia Cabeçalhos.

   

2. Procure um cabeçalho content-encoding na seção Response Headers. Ela não vai aparecer, o que significa que bundle.js não foi compactado. Quando um recurso é compactado, esse cabeçalho geralmente é definido como gzip, deflate ou br. Consulte as Diretrizes para ver uma explicação desses valores.

Chega de explicações. É hora de fazer algumas mudanças! Ative a compactação de texto adicionando algumas linhas de código:

1. Na guia do editor, abra server.js e adicione estas duas linhas (destacadas):

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. Não se esqueça de colocar app.use(compression()) antes de app.use(express.static('build')).

   

3. Aguarde o Glitch implantar o novo build do site. Um emoji feliz no canto inferior esquerdo indica uma implantação bem-sucedida.

Use os fluxos de trabalho que você aprendeu anteriormente para verificar manualmente se a compactação está funcionando:

1. Volte para a guia de demonstração e atualize a página.

   A coluna Size agora vai mostrar dois valores diferentes para recursos de texto, como bundle.js. O valor superior de 269 KB para bundle.js é o tamanho do arquivo enviado pela rede, e o valor de baixo de 1.4 MB é o tamanho do arquivo descompactado.

   

2. A seção Response Headers para bundle.js agora deve incluir um cabeçalho content-encoding: gzip.

   

Gere o relatório do Lighthouse na página novamente para medir o impacto que a compactação de texto tem no desempenho de carregamento da página:

1. Abra o painel Lighthouse e clique em Fazer uma auditoria... na barra de ações na parte de cima.

   

2. Mantenha as configurações como antes e clique em Analisar o carregamento de página.

   

Uhuuu! Isso parece um progresso. Sua pontuação de desempenho geral deveria ter aumentado, o que significa que o site está ficando mais rápido.

Compactação de texto no mundo real

A maioria dos servidores realmente tem correções simples como essa para ativar a compactação. Basta fazer uma pesquisa sobre como configurar qualquer servidor usado para compactar texto.

Redimensionar imagens

O novo relatório diz que dimensionar corretamente as imagens é outra grande oportunidade.

O redimensionamento de imagens reduz o tamanho do arquivo para acelerar o carregamento. Se o usuário está visualizando as imagens em uma tela de dispositivo móvel com 500 pixels de largura, não faz sentido enviar uma imagem de 1.500 pixels de largura. O ideal é enviar uma imagem de 500 pixels de largura, no máximo.

1. No relatório, clique em Imagens com tamanho adequado para saber quais delas precisam ser redimensionadas. Parece que as quatro imagens são maiores do que o necessário.

   

2. De volta à guia do editor, abra src/model.js.

3. Substitua const dir = 'big' por const dir = 'small'. Esse diretório contém cópias das mesmas imagens que foram redimensionadas.

4. Audite a página novamente para ver como essa mudança afeta o desempenho do carregamento.

   

Parece que a mudança tem um pequeno impacto na pontuação de desempenho geral. No entanto, a pontuação não mostra claramente a quantidade de dados de rede que você está salvando para os usuários. O tamanho total das fotos antigas era de cerca de 6,1 MB, enquanto agora são de apenas cerca de 633 KB. Verifique isso na barra de status na parte inferior do painel Rede.

Como redimensionar imagens no mundo real

Para um app pequeno, fazer um redimensionamento único como esse pode ser bom o suficiente. No entanto, para um app grande, isso não é escalonável. Confira algumas estratégias para gerenciar imagens em apps grandes:

• Redimensione imagens durante o processo de build.
• Crie vários tamanhos de cada imagem durante o processo de build e use srcset no código. No tempo de execução, o navegador se encarrega de escolher o melhor tamanho para o dispositivo em que está sendo executado. Consulte Imagens de tamanho relativo.
• Use uma CDN de imagem que permite redimensionar dinamicamente uma imagem quando você solicitar.
• No mínimo, otimize cada imagem. Muitas vezes, isso gera uma grande economia. A otimização ocorre quando você executa uma imagem por meio de um programa especial que reduz o tamanho do arquivo. Consulte Otimização essencial de imagem para ver mais dicas.

Elimine os recursos que bloqueiam a renderização

Seu relatório mais recente diz que a eliminação dos recursos de bloqueio de renderização agora é a maior oportunidade.

Um recurso de bloqueio de renderização é um arquivo JavaScript ou CSS externo que o navegador precisa fazer o download, analisar e executar antes de mostrar a página. O objetivo é executar apenas o código CSS e JavaScript principal necessário para exibir a página corretamente.

Então, a primeira tarefa é encontrar o código que não precisa ser executado no carregamento da página.

1. Clique em Eliminar os recursos de bloqueio de renderização para ver os recursos que estão bloqueando: lodash.js e jquery.js.

   

2. Dependendo do seu sistema operacional, pressione as teclas a seguir para abrir o Menu de comandos:

   • No Mac, pressione Command + Shift + P
   • No Windows, Linux ou ChromeOS, pressione Control + Shift + P

3. Comece a digitar Coverage e selecione Mostrar cobertura.

   

   A guia Cobertura é aberta na Gaveta.

   

4. Clique em Atualizar. A guia Cobertura oferece uma visão geral de quanto do código em bundle.js, jquery.js e lodash.js está sendo executado enquanto a página é carregada.

   

   A captura de tela mostra que cerca de 74% e 30% dos arquivos jQuery e Lodash não são usados, respectivamente.

5. Clique na linha jquery.js. O DevTools abre o arquivo no painel Sources. Uma linha de código foi executada se tiver uma barra verde ao lado. Uma barra vermelha ao lado de uma linha de código significa que ele não foi executado e definitivamente não é necessário no carregamento de página.

   

6. Role um pouco pelo código jQuery. Na verdade, algumas das linhas que são "executadas" são apenas comentários. Executar esse código com um minificador que remove comentários é outra maneira de reduzir o tamanho desse arquivo.

Resumindo, quando você trabalha com seu próprio código, a guia Cobertura pode ajudar a analisar o código, linha por linha, e enviar apenas o código necessário para o carregamento da página.

Os arquivos jquery.js e lodash.js são necessários para carregar a página? A guia Solicitar bloqueio pode mostrar o que acontece quando os recursos não estão disponíveis.

1. Clique na guia Rede e abra o Menu de comando novamente.

2. Comece a digitar blocking e selecione Mostrar bloqueio de solicitações. A guia Solicitar bloqueio é aberta.

   

3. Clique em Adicionar padrão, digite /libs/* na caixa de texto e pressione Enter para confirmar.

   

4. Recarregue a página. As solicitações jQuery e Lodash estão em vermelho, o que significa que foram bloqueadas. A página ainda é carregada e interativa. Por isso, parece que esses recursos não são necessários.

   

5. Clique em Remover todos os padrões para excluir o padrão de bloqueio /libs/*.

Em geral, a guia Solicitar bloqueio é útil para simular o comportamento da página quando um recurso específico não está disponível.

Agora, remova as referências a esses arquivos do código e faça uma nova auditoria da página:

1. De volta à guia do editor, abra template.html.

2. Exclua as tags <script> correspondentes:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/libs/lodash.js"></script>
       <script src="/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. Aguarde o site ser recriado e reimplantado.

4. Audite a página novamente no painel Lighthouse. Sua pontuação geral deve ter melhorado de novo.

   

Otimizar o caminho crítico de renderização no mundo real

O caminho crítico de renderização se refere ao código necessário para carregar uma página. Em geral, é possível acelerar o carregamento de página enviando apenas os códigos críticos durante esse processo, e carregando lentamente todo o restante.

• É improvável que você encontre scripts que possam remover imediatamente, mas muitas vezes você descobrirá que muitos scripts não precisam ser solicitados durante o carregamento da página e, em vez disso, podem ser solicitados de maneira assíncrona. Consulte Como usar async ou adiar.
• Se você estiver usando um framework, verifique se ele tem um modo de produção. Esse modo pode usar recursos como o tree shaking (link em inglês) para eliminar o código desnecessário que está bloqueando a renderização crítica.

Realizar menos trabalho na linha de execução principal

O relatório mais recente mostra uma pequena economia em potencial na seção Oportunidades, mas se você rolar para baixo até a seção Diagnóstico, parece que o maior gargalo é a atividade da linha de execução principal.

A linha de execução principal é onde o navegador faz a maior parte do trabalho necessário para mostrar uma página, como analisar e executar HTML, CSS e JavaScript.

O objetivo é usar o painel Performance para analisar o trabalho que a linha de execução principal está fazendo enquanto a página é carregada e encontrar maneiras de adiar ou remover trabalhos desnecessários.

1. Abra Desempenho > Configurações de captura e defina Rede como 3G lento e CPU como Desaceleração 6x.

   

   Dispositivos móveis normalmente têm mais restrições de hardware do que laptops ou desktops. Portanto, essas configurações permitem que você experimente o carregamento da página como se estivesse usando um dispositivo menos potente.

2. Clique em Atualizar. O DevTools recarrega a página e produz uma visualização de tudo o que precisou fazer para carregá-la. Essa visualização será chamada de trace.

   

O trace mostra a atividade em ordem cronológica, da esquerda para a direita. Os gráficos de FPS, CPU e NET na parte de cima oferecem uma visão geral dos quadros por segundo e das atividades da CPU e da rede.

A parede amarela exibida na seção Visão geral significa que a CPU estava completamente ocupada com a atividade de script. Isso indica que você pode acelerar o carregamento da página se fizer menos trabalho no JavaScript.

Investigue o trace para encontrar maneiras de fazer menos trabalho no JavaScript:

1. Clique na seção Tempos para expandi-la.

   

   Há várias medidas de User Timing no React. Parece que o app do Tony está usando o modo de desenvolvimento do React. Alternar para o modo de produção do React provavelmente vai gerar alguns ganhos fáceis de desempenho.

2. Clique em Tempos novamente para fechar a seção.

3. Navegue até a seção Main. Esta seção mostra um registro cronológico da atividade principal da linha de execução, da esquerda para a direita. O eixo y (de cima para baixo) mostra por que os eventos ocorreram.

   

   Nesse exemplo, o evento Evaluate Script fez com que a função (anonymous) fosse executada, o que causou a execução de __webpack__require__, o que causou a execução de ./src/index.jsx e assim por diante.

4. Role até a parte inferior da seção Main. Quando você usa um framework, a maior parte da atividade superior é causada pelo framework, que geralmente está fora do seu controle. A atividade causada pelo app geralmente fica na parte inferior.

   

   Neste app, parece que uma função chamada App está causando muitas chamadas para uma mineBitcoin. Parece que Tony pode estar usando os dispositivos dos fãs para minerar criptomoedas...

5. Abra a guia Bottom-Up na parte inferior. Essa guia mostra as atividades que levaram mais tempo. Se você não encontrar nada na seção Bottom-Up, clique no rótulo da seção Main.

   

   A seção Bottom-Up só mostra informações de qualquer atividade ou grupo de atividades selecionadas no momento. Por exemplo, se você clicar em uma das atividades mineBitcoin, a seção Bottom-Up vai mostrar apenas as informações dessa atividade.

   A coluna Tempo próprio mostra quanto tempo foi gasto diretamente em cada atividade. Nesse caso, cerca de 82% do tempo da linha de execução principal foi gasto na função mineBitcoin.

É hora de conferir se o uso do modo de produção e a redução da atividade JavaScript aceleram o carregamento da página. Comece com o modo de produção:

1. Na guia do editor, abra webpack.config.js.
2. Altere "mode":"development" para "mode":"production".
3. Aguarde a implantação do novo build.

4. Audite a página novamente.

   

Reduza a atividade do JavaScript removendo a chamada para mineBitcoin:

1. Na guia do editor, abra src/App.jsx.
2. Comente a chamada para this.mineBitcoin(1500) na constructor.
3. Aguarde a implantação do novo build.
4. Audite a página novamente.

Como sempre, ainda há algumas coisas a serem feitas, como reduzir as métricas Maior exibição de conteúdo e Mudança de layout cumulativa.

Fazer menos trabalho da linha de execução principal no mundo real

Em geral, o painel Desempenho é a maneira mais comum de entender qual atividade seu site realiza durante o carregamento e encontrar maneiras de remover atividades desnecessárias.

Se você preferir uma abordagem mais parecida com console.log(), a API User Timing permite marcar arbitrariamente determinadas fases do ciclo de vida do app para acompanhar quanto tempo cada uma dessas fases leva.

Resumo

• Sempre que você decidir otimizar o desempenho de carregamento de um site, comece com uma auditoria. A auditoria estabelece um valor de referência e oferece dicas sobre como melhorar.
• Faça uma alteração de cada vez e faça uma auditoria da página após cada alteração para ver como essa alteração isolada afeta o desempenho.

Próximas etapas

Execute auditorias no seu site. Se precisar de ajuda para interpretar seu relatório ou encontrar maneiras de melhorar o desempenho de carga, confira todas as maneiras de receber ajuda da comunidade DevTools:

• Registre bugs neste documento no repositório developer.chrome.com.
• Registre relatórios de bugs no DevTools em Bugs do Chromium.
• Converse sobre os recursos e mudanças na lista de e-mails. Não use a lista de e-mails para perguntas de suporte. Use o Stack Overflow.
• Receba ajuda sobre como usar o DevTools no Stack Overflow. Para registrar solicitações de bugs, sempre use os bugs do Chromium.
• Envie um tweet para @ChromeDevTools.