React: identificando problemas de performance com o Google Lighthouse

Entendendo o Lighthouse - Apresentação

Olá, estudante! Tudo bem? Eu sou o instrutor Pedro.

Audiodescrição: Pedro Mello se identifica como um homem branco. Possui olhos castanho-escuros, além de cabelos curtos e barba, ambos escuros. No nariz, há dois piercings de argola: um no septo e outro na aba direita. No corpo, uma camiseta preta. Está sentado em uma cadeira gamer preta. À sua frente, há um microfone de mesa. Ao fundo, um ambiente iluminado pela luz azul, com instrumentos, quadros e uma estante à direita com alguns objetos.

Queremos te dar as boas-vindas a mais um curso de React aqui na Alura. O foco deste curso vai ser tratar a performance em aplicações React.

Conhecendo o Projeto

No nosso curso, recebemos um projeto da ByteBooks, que é uma editora de livros. Já teremos bastante coisa pronta para manipular e melhorar nesta aplicação.

Nosso maior aliado durante esse curso será o Google Lighthouse, a ferramenta que utilizaremos para medir as métricas de performance.

O que Aprenderemos?

Veremos alguns recursos do React que ajudarão a lidar com problemas de performance:

• O Memo para fazer memorização de componentes;
• O hook useMemo;
• O Lazy Import do React, para fazermos imports somente quando forem necessários em tela. Isso vai melhorar bastante a performance da nossa aplicação.

Vamos trocar o formato das imagens para utilizar formatos mais leves para a web, que hoje são aceitos em todos os navegadores (browsers). Então, é isso e muito mais que vamos encontrar neste curso.

Pré-Requisitos

Apesar de ser um tópico um pouco mais avançado, que vai exigir conhecimentos prévios em React e do funcionamento interno, tanto do Virtual DOM quanto do JSX, este curso vai agregar muito para o mercado de trabalho e também para projetos pessoais.

Este é o melhor momento para tirar aquele projeto guardado na gaveta e começar a desenvolver junto conosco, utilizando as técnicas que vamos empregar aqui.

Esperamos você na primeira aula!

Entendendo o Lighthouse - Conhecendo o Lighthouse

Estamos com o projeto da ByteBooks aberto no navegador. Essa empresa editora de livros nos procurou para discutir algumas questões sobre melhorias para o site deles, e a principal preocupação é a performance relatada pela clientela.

Analisando a Performance

Antes de começarmos a manipular o projeto e analisar o código, vamos entender se realmente existe um problema de performance. Para isso, utilizaremos a ferramenta Google Lighthouse, que é gratuita. Se é de graça, gostamos.

Vamos demonstrar como estamos executando o projeto em um ambiente de desenvolvimento. A forma de executá-lo é um pouco diferente, e em um próximo momento, mostraremos como podemos rodar essa mesma ferramenta em um site em produção, que já está disponível na web.

Para acessarmos o Lighthouse, após configurar o projeto usando os links disponíveis na atividade, ele estará disponível na aba de extensões do navegador, representado por um ícone de farol em vermelho. Para rodá-lo em um site em ambiente de desenvolvimento, o qual estamos executando localmente, acessamos pela aba de desenvolvimento.

Ao abrir a aba de desenvolvimento, se o Lighthouse não estiver visível na barra superior de menus, basta clicar no ícone de duas setas apontadas para a direita e selecioná-lo na lista suspensa. Isso abrirá uma aba chamada "Lighthouse" junto aos outros menus.

No interior da aba do Lighthouse, perceberemos que ele possui alguns modos de funcionamento na seção "Mode". Para nós, apenas a opção "Navigation" importa por enquanto. Não abordaremos a opção "Timestamp" nem a "Snapshot" agora. Quanto à seção "Categories" (categorias), focaremos na performance, portanto vamos selecioná-la. Não que acessibilidade, boas práticas, SEO e PWA (Progressive Web Apps ou Aplicativos Web Progressivos) não sejam importantes, mas o foco, de acordo com o pedido do cliente, é a performance.

Com tudo selecionado, clicaremos no botão "Analyze page load" (analisar carregamento da página, em português), no canto superior direito, para iniciar a análise. Ela demora um pouco, mas logo poderemos ver o resultado de 65 pontos de performance na aba do Lighthouse. Esta pontuação é ruim para a performance de um site público.

Abaixo da pontuação, temos algumas métricas, como:

• "First Contentful Paint" (Primeira Pintura de Conteúdo), que indica o tempo até o primeiro conteúdo aparecer — neste caso, temos uma média 1.3 segundos.
• "Largest Contentful Paint" (Maior Pintura de Conteúdo), que indica o tempo até a última informação ser carregada na tela — neste caso, a média é de 3.8 segundos.

Estes são aspectos que precisamos trabalhar.

As outras métricas não são importantes neste momento, mas temos o "Speed Index" (Índice de Velocidade), relacionado às chamadas que fazemos para buscar imagens e carregar fontes. Analisaremos esses detalhes mais adiante.

Abaixo das métricas, temos um mapa cronológico ("Timemap") com quadrados representando os estados da tela. Ele inicia desde a tentativa de acesso ao site, mostrando um longo período em tela branca (cinco quadrados) antes de começar a carregar as imagens.

Abaixo do mapa, ele apresenta oportunidades de melhoria na seção "Opportunities", como questões relacionadas a imagens e formatos, que veremos detalhadamente durante o curso. Há algumas questões de JavaScript com as quais não precisamos nos preocupar por enquanto, assim como a seção "Diagnostics" (diagnósticos) que traz outras informações, algumas relevantes para nós e outras não, já que estamos lidando com um site em ambiente de desenvolvimento.

Convidamos você a instalar a extensão do Lighthouse, caso ainda não o tenha feito, e testá-la tanto no projeto que estiver executando quanto em um site em produção, acessando-o diretamente pela aba de extensões do navegador.

Após isso feito, esperamos você no próximo vídeo.

Entendendo o Lighthouse - Analisando as métricas de performance

Faremos um convite. Se na última aula você não fez os exercícios, vamos fazer juntos agora. E nada melhor para ilustrar do que o site da Alura. Após abrir o site no navegador, vamos executar o Lighthouse.

Comparando o ByteBooks com o Site da Alura

Vamos perceber uma diferença. No site da ByteBooks, que está rodando em ambiente de desenvolvimento, tivemos que acessar a extensão para fazer a varredura e trazer o report (relatório) para nós a partir do console de desenvolvimento. Agora, como estamos lidando com um site real, que está em produção e acessível na web, podemos simplesmente clicar na extensão Lighthouse à direita da barra de pesquisa.

Após o clique, ele vai abrir uma janela suspensa para falar que podemos rodar pelo DevTools. Além disso, no topo direito da janela, ele tem uma engrenagem, onde vamos clicar para fazer a configuração da mesma forma que fizemos para rodar na aba de desenvolvimento.

Novamente, o nosso foco é a performance, apesar dele trazer outros relatórios para nós. Portanto, nas opções exibidas, vamos deixar selecionado somente "Performance", na seção de categorias, e "Desktop" na seção de dispositivos, porque neste momento, estamos usando o desktop para fazer esse relatório de performance.

No topo da janela suspensa, vamos clicar no botão "Generate Report" (gerar relatório). Diferente do ambiente de desenvolvimento, ele abriu uma guia separada, onde mostrou uma mensagem informando que está aguardando o Lighthouse gerar esse relatório para nós com as informações. Ele vai demorar um pouco mais para gerar do que nosso aplicativo, porque é um site que precisa de acesso para poder acessar e trazer as informações.

Após a geração do relatório, veremos a pontuação de performance no topo, que está na casa dos 90, o que já é excelente. Os 90 seriam o melhor resultado possível. Claro que, como todos os sites, existem melhorias e também o resultado pode variar um pouco, dependendo do momento.

Pode haver, por exemplo, indisponibilidade de alguma API que retorna alguma imagem ou informação. Com isso em mente, é sempre importante rodar mais de uma vez — não devemos rodar só uma vez e achar que aquele resultado é o verdadeiro. Temos que estar sempre verificando se está tudo correto.

Abaixo da pontuação, podemos ver que os tempos estão excelentes, tanto do aparecimento em tela do primeiro conteúdo quanto do último conteúdo. O tempo marca menos de um segundo.

• First Contentful Paint: 0.8s
• Largest Contentful Paint: 0.8s

Na seção "Diagnostics" há alguns diagnósticos do código, bem parecidos com o ambiente de desenvolvimento. Por isso que há algumas informações retornadas com as quais não precisamos nos preocupar.

Mas, no geral, observando na seção "Timemap" o carimbo de data e hora mostrando a tela desde o momento em que ela é acessada até o último conteúdo ser renderizado, percebemos que ele tem muito mais quadrados conteúdo e nenhum em branco.

O feedback visual para a pessoa usuária é importante. É importante ter conteúdo em tela, mesmo que algo demorado esteja sendo carregado. Ao contrário do ByteBooks, no momento, que exibe uma tela em branco por bastante tempo.

Este é um ponto muito importante para trabalharmos no carregamento inicial: não deixar uma tela em branco para a pessoa usuária. Vamos ver isso conforme avançamos no curso.

Voltando à guia do ambiente de desenvolvimento do ByteBooks para observar a aba do LightHouse, veremos que todas as métricas e resultados são bem semelhantes em relação ao ambiente produtivo do site da Alura, com a ressalva de que o site da Alura está de parabéns pela pontuação na performance.

Na próxima aula, vamos dar andamento ao código e trazer algumas melhorias, principalmente para essa questão da tela em branco. Nos veremos no próximo vídeo!

Sobre o curso React: identificando problemas de performance com o Google Lighthouse

O curso React: identificando problemas de performance com o Google Lighthouse possui 100 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Entendendo o Lighthouse
• Identificando problemas na performance
• Otimizando a aplicação
• Otimizando as renderizações da aplicação
• Ajustes em imagens e css