Otimize a velocidade do site usando Lighthouse

Este tutorial ensina como usar o Lighthouse e outras ferramentas no DevTools para encontrar maneiras de fazer seus sites carregarem mais rápido.

A ferramenta Lighthouse fornece links para conteúdo hospedado em sites de terceiros. A Microsoft não é responsável e não tem controle sobre o conteúdo desses sites e quaisquer dados que possam ser coletados.

Pré-requisitos

• Instale o Visual Studio Code para editar o código-fonte.

• Instale Node.js para usá-lo como um servidor Web local.

Introdução

Neste tutorial, você melhora o desempenho de Margie's travel, um site de viagens fictício que contém imagens de viagens, descrições de texto, algumas interações do usuário baseadas em JavaScript e um mapa interativo.

Os arquivos de origem do site estão em MicrosoftEdge / Demos > travel-site.

Etapa 1: configurar o site localmente

Primeiro, configure o site localmente, para que você possa fazer alterações nele mais tarde:

1. Obtenha o código-fonte do site localmente: Clone o repositório "MicrosoftEdge / Demos" para sua unidade em Código de exemplo para DevTools.

2. Abra a pasta que você acabou de baixar ou clonar no Visual Studio Code.

3. No Visual Studio Code, selecione Exibir>Terminal. Ou pressione Ctrl+'.

   O Visual Studio Code exibe os arquivos de origem na barra lateral do Explorer e exibe o Terminal:

   

4. No terminal, digite npx http-server para iniciar um servidor Web local.

   Esse servidor Web local será interrompido quando você fechar o Visual Studio Code.

5. No Microsoft Edge, vá para http://localhost:8080/travel-site abrir o site:

   

Etapa 2: Auditar o site

Sempre que você se propõe a melhorar o desempenho de carregamento de um site, sempre comece com uma auditoria.

A auditoria tem duas funções importantes:

• Ela cria uma linha de base para você medir as alterações subsequentes.

• Ela fornece dicas práticas sobre quais alterações melhoram mais o desempenho.

Estabelecer uma linha de base

A linha de base é um registro do desempenho do site antes de você fazer qualquer melhoria de desempenho.

1. No Microsoft Edge, abra o DevTools clicando com o botão direito do mouse na página da Web e selecionando Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

2. No DevTools, na barra de ferramentas principal, selecione a guia Lighthouse . Se essa guia não estiver visível, clique no botão Mais guias () ou no botão Mais Ferramentas ().

3. Selecione a categoria Desempenho e desmarque todas as outras categorias. Por enquanto, mantenha as outras opções padrão. As opções são:

   • Modo: para executar testes durante o carregamento da página da Web, defina esta opção como Navegação (padrão). Para executar testes durante um período de tempo, defina a opção como Intervalo de tempo. Para executar testes na página da Web como ela aparece agora, defina a opção como Instantâneo.

   • Dispositivo: Para simular uma string de agente de usuário móvel e uma janela de visualização móvel, defina esta opção como Móvel. Para testar a página da Web sem nenhuma simulação, defina essa opção como Área de trabalho.

   • Categorias: esta opção permite que você execute apenas um subconjunto dos testes disponíveis no Lighthouse.

4. Clique em Analisar carregamento de página:

   

5. Após 10 a 30 segundos, um relatório do desempenho do site é exibido:

   

Tratamento de erros de relatório

Se o relatório do Lighthouse mostrar erros, tente executar o Lighthouse novamente em uma janela InPrivate , sem outras guias abertas. Executar o Lighthouse a partir de uma janela InPrivate garante que o processo de auditoria seja executado sem interferência.

Para abrir uma janela InPrivate :

1. Clique no botão Configurações e mais (...) na barra de ferramentas do Microsoft Edge (acima da barra de ferramentas do DevTools).

2. Clique em Nova janela InPrivate.

3. Estabeleça uma nova linha de base no Lighthouse:

   

Entenda seu relatório

Pontuação de desempenho geral

O número na parte superior do relatório é a pontuação de desempenho geral da página da Web. Posteriormente, à medida que você faz alterações no código, o número exibido deve aumentar. Uma pontuação mais alta significa melhor desempenho.

Métrica

A seção Métricas fornece medidas quantitativas do desempenho da página da Web:

Cada métrica fornece informações sobre um aspecto diferente do desempenho. Por exemplo:

• First Contentful Paint indica quando o conteúdo aparece pela primeira vez na tela. Este é um marco importante na percepção do usuário sobre o carregamento da página.
• Time To Interactive marca o ponto em que a página renderizada está pronta para lidar com as interações do usuário.

Clique em Expandir exibição para exibir uma descrição para cada métrica. Em seguida, clique em Saiba mais para ler a documentação sobre o assunto:

Capturas de tela

Abaixo da seção Métricas , há uma coleção de capturas de tela que mostram a aparência da página durante o carregamento:

Oportunidades

A seção Oportunidades fornece dicas específicas sobre como melhorar o desempenho de carregamento desta página da Web específica:

Clique em uma oportunidade para exibir mais informações sobre ela e, em seguida, clique em Saiba mais para ler sobre por que uma oportunidade é importante e recomendações específicas sobre como corrigi-la:

Diagnóstico

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

Auditoria aprovada

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

Etapa 3: Experimentar

A seção Oportunidades do relatório fornece dicas sobre como melhorar o desempenho da página da Web. Nesta seção, você implementa as alterações recomendadas na base de código, auditando o site novamente após cada alteração para medir como essa alteração afeta a velocidade do site.

Redimensionar imagens

Seu relatório indica que a veiculação de imagens de tamanho apropriado é uma das principais oportunidades para melhorar o desempenho da página. Redimensionar imagens ajuda a reduzir o tamanho da carga de rede. Se o usuário estiver visualizando suas imagens na tela de um dispositivo móvel com 500 pixels de largura, não faz sentido enviar uma imagem de 1500 pixels de largura. O ideal é enviar uma imagem de 500 pixels de largura, no máximo.

Na seção Oportunidades do seu relatório, clique em Dimensionar imagens corretamente para exibir quais imagens devem ser redimensionadas. O Lighthouse lista quatro .jpg arquivos que você pode redimensionar para melhorar o tempo de carregamento:

Antes de redimensionar essas imagens, verifique a quantidade de dados que o servidor deve enviar ao navegador para exibir essas imagens:

1. Abra a ferramenta Rede .

   Se a ferramenta estiver vazia, atualize a página.

2. Na caixa de texto Filtro , digite .jpg para filtrar a lista de solicitações e mostrar apenas as quatro imagens.

   Para saber mais sobre como filtrar solicitações na ferramenta Rede , consulte Filtrar solicitações na Referência de recursos de rede.

3. Verifique a barra de ferramentas inferior na ferramenta Rede para verificar a quantidade de dados transferidos devido às imagens:

   

   A barra de ferramentas inferior mostra que as quatro imagens contribuem com 16,4 MB do total de 17,3 MB de dados transferidos para esta página da web.

Em seguida, redimensione as imagens e execute uma nova auditoria:

1. No Visual Studio Code, abra a /travel-site/assets/img/optimized/ pasta no Explorer, que contém uma cópia das quatro imagens exibidas na página da Web, mas já otimizadas para você. Essas imagens têm 1000 pixels de largura e usam o formato mais otimizado .webp .

   O redimensionamento de imagens depende do sistema operacional. Por exemplo, para redimensionar imagens no Windows, você pode usar PowerToys. Para saber mais, consulte o utilitário Image Resizer.

2. Abra o /travel-site/index.html arquivo e substitua os quatro caminhos de imagem da seguinte maneira:

   • Substitua as quatro instâncias de assets/img/ no arquivo por assets/img/optimized.

   • Substitua as quatro instâncias de .jpg no arquivo por .webp.

3. No Lighthouse, clique em Executar uma auditoria () para voltar à página principal do Lighthouse sem perder o relatório de linha de base.

4. Clique em Analisar carregamento de página novamente para ver como a alteração afeta o desempenho do carregamento:

   

Sua pontuação aumentou de 18 para 26. Para verificar a quantidade de dados salvos, use a ferramenta Rede como você fez antes:

Agora, as imagens na página da Web exigem apenas a transferência de 360 KB de dados, em vez de 16,4 MB.

Redimensionar imagens automaticamente

Para um aplicativo pequeno, fazer um redimensionamento único como esse pode ser suficiente. Mas, para um aplicativo grande, considere estas estratégias de gerenciamento de imagens:

• Redimensionar automaticamente as imagens durante o processo de compilação.

• Crie vários tamanhos de cada imagem durante o processo de compilação e use-os srcset no código. Em tempo de execução, o navegador se encarrega de escolher qual tamanho é melhor para o dispositivo.

• Use uma CDN de imagem que permita redimensionar dinamicamente uma imagem quando você a solicitar.

• Pelo menos, otimize cada imagem. Isso muitas vezes pode criar grandes economias.

  Otimização significa executar uma imagem por meio de um programa que reduz o tamanho do arquivo de imagem.

Veja também:

• Usando imagens responsivas em HTML no MDN.
• HTMLImageElement: srcset no MDN.

Reduzir o JavaScript não utilizado

Seu último relatório do Lighthouse diz que a página da Web contém código JavaScript não utilizado e que carregar esse código somente quando necessário diminuiria a quantidade de dados transferidos quando a página é carregada.

Clique em Reduzir o JavaScript não usado para revelar os arquivos JavaScript que contêm o código mais não usado:

Os arquivos JavaScript relatados são do domínio, o www.bing.com que significa que o código não utilizado vem do componente Bing Map usado na página da Web. Role para baixo no site de demonstração de viagens de Margie para ver o mapa:

Para confirmar a quantidade de código não utilizado e possivelmente encontrar outros recursos não utilizados, use a ferramenta Cobertura :

1. No DevTools, pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando, comece a digitar Coveragee selecione Mostrar cobertura na lista.

   

2. Na ferramenta Cobertura , clique em Iniciar instrumentação de cobertura e atualize a página (). A ferramenta Cobertura fornece uma visão geral de quanto do código JavaScript e CSS carregado na página foi realmente executado.

   

O relatório de cobertura confirma que as dependências do Bing Map contêm código que não é usado quando a página é carregada. O mapa no site de demonstração não está visível quando a página é carregada pela primeira vez. Há uma boa oportunidade de melhorar o desempenho carregando o Bing Map somente quando essa seção da página se tornar visível para os usuários.

Use a API Intersection Observer para detectar quando o mapa se torna visível para o usuário. A API do Observador de Interseção fornece uma maneira de observar as alterações na interseção de um elemento de destino (o mapa, neste caso) com a janela de visualização da página da Web. Para saber mais, consulte API do Observador de Interseção no MDN.

1. No Visual Studio Code, abra o /travel-site/index.html arquivo e role para baixo até a parte inferior do arquivo. A API do Bing Map é carregada usando uma <script> marca:

   

   Abaixo dessa linha está outra linha responsável por configurar e carregar o mapa no lugar certo: <script src="assets/map.js"></script>

2. Exclua estas duas linhas e adicione esta nova linha: <script src="assets/map-on-demand.js"></script>.

   

3. Abra o /travel-site/assets/map-on-demand.js arquivo no Visual Studio Code e leia o código para entender como ele carrega e inicializa o componente Bing Map. Aqui está um trecho desse código, juntamente com uma descrição de como ele funciona:

   const MAP_CONTAINER_EL = document.querySelector('.place-discover-map');
   
   const mapElIntersectionObserver = new IntersectionObserver(loadMapOnDemand);
   mapElIntersectionObserver.observe(MAP_CONTAINER_EL);
   
   let map = null;
   
   function loadMapOnDemand(entries) {
      if (map) {
        return;
      }
   
      if (!entries.some(entry => entry.isIntersecting)) {
        return;
      }
   
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=Ap_eazGgpq5468v9MXr7Wu0zh30LQActgaT-tI_QxZQSm-Bd5qJxVKs_2B7NsqR4';
      document.body.appendChild(script);
   }
   
   function GetMap() { /* ... */ }
   

   O código inicializa a mapElIntersectionObserver variável para um novo IntersectionObserver objeto. Esse observador então começa a observar o MAP_CONTAINER_EL elemento, que é o elemento na página que deve conter o mapa.

   À medida que o usuário rola, a função de retorno de loadMapOnDemand chamada do observador é executada. Esta função não faz nada quando o mapa já existe ou se o elemento do contêiner do mapa não cruza a janela de visualização atual.

   Se o usuário rolar até um ponto em que o elemento do contêiner do mapa se torne visível no visor e se o mapa ainda não tiver sido inicializado, o código criará um novo script elemento, definirá seu src atributo como a API de Mapa do Bing e inserirá o script na página.

   O restante do arquivo é igual ao map-on-demand.jsmap.js arquivo. Assim que a API do Bing Map é carregada, a GetMap função é executada. GetMap Configura e exibe o mapa no elemento Container.

4. Salve suas alterações no Visual Studio Code, atualize a página da Web no Microsoft Edge e execute uma nova auditoria na ferramenta Lighthouse para ver como suas alterações afetam o desempenho da carga:

   

   Sua pontuação no Lighthouse está agora em 31, o que é uma melhoria em relação a antes, mas há mais coisas para otimizar.

Eliminar recursos de bloqueio de renderização

A próxima oportunidade exibida na seção Oportunidades da ferramenta Lighthouse está relacionada à eliminação de recursos de bloqueio de renderização.

Um recurso de bloqueio de renderização é um arquivo JavaScript ou CSS externo que o navegador deve baixar, analisar e executar antes de exibir a página. Quanto mais recursos de bloqueio de renderização precisam ser processados quando uma página da Web é carregada, mais tempo ela precisa para começar a aparecer no navegador. Tente executar apenas o código CSS e JavaScript principal necessário para exibir o estado inicial da página corretamente.

A primeira tarefa, então, é localizar o código que você não precisa executar no carregamento da página.

1. Clique em Eliminar recursos de bloqueio de renderização para exibir os recursos que estão bloqueando:

   

   O Lighthouse exibe uma lista das folhas de estilo que a página da Web de demonstração usa, como: base.css, home.css, e map.css.

2. Abra a ferramenta Cobertura novamente: pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS), digite Cobertura e selecione Mostrar Cobertura.

3. Clique em Iniciar instrumentação de cobertura e atualize a página () para exibir o relatório de cobertura e, em seguida, digite css no campo de filtro de URL para exibir apenas os arquivos CSS:

   

   O relatório mostra que os contact-form.css arquivos e gallery.css não são usados. Ambos têm 100% de bytes não utilizados.

4. Clique no contact-form.css arquivo no relatório. O DevTools abre o arquivo na ferramenta Fontes . Se uma linha de código foi executada, uma barra azul aparecerá ao lado dela. Uma barra vermelha significa que a linha de código não foi executada e definitivamente não é necessária no carregamento da página da web.

   

   Somente barras vermelhas são exibidas nesse arquivo de origem, o que significa que a página da Web não precisa desse arquivo.

Agora, remova as referências a esses arquivos do código:

1. No Visual Studio Code, abra o /travel-site/index.html arquivo.

2. Próximo à parte superior do arquivo, localize a lista de tags que carregam as folhas de <link> estilo na página.

3. Exclua as duas linhas de código que carregam os contact-form.css arquivos and gallery.css :

   

4. Salve suas alterações no Visual Studio Code, atualize a página da Web no Microsoft Edge e execute uma nova auditoria na ferramenta Lighthouse novamente para ver como suas alterações afetam o desempenho da carga.

Remover automaticamente CSS não crítico

Na etapa anterior, sua pontuação melhorou um pouco, mas o Lighthouse ainda sinaliza outros arquivos CSS como bloqueando a renderização inicial da página.

A página da Web usa os arquivos CSS restantes, portanto não é possível removê-los. No entanto, é possível dividi-los em dois grupos:

• Código CSS crítico que precisa bloquear a renderização da página da Web porque afeta visualmente o estilo e o layout da parte da página da Web que os usuários veem quando ela é carregada.

  Por exemplo, o título na página da Web usa a header h1 regra CSS no /travel-site/assets/base.css arquivo.

• Código CSS não crítico usado para renderizar partes da página que não estão visíveis quando a página é carregada.

  Por exemplo, o /travel-site/assets/desktop.css arquivo só é necessário quando o visor é maior que 665px.

Para dividir automaticamente seu código CSS dessa maneira, você pode usar a ferramenta Critical . Para saber mais, consulte o repositório de projeto crítico.

Em seguida, você pode carregar seu código CSS não crítico de uma maneira que não bloqueie a renderização inicial da página.

Também é bom minificar seu código CSS e remover caracteres e comentários desnecessários de espaços em branco. Consulte Minify CSS em developer.chrome.com.

Veja também:

• Otimização de desempenho CSS no MDN.

Reduza a mudança de layout definindo largura e altura explícitas nas imagens

Em seu relatório do Lighthouse , a seção Diagnóstico sugere definir elementos explícitoswidth e height para imagem. Clique em Os elementos da imagem não têm largura e altura explícitas para exibir mais informações:

O relatório diz que a imagem na parte superior da página da Web não tem atributos e explícitos widthheight , o que pode causar mudanças de layout.

As mudanças de layout ocorrem quando partes de uma página da Web aparecem inicialmente em um lugar, mas depois se movem para outra posição durante o carregamento da página. Por exemplo, quando uma imagem é carregada, o navegador não sabe quanto espaço reservar para ela até que a imagem esteja totalmente carregada.

Para evitar mudanças de layout causadas pelo carregamento de imagens em uma página da Web, siga um dos seguintes procedimentos:

• Defina cada width imagem e height atributos no código HTML.
• Reservar o espaço no CSS usando a aspect-ratio propriedade CSS.

Veja também:

• Estratégia de renderização: evitando instabilidade ao carregar imagens em Multimídia: Imagens no MDN.
• : O elemento Image Embed no MDN.

Nas etapas a seguir, use a aspect-ratio propriedade CSS para evitar mudanças de layout:

1. No Visual Studio Code, abra o /travel-site/assets/home.css arquivo e procure a regra CSS que tem o .hero-image img seletor.

2. Modifique a regra CSS para que fique assim:

   .hero-image img {
     width: calc(100% + 2 * var(--main-margin));
     position: relative;
     left: calc(-1 * var(--main-margin));
     aspect-ratio: 1.5;
     object-fit: cover;
   }
   

   Antes dessa alteração, a regra CSS já continha uma width propriedade, então o navegador sabia quanto espaço horizontal reservar para a imagem. Ao adicionar a aspect-ratio propriedade, você também informa ao navegador quanto espaço vertical reservar. Ao adicionar a object-fit propriedade, você evita distorcer a imagem se suas dimensões CSS não corresponderem às dimensões reais do arquivo de imagem.

3. Abra o /travel-site/assets/desktop.css arquivo e procure a regra CSS que tem o mesmo .hero-image img seletor.

   O desktop.css arquivo é usado somente quando o visor é maior que 665px, para quando a página da Web é exibida em uma tela grande, por exemplo, quando usada em um laptop.

4. Modifique a regra CSS para que fique assim:

   .hero-image img {
       width: 100%;
       position: static;
       aspect-ratio: 2.5;
       object-fit: cover;
   }
   

   Desta vez, a regra CSS já tinha um width e object-fit definido. Mas, em vez de definir um max-height para a imagem, use a aspect-ratio propriedade para garantir que o navegador saiba exatamente quanto espaço reservar para a imagem em dispositivos de desktop.

5. Salve suas alterações no Visual Studio Code, atualize a página da Web no Microsoft Edge e execute uma nova auditoria na ferramenta Lighthouse para ver como suas alterações afetam o desempenho da carga:

   Sua pontuação agora é de até 37, mas o mais importante é que a pontuação cumulativa de mudança de layout caiu para 0, indicando que não há mais mudanças no layout à medida que a página é carregada.

   

Faça menos trabalho no thread principal

Seu relatório mais recente mostra altos valores de métricas de Tempo para Interação e Tempo Total de Bloqueio , o que significa que ainda há algo na página da Web que leva muito tempo para ser executado e impede que a página seja usada por vários segundos.

Role para baixo até a seção Diagnóstico que diz Minimizar o trabalho do thread principal e Reduzir o tempo de execuçãodo JavaScript. O thread principal é onde o navegador faz a maior parte do trabalho necessário para exibir uma página, como:

• Analisando e executando HTML.
• Analisando e aplicando CSS a elementos DOM.
• Executando JavaScript.

Nesse caso, parece que o maior gargalo é que a página executa muito código JavaScript no carregamento da página.

Use a ferramenta Desempenho para analisar o trabalho que o thread principal está fazendo enquanto a página é carregada e encontre maneiras de adiar ou remover trabalho desnecessário:

1. Abra a ferramenta Desempenho .

2. Na ferramenta Desempenho , clique em Iniciar criação de perfil e recarregar a página () e, em seguida, clique em Parar quando a página estiver totalmente carregada.

   O DevTools exibe uma visualização de todo o trabalho que o navegador executou para carregar a página. Essa visualização é chamada de rastreamento:

   

O rastreamento mostra a atividade cronologicamente, da esquerda para a direita. Os gráficos CPU e NET na parte superior fornecem uma visão geral da atividade da CPU e da rede. A área marrom clara no gráfico de CPU corresponde a um período de tempo em que o navegador estava ocupado com a atividade de script. Essa área é uma pista de que você pode acelerar o carregamento da página fazendo menos trabalho em JavaScript.

Investigue o rastreamento para encontrar maneiras de fazer menos trabalho em JavaScript.

A seção Principal mostra um registro cronológico da atividade do thread principal, da esquerda para a direita. O eixo Y (de cima para baixo) mostra por que os eventos ocorreram.

Por exemplo, na figura a seguir, o navegador passa a maior parte do tempo em um evento Analisar HTML . Enquanto esse evento for executado, a página da Web não será totalmente exibida. Esse evento causou um evento de Script de Avaliação longo, que corresponde a quando o navegador executa o código JavaScript. O evento Evaluate Script causou a execução de uma (anonymous) função, o que fez com que a initRatings função fosse executada:

Otimize a initRatings função para tornar o carregamento da página mais rápido:

1. No Visual Studio Code, abra o /travel-site/assets/rating.js arquivo e leia o código.

   O código neste arquivo é responsável por exibir cinco avaliações de clientes na página da web. Cada revisão tem uma classificação composta por várias estrelas, uma citação e um autor. Essas revisões vêm de uma API do lado do servidor usada na getRatings função. A initRatings função cria elementos DOM na página para cada revisão.

2. initRatings Na função, encontre uma maneira de tornar o código JavaScript mais rápido.

   Esta página da web é apenas uma demonstração, e um for loop foi introduzido para desacelerar o código. Na prática, há muitas maneiras de um arquivo JavaScript como este causar carregamentos lentos de página, como:

   • Acessar o DOM com muita frequência.
   • Executando tarefas de computação pesadas.
   • Usar grandes bibliotecas ou estruturas JavaScript.

3. Exclua o for loop no início da initRatings função, salve suas alterações e recarregue a página no Microsoft Edge.

4. Execute uma nova auditoria na ferramenta Lighthouse para ver como suas alterações afetam o desempenho da carga:

   

   • Sua pontuação subiu para 92.
   • O tempo para métrica interativa caiu para 1,3 segundos.
   • A métrica Tempo Total de Bloqueio caiu para 0 segundos.

Para saber mais sobre como analisar o desempenho da página, consulte Referência de recursos de desempenho).

Fazer menos trabalho no thread principal, no mundo real

A ferramenta Desempenho é a maneira mais comum de entender qual atividade sua página da Web faz enquanto é carregada e encontrar maneiras de remover atividades desnecessárias.

Se você preferir uma abordagem mais parecida com console.log(), a API de tempo do usuário permite que você marque arbitrariamente certas fases do ciclo de vida do seu aplicativo, a fim de rastrear quanto tempo cada uma dessas fases leva.

As páginas da Web geralmente carregam lentamente quando usam JavaScript para gerar a maioria de suas interfaces de usuário. Para melhorar o desempenho da página da Web, considere mover o código que cria a interface do usuário da página da Web para o lado do servidor e entregar esse código ao navegador como HTML e CSS.

Resumo

• Sempre que você se propõe a otimizar o desempenho de carga de um site, sempre comece com uma auditoria. A auditoria estabelece uma linha de base e fornece dicas sobre como melhorar.

• Faça uma alteração de cada vez e audite a página da Web após cada alteração para exibir como essa alteração isolada afeta o desempenho.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.