5 maneiras mais eficazes de diminuir o tempo de carregamento do site

A rapidez com que seu site ou aplicativo carrega inicialmente é a primeira impressão que seus usuários recebem. Neste guia, listaremos técnicas comprovadas para reduzir segundos valiosos do carregamento inicial da página.

Tempo de carregamento inicial

O tempo que leva desde o momento em que seu usuário ou cliente insere o nome de domínio do seu site até quando ele vê o conteúdo são os segundos mais importantes que você tem para causar uma boa primeira impressão.

A Amazon descobriu que cada 100 milissegundos de latência custava 1% em vendas.

E, no entanto, muitos desenvolvedores da Web tratam isso como uma reflexão tardia. Mais e mais bibliotecas são adicionadas para mais e mais recursos e, gradualmente, ao longo do tempo, elas começam a ver menos conversões. Pior ainda, essas perdas na conversão são difíceis de detectar porque abandonam uma página de carregamento lento antes que ela tenha tempo de enviar qualquer métrica.

Algumas delas são técnicas que podem ser implementadas no front-end e outras no back-end. Independentemente disso, os aplicativos da Web devem ser carregados rapidamente.

Adicione as medidas certas

A primeira coisa que você precisa fazer é adicionar medidas. Existem muitas etapas no processo de carregamento e você não saberá onde está o gargalo sem medir os segmentos certos.

A seguir estão os marcos mais importantes do processo de carregamento:

O que isso significa é que você deve acompanhar as métricas para cada segmento deste diagrama.

Vamos ver como você pode fazer isso.

Solicitação do navegador para resposta atendida:

Meça isso em seu servidor. Você deseja obter o momento em que sua API recebe a solicitação quando ela fornece uma resposta. Dependendo se são feitas chamadas externas para, por exemplo, bancos de dados, isso pode ser muito curto ou um gargalo significativo.

Resposta entregue à resposta recebida:

Isso é mais difícil de medir, mas uma maneira de fazer isso é adicionar um carimbo de data/hora quando sua resposta deixar seu servidor e medir isso com a hora atual do lado do usuário no primeiro momento possível (uma tag de script no cabeçalho do HTML página).

Resposta recebida à primeira pintura com conteúdo:

A primeira pintura de conteúdo refere-se a quando o primeiro elemento é renderizado no DOM. Isso pode ser algo tão simples quanto algum texto, plano de fundo ou um spinner de carregamento. Isso pode ser medido executando o Lighthouse nas ferramentas de desenvolvimento do Chrome.

Primeira pintura com conteúdo para a maior pintura com conteúdo:

A maior pintura de conteúdo refere-se a quando o maior elemento é renderizado na janela de visualização do navegador do usuário. Isso normalmente sinaliza o fim da parte de “renderização” do carregamento da página e o usuário vê uma tela preenchida. Isso também é medido executando o Lighthouse.

Maior pintura de conteúdo ao tempo para interativo:

Por fim, o tempo para interativo refere-se a quando o usuário pode executar ações como rolar, clicar e digitar. Pode ser especialmente frustrante se essa duração for longa, porque eles verão uma tela renderizada na frente deles, mas não poderão fazer nada quando esperam que possam! Essa é outra métrica que o Lighthouse nos ajuda a medir.

Reduzir código

Agora que você tem medidas, pode começar a fazer otimizações. As otimizações têm compensações, e as medições dirão quais valem a pena.

A página mais rápida para carregar é uma página em branco, mas muito código pode ser adicionado a um aplicativo antes que alguém perceba a diferença na velocidade de carregamento entre ele e uma página em branco. O que geralmente acontece é que os incrementos são tão pequenos que você não percebe a diferença de construção para construção até que um dia, ela começa a parecer lenta. Você percebe que seu aplicativo está inchado e é nesse ponto que a redução do código fará a diferença.

Você obtém duas melhorias na velocidade ao reduzir o código:

• Seu aplicativo é transferido pela rede mais rapidamente.
• O navegador do usuário termina de analisar o código mais rapidamente.

A primeira aceleração é pequena; como as solicitações são compactadas pela rede, se você cortar 1 MB de código-fonte, isso pode significar apenas 10 KB de economia na largura de banda. No entanto, a aceleração de analisar menos é significativo. Seus usuários provavelmente estão executando seu aplicativo em todo um espectro de navegadores e computadores, muitos dos quais não têm o poder de computação que pode analisar o código tão rapidamente quanto em seu próprio país.

Ou eles podem ser executados em dispositivos móveis, com ainda menos poder de computação. A diferença pode estar na magnitude de segundos.

Portanto, quanto menos código você tiver, mais rápido o navegador poderá concluir a análise e começar a executar seu aplicativo. Mesmo se você quiser mostrar uma tela de carregamento que o Javascript controla, ela é precedida pela análise desse código.

Mas você não quer cortar recursos ou realmente excluir código. Felizmente, existem algumas práticas padrão para reduzir o código sem ter que fazer isso.

• Execute seu código por meio de minifiers. Os minificadores realizam otimizações como encurtar nomes longos em nomes curtos (signUpDarkModeButton se torna ss), remover caracteres de espaço em branco e outros para deixar seu código o mais compacto possível sem perder nada.
• Importar parciais. As bibliotecas geralmente estão cheias de coisas que você não precisa, mas vêm embaladas em um pacote guarda-chuva. Talvez você queira apenas uma função específica de uma biblioteca de utilitários, então ao invés de importar a biblioteca inteira, você pode importar apenas o código que você precisa.
• Código morto de trepidação de árvore. Às vezes, você deixa o código para fins de depuração ou não limpa completamente um recurso obsoleto e, embora esteja em seu código-fonte, nunca é executado. Existem ferramentas na cadeia de ferramentas JavaScript, como o Webpack, que podem detectar código morto ou dependências não utilizadas e removê-los da compilação de produção automaticamente para você.

Dividir o código em pedaços

Depois de reduzir o máximo de código possível do seu aplicativo geral, você pode pensar em espremer ainda mais essa ideia e reduzir o código necessário para a carga inicial.

Digamos que 20% do seu código está alimentando algum recurso do seu aplicativo que os usuários só podem acessar após alguns cliques. Seria uma perda de tempo para o navegador analisar esse código antes de mostrar uma tela de carregamento. Dividir seu código em partes pode reduzir significativamente o tempo de interação.

Em vez de ter um gráfico de dependências entrelaçado de importações para todos os seus arquivos Javascript, identifique as áreas que são facilmente cortadas. Por exemplo, talvez um componente carregue algumas bibliotecas pesadas. Você pode isolar esse componente em seu próprio arquivo e importar somente quando o usuário estiver pronto para interagir com esse componente.

Existem várias bibliotecas para adiar o carregamento, dependendo de qual estrutura você está usando. Não há necessidade de exagerar com isso e dividir todos os componentes porque o usuário tem uma carga inicial rápida e tem que esperar em cada interação subsequente. Encontre as maiores partes que você pode segmentar e divida seu código-fonte lá.

Renderização do lado do servidor

Dado que os navegadores precisam fazer toda essa análise e compilação intensiva e ter usuários em Chromebooks e dispositivos móveis, uma técnica comum para reduzir o tempo de carregamento é fazer com que seus servidores recebam parte dessa carga. O que isso significa é que, em vez de fornecer uma página em branco e usar Javascript para preencher todo o conteúdo, como a maioria dos aplicativos de página única atualmente, você pode executar um mecanismo Javascript em seu servidor (geralmente Node.js) e preencher o máximo de dados e conteúdo que puder.

Seus servidores serão muito mais rápidos e previsíveis que os navegadores dos usuários. Inevitavelmente, eles ainda precisarão analisar algum código Javascript para que o aplicativo seja interativo. Ainda assim, a renderização do lado do servidor pode preencher grande parte do conteúdo inicial para que, quando o usuário acessar a página, ela já esteja mostrando uma tela de carregamento ou barra de progresso no mínimo.

E se os dados forem necessários para a visualização inicial, o cliente não precisará fazer uma solicitação separada para obtê-los; ele já estará hidratado no app para o cliente usar.

Comprimir ativos

Os ativos dão vida a uma página, e uma página não parece completamente carregada até que esses ativos terminem de renderizar. Este pode ser seu plano de fundo, ícones da interface do usuário, uma foto de perfil do usuário, até mesmo o botão giratório de carregamento. Muitas vezes, os ativos também podem mudar o layout, portanto, se um usuário começar a tentar interagir com algo, a página poderá continuar pulando enquanto os ativos estão sendo carregados. Às vezes, esses ativos são a maior pintura de conteúdo.

Mas os ativos também são uma das partes mais pesadas de um aplicativo. Uma imagem pode chegar a vários megabytes, e carregar muitos ícones pode facilmente exceder o limite máximo de solicitações de rede simultâneas do navegador, causando uma fila de carregamento impressionante.

Você quase nunca quer baixar uma imagem da internet e depois referenciá-la em seu aplicativo. As imagens devem ser redimensionadas para as menores dimensões possíveis em que serão exibidas. Se você tiver um perfil de usuário exibido em um elemento minúsculo de 50 pixels por 50 pixels, sem redimensionar, seu aplicativo levará um tempo para baixar a imagem completa que parece nítida como papel de parede da área de trabalho e, em seguida, redimensioná-la para o tamanho minúsculo.

Em segundo lugar, as imagens podem ser compactadas dependendo do formato. Atualmente, o webm é o formato preferido, mas o campo de compactação na web está sendo constantemente aprimorado e muitos novos formatos estão no horizonte. Devido à natureza mutável dos formatos, alguns navegadores podem não suportar os mais recentes! Felizmente, a tecnologia do navegador pode permitir que o navegador do usuário carregue qualquer formato que eles suportem.

Portanto, comprima para o formato mais recente e melhor, mas também mantenha uma versão menos moderna e use elementos de imagem e vídeo que suportem formatos de retorno.

Conclusão

Estas são cinco das técnicas mais eficazes para dar a seus usuários um primeiro carregamento rápido em seu aplicativo. Isso melhorará suas taxas de conversão, felicidade do usuário e até classificações de pesquisa, pois o SEO recompensa os tempos de carregamento rápidos. Na Terrastruct, empregamos essas técnicas e muito mais para que os usuários possam criar e visualizar os diagramas que você vê neste artigo o mais rápido possível.