Não deixe seus usuários carregarem todo o peso de uma vez
Pense naquele site que te deixa com raiva; demora séculos para começar a carregar, pesado, e não importa o quão rápida seja sua internet ou seu computador/celular, você ainda se sente navegando nos anos 2000 (nem vou comparar com década de 90, pois ainda lembro o som de conectar usando internet discada).
Espero muito que não tenha passado em sua mente algum site que tenha trabalhado (muito menos que trabalhe atualmente). Todos já sentimos que o browser parece estar carregando uma tonelada de coisas inúteis, enquanto você apenas quer ver um conteúdo sem precisar esperar.
Mas qual é o motivo de precisarmos carregar todo o conteúdo do site sem necessidade?
Imagine uma modal de login. Se o site possui opção de login, provavelmente é uma feature muito utilizada, correto? Possivelmente seja realmente verdade. No entanto, a não ser que o usuário já tente acessar diretamente uma página logada, a modal de login somente será necessária após uma ação do usuário.
Destaco essa frase, pois ela representou uma mudança na maneira como eu passei a ver o carregamento dos conteúdos. Se eu somente irei exibir a modal de login após a intenção do usuário, qual é a necessidade desse mesmo usuário receber todo o html, css e, principalmente, js necessário para realizar o login se ele ainda não teve a intenção de efetuar login?
Importação Dinâmica
É possível carregar bibliotecas de forma dinâmica, sob demanda. Isso pode ser útil para carregar bibliotecas com uso muito específico, como conversar com um chatbot ao clicar em um popup no canto da tela.
Para importar, basta criar um método assíncrono e adicionar um await no import da biblioteca, ao invés de carregar de forma estática no topo da página. Ao chamar a função, a biblioteca será carregada, economizando preciosos bytes de usuários que não executem essa ação.
Imports dinâmicos funcionam bem quando necessita de uma ação específica e não usual de usuários. Também pode ser usada para postergar o carregamento de alguns conteúdos, aguardando o load do documento ou mesmo usando setTimeout (talvez uma melhor prática seria aguardar o idle time, quando o browser não está processando mais nada). Por mais que pareça gambiarra, se usado da maneira correta, pode acelerar o carregamento de conteúdos mais importantes do site, postergando o carregamento de partes complementares.
Importância de um site carregar rápido
Fonte: https://www.section.io/blog/page-load-time-bounce-rate/
Referências
Photo by Alora Griffiths on Unsplash
Photo by Jesper Aggergaard on Unsplash
Photo by Luis Reyes on Unsplash
Photo by VD Photography on Unsplash
