A velocidade com que seu site ou aplicativo é carregado inicialmente é crucial para a primeira impressão que os usuários têm. Este guia apresenta métodos comprovados para otimizar o carregamento inicial, economizando segundos valiosos.
Importância do Tempo de Carregamento Inicial
O período entre o momento em que um usuário digita o endereço do seu site e a exibição completa do conteúdo é fundamental para criar uma experiência positiva. Esses segundos iniciais moldam a percepção do usuário.
Um estudo da Amazon revelou que um atraso de 100 milissegundos no carregamento pode resultar em uma queda de 1% nas vendas.
No entanto, muitos desenvolvedores negligenciam essa questão. O acúmulo de bibliotecas e funcionalidades extras pode levar a uma lentidão gradual e, consequentemente, à diminuição das conversões. As perdas nessas conversões podem ser difíceis de rastrear, pois muitos usuários abandonam páginas com carregamento demorado antes que qualquer métrica seja coletada.
Algumas otimizações podem ser feitas no front-end e outras no back-end. Independentemente disso, o objetivo é que as aplicações web carreguem de forma rápida e eficiente.
Implementação de Métricas Precisas
O primeiro passo é estabelecer métricas. O processo de carregamento envolve várias etapas, e medir os segmentos corretos é essencial para identificar gargalos.
Os marcos mais relevantes no processo de carregamento são:
Medições | Diagrama criado em Terrastruct
É essencial monitorar as métricas de cada segmento deste diagrama.
Vamos explorar como realizar esse monitoramento.
Tempo entre a solicitação do navegador e a resposta do servidor:
Esta métrica deve ser monitorada no servidor. Registre o momento em que a API recebe uma solicitação e o instante em que ela envia uma resposta. Se houver chamadas externas para bancos de dados, esse processo pode variar bastante em duração, podendo se tornar um gargalo.
Tempo entre a resposta do servidor e o recebimento da resposta no cliente:
Essa métrica é mais complexa de medir. Uma solução é adicionar um timestamp quando a resposta deixa o servidor e comparar com o tempo no lado do usuário, medido o mais cedo possível (usando uma tag de script no cabeçalho da página HTML).
Tempo entre o recebimento da resposta e a primeira exibição de conteúdo:
A primeira exibição de conteúdo ocorre quando o primeiro elemento é renderizado no DOM. Pode ser um texto simples, uma cor de fundo ou um indicador de carregamento. O Lighthouse, disponível nas ferramentas de desenvolvimento do Chrome, é uma ferramenta útil para medir isso.
Tempo entre a primeira exibição e a maior exibição de conteúdo:
A maior exibição de conteúdo se refere ao momento em que o maior elemento é renderizado na viewport do usuário. Isso geralmente marca o fim da renderização da página e o usuário visualiza uma tela completa. O Lighthouse também é usado para medir isso.
Tempo entre a maior exibição de conteúdo e o tempo para interatividade:
O tempo para interatividade é o momento em que o usuário pode realizar ações como scroll, cliques e digitação. Se este tempo for longo, pode ser frustrante para o usuário, que visualiza a tela mas não pode interagir com ela. O Lighthouse também auxilia na medição dessa métrica.
Redução do Código
Com métricas estabelecidas, otimizações podem ser feitas. As otimizações geralmente envolvem compromissos, e as métricas indicam quais são válidas.
A página mais rápida é uma página em branco, mas uma quantidade significativa de código pode ser adicionada a uma aplicação antes que se note uma diferença na velocidade em relação a uma página em branco. Geralmente, os incrementos são tão pequenos que a diferença não é notada até que a lentidão se torne evidente. Quando o aplicativo se torna “inchado”, a redução do código é fundamental.
Reduzir o código resulta em duas melhorias de velocidade:
- O aplicativo é transferido pela rede mais rapidamente.
- O navegador analisa o código mais rapidamente.
A primeira aceleração é mínima. A compactação das solicitações na rede faz com que a redução de 1MB no código-fonte resulte em uma economia de apenas cerca de 10KB na largura de banda. No entanto, a aceleração na análise de menos código é substancial. Seus usuários acessam seu aplicativo em diferentes navegadores e computadores, muitos com menos capacidade de processamento. Em dispositivos móveis, essa diferença pode ser ainda mais evidente, resultando em segundos de atraso.
Portanto, quanto menos código, mais rápida é a análise do navegador e a execução do aplicativo. Mesmo que uma tela de carregamento controlada por Javascript seja utilizada, ela é precedida pela análise do código.
O objetivo não é remover funcionalidades ou excluir o código necessário. Felizmente, existem práticas para reduzir o código sem ter que fazer isso.
- Utilize minificadores de código. Eles otimizam o código ao encurtar nomes longos (como “signUpDarkModeButton” para “ss”), remover espaços e realizar outras compactações sem perda de funcionalidade.
- Importe apenas parciais de bibliotecas. Geralmente, as bibliotecas vêm com muitos recursos não utilizados. Se uma função específica é necessária, ela deve ser importada separadamente, em vez de toda a biblioteca.
- Remova código morto. Código usado para depuração ou recursos obsoletos podem estar presentes no código-fonte, mesmo sem serem utilizados. Ferramentas como Webpack podem detectar e remover automaticamente esse código não utilizado na compilação de produção.
Divisão do Código
Após reduzir o código geral, o próximo passo é otimizar o código necessário para o carregamento inicial.
Se 20% do seu código for usado em funcionalidades acessíveis apenas após alguns cliques, não é necessário que o navegador analise esse código no carregamento inicial. A divisão do código pode reduzir o tempo de interatividade.
Em vez de um gráfico de dependências complexo, identifique áreas que podem ser facilmente separadas. Um componente que usa bibliotecas pesadas pode ser isolado e importado apenas quando o usuário interage com ele.
Há bibliotecas disponíveis para adiar o carregamento, dependendo do framework utilizado. Evite exagerar na divisão, pois o usuário terá um carregamento inicial rápido, mas precisará aguardar em cada interação. Divida as maiores partes do código que podem ser isoladas.
Renderização no Lado do Servidor
Como a análise e compilação de código podem ser pesadas para navegadores, principalmente em dispositivos com menos poder de processamento, a renderização no lado do servidor é uma técnica eficaz. Isso significa que, em vez de enviar uma página em branco e usar Javascript para preencher o conteúdo, um mecanismo Javascript no servidor (como Node.js) pode preencher o máximo de dados e conteúdo possível.
Servidores são mais rápidos e previsíveis que navegadores. Mesmo sendo necessário analisar código Javascript para a interatividade, a renderização no lado do servidor pode preencher grande parte do conteúdo inicial, exibindo pelo menos uma tela de carregamento ou barra de progresso quando o usuário acessa a página.
Além disso, dados necessários para a visualização inicial já são entregues juntamente com a aplicação, evitando requisições adicionais.
Compressão de Ativos
Ativos como imagens e ícones são essenciais para uma página visualmente completa. Uma página não é considerada totalmente carregada até que esses ativos sejam renderizados. Eles podem inclusive causar alterações no layout, resultando em comportamentos inesperados para o usuário.
Ativos também costumam ser os elementos mais pesados em um aplicativo. Uma imagem pode ter vários megabytes, e o carregamento de muitos ícones pode sobrecarregar a capacidade de requisições simultâneas do navegador, causando atrasos significativos.
Imagens devem ser redimensionadas para o tamanho de exibição. Se um perfil de usuário é exibido em um elemento de 50×50 pixels, uma imagem de alta resolução não deve ser baixada e redimensionada no navegador. Isso aumenta o tempo de carregamento.
Além disso, imagens podem ser compactadas dependendo do formato. O WebM é um formato moderno, mas a compressão na web está sempre evoluindo. Como alguns navegadores podem não suportar os formatos mais novos, utilize elementos de imagem e vídeo que suportam formatos alternativos.
Comprima para o formato mais moderno e eficaz, mas sempre mantenha uma versão alternativa para navegadores que não o suportam.
Conclusão
Estas são cinco técnicas essenciais para garantir um carregamento inicial rápido do seu aplicativo. Isso melhora as taxas de conversão, a satisfação do usuário e até mesmo o SEO, que recompensa tempos de carregamento mais rápidos. No Terrastruct, utilizamos estas e outras técnicas para que os usuários possam criar e visualizar diagramas de forma rápida e eficiente.