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.
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.
Veremos alguns recursos do React que ajudarão a lidar com problemas de performance:
Memo
para fazer memorização de componentes;useMemo
;import
s 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.
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!
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.
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:
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.
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.
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.
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!
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:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas