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 economizar segundos valiosos do carregamento inicial da página.
últimas postagens
Tempo de carregamento inicial
O tempo que leva desde o momento em que o usuário ou cliente insere o nome de domínio do site até a visualização do 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% nas 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, com o 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:
Medições | Diagrama criado em Terrastruct
Isso significa que você deve acompanhar as métricas de cada segmento desse diagrama.
Vamos ver como você pode fazer isso.
Solicitação do navegador para resposta servida:
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 servida à resposta recebida:
Isso é mais difícil de medir, mas uma maneira de fazer isso é adicionar um carimbo de data/hora quando sua resposta sair do 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 para a primeira pintura de 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 botão giratório de carregamento. Isso pode ser medido executando o Lighthouse nas ferramentas de desenvolvimento do Chrome.
Primeira pintura de conteúdo para a maior pintura de 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 a interação 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 à sua frente, 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 medições, 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 minúsculos que você não percebe a diferença de compilação para compilação até que um dia comece a parecer lento. Você percebe que seu aplicativo está inchado e é nesse ponto que reduzir o 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 na 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 é significativa. Seus usuários provavelmente estão executando seu aplicativo em um amplo 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 você mesmo.
Ou 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 executar seu aplicativo. Mesmo que você queira mostrar uma tela de carregamento controlada por Javascript, ela é precedida pela análise desse código.
Mas você não deseja cortar recursos ou realmente excluir o 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 minificadores. Os minificadores executam otimizações como encurtar nomes longos para nomes curtos (signUpDarkModeButton torna-se ss), remover caracteres de espaço em branco e outros para obter seu código o mais compacto possível sem perder nada.
- Parciais de importação. 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, portanto, em vez de importar a biblioteca inteira, você pode importar apenas o código necessário.
- Código morto de sacudir a árvore. Às vezes, você deixa o código para fins de depuração ou não limpou completamente um recurso obsoleto e, embora esteja em seu código-fonte, nunca é executado. Existem ferramentas na cadeia de ferramentas do 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ê.
Divida o código em pedaços
Depois de reduzir o máximo de código possível de seu aplicativo geral, você pode pensar em espremer ainda mais essa ideia e reduzir o código necessário para o carregamento inicial.
Digamos que 20% do seu código esteja alimentando algum recurso do seu aplicativo que os usuários só podem acessar após alguns cliques. Seria 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ência 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 apenas quando o usuário estiver pronto para interagir com esse componente.
Existem várias bibliotecas disponíveis para adiar o carregamento, dependendo de qual framework você está usando. Não há necessidade de exagerar e dividir todos os componentes, porque o usuário terá um carregamento inicial rápido e terá que aguardar 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
Como os navegadores precisam fazer toda essa análise e compilação intensivas 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 assumam 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 faz hoje em dia, você pode executar um mecanismo Javascript em seu servidor (geralmente Node.js) e preencher o máximo possível de dados e conteúdo.
Seus servidores serão muito mais rápidos e previsíveis do 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á mostre, no mínimo, uma tela de carregamento ou uma barra de progresso.
E se forem necessários dados para a visualização inicial, o cliente não precisa fazer uma solicitação separada para obtê-los; já vai hidratado na aplicação para a 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. Pode ser seu plano de fundo, ícones da interface do usuário, uma foto de perfil do usuário e até mesmo o botão giratório de carregamento. Freqüentemente, os ativos também podem mudar o layout, portanto, se um usuário começar a tentar interagir com algo, a página pode continuar a pular 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 o carregamento de muitos ícones pode facilmente exceder o limite máximo de solicitação de rede simultânea do navegador, causando uma fila impressionante de carregamento.
Você quase nunca deseja 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 pequeno elemento de 50 pixels por 50 pixels, sem redimensionar, seu aplicativo terá 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 de seu formato. Hoje em dia, webm é o formato preferido, mas o campo de compressão na web está sendo constantemente aprimorado e muitos novos formatos estão por vir. Devido à natureza mutável dos formatos, alguns navegadores podem não suportar os mais novos! Felizmente, a tecnologia do navegador pode permitir que o navegador do usuário carregue qualquer formato compatível.
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 alternativos.
Conclusão
Estas são cinco das técnicas mais eficazes para dar aos seus usuários um primeiro carregamento extremamente rápido em seu aplicativo. Isso melhorará suas taxas de conversão, felicidade do usuário e até mesmo classificações de pesquisa, pois o SEO recompensa tempos de carregamento rápidos. No Terrastructempregamos 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.