Como criar uma interface criada para velocidade
O seu site está lento? Seja honesto. Poderia ser mais rápido? Os usuários exigem sites que carregam rapidamente e continuam a fornecer conteúdo sem atrasos. Se o seu site ficar um pouco atrás em atender a essa demanda, os usuários poderão abandoná-lo (e nunca voltarão).
Hoje, vamos procurar maneiras de garantir que a interface do seu site seja desenvolvida para acelerar, para que você nunca precise se preocupar com o tempo de carregamento da página novamente.
Explore o Envato Elements
Teste seu site
Antes de parar em "não há como meu site ficar lento", teste-o. O Google possui uma ótima ferramenta que qualquer pessoa pode usar para testar qualquer site digitando o URL.
Você recebe um relatório bacana que informa com que rapidez o site está se movendo e onde ele pode ser melhorado. É uma boa ideia executar o teste periodicamente para garantir que tudo esteja funcionando sem problemas. (Além disso, reduz o desempenho em dispositivos móveis e de desktop e oferece sugestões de aprimoramento.)
O relatório faz três recomendações - deve corrigir, considerar a correção e a aprovação - para os seguintes itens:
- Cache do navegador
- Otimização de imagem
- Resposta do servidor
- Scripts e CSS acima da dobra
- Compressão
- Redirecionamentos
- Minificação de CSS, HTML e JavaScript
- Priorização de conteúdo visível
Despejar plugins desnecessários
Você está segurando plugins ou complementos que você simplesmente não usa? É hora de despejá-los.
Mesmo os elementos que não estão em uso estão diminuindo a velocidade do seu site. (Isso é especialmente verdade se você estiver trabalhando em um sistema como o WordPress.)
Entre no modo de limpeza e remova todos os plugins não utilizados. Você também deve pensar em plugins em uso e verificar se os está realmente usando ou se eles contribuem para a experiência geral do usuário, se não encontrar uma opção melhor.
Além do número de plugins, a qualidade também é uma preocupação. Não basta adicionar qualquer plug-in antigo ao seu site. Tente encontrar elementos que forneçam valor real e tenham uma classificação alta. Elementos antigos desatualizados também podem arrastar seu site para baixo.
Compartilhar somente conforme necessário
Enquanto pensamos em plugins, quantos botões de compartilhamento de mídia social você possui em seu site? Agora responda honestamente: quantas você realmente precisa?
Muitos desses botões podem ser confusos para os usuários - quantos realmente serão compartilhados em várias plataformas - e diminuir a velocidade e o tempo de carregamento. Isso é particularmente verdadeiro para aqueles que estão tentando descobrir quantas curtidas ou compartilha uma postagem já tem com consultas em ambas as direções.
Escolha uma ou duas redes em que você está ativo e em que os usuários se conectam regularmente ao seu site e incluem esses botões. Abandone o resto. Eles estão apenas atrapalhando.
Desconfie da sobrecarga de imagem
Vídeo, ilustrações, fotos e animações… oh, que coisa! Todos esses excelentes elementos visuais podem aumentar os tempos de carregamento. Escolha sabiamente.
Antes de adicionar qualquer visual ao design do seu site, avalie seu valor em relação a outros elementos. Fornece algo para os usuários? Se sim, prossiga. Caso contrário, por que você está usando esse elemento de design?
Você deve otimizar todas as imagens adequadamente para a web. Como regra geral, as imagens devem ter apenas o tamanho necessário. Não exagere e faça upload de fotos em tamanho real. É preciso um pouco de trabalho no front-end, mas você ficará satisfeito por fazer isso mais tarde (principalmente se o site continuar a crescer).
Tire proveito de outros truques também. Tente fontes de ícone em vez de ícones baseados em imagem. Converta elementos em SVG (formato vetorial em escala) se uma fonte de ícone não funcionar. Use o máximo de “mágica” em HTML e CSS possível e não atolar o site com elementos que estão sendo carregados como fotos, como botões, setas e outras ferramentas da interface do usuário.
Retire a carga com ferramentas de encolhimento
Arquivos pequenos são a chave para a velocidade máxima. O equilíbrio está na ideia de que os displays de alta resolução permitem que você compartilhe e mostre conteúdo com qualidade superior. É aí que as ferramentas de encolhimento entram.
Se você não se sentir confiante em sua capacidade de dimensionar e encolher - ou simplesmente não estiver obtendo o resultado desejado - tente uma dessas opções para reduzir os arquivos aos menores tamanhos utilizáveis.
- WP Smush reduz imagens para usuários do WordPress
- Kraken comprime imagens para todos os usuários
- TinyPNG reduz ainda mais o tamanho do formato comum
- Gzip empacota arquivos para uma compressão ideal
- Minimize seu CSS reduz o tamanho geral do código e inclui uma API
- SpriteMe transforma imagens de plano de fundo em um sprite CSS para salvar solicitações HTTP
- O Compressor CSS reduz o tamanho geral do código
Apenas coloque em cache
Ative o cache no seu site.
Se você não está fazendo isso, seus usuários estão pagando o preço. Ainda existem algumas pessoas por aí que podem argumentar o contrário, mas o valor para os usuários supera esses argumentos. Seu site precisa ser rápido.
Um cache cria um arquivo temporário a partir de páginas para que o navegador "lembre" o site quando um usuário retornar. Reduz o uso da largura de banda, a carga do servidor e o tempo de atraso (real ou percebido). Os usuários agradecem, principalmente quando se trata de acessar sites mais massivos.
Limpe-o regularmente
Assim como você precisa limpar sua casa regularmente, você precisa limpar e manter o banco de dados, links e arquivos do site.
Estes são os itens da lista de verificação de limpeza do seu site:
- Otimize seu banco de dados. Com o tempo, seu banco de dados pode ficar entupido com revisões, fotos fora de uso e dados salvos. Você não precisa manter tudo. Limpe os elementos que não fazem mais parte do plano do seu site.
- Não vincule imagens. Puxar imagens do site (e servidor) de outra pessoa para o seu é apenas uma má idéia. E é lento. O mesmo acontece com quase qualquer outra solicitação de arquivo externo. Use-os somente quando necessário.
- Corrigir links. Links quebrados podem não tornar o site mais lento, mas diminuem a velocidade da conexão que os usuários fazem do site para outros lugares, o que pode ser igualmente ruim. Adquira o hábito de verificar e corrigir links quebrados.
- Mantenha tudo atualizado. Se você estiver executando em uma plataforma como o WordPress, faça as atualizações. Se você estiver usando um tema ou elementos de caixa de qualquer tipo, o mesmo será verdadeiro. As atualizações podem conter patches que contribuem para a velocidade, além de manter seu site protegido contra possíveis ameaças. (E nada é mais lento que um site que foi invadido ou infectado por malware.)
Conclusão
Agora, trabalhe na lista acima e volte para a ferramenta Pagespeed Insights do Google. Execute-o novamente. Você percebe alguma diferença?
Nada tornará um usuário mais feliz e mais propenso a retornar ao seu site do que uma experiência excelente e rápida. Durante todas as fases do design visual, lembre-se de pensar também no design da interface, para que seu site seja desenvolvido para acelerar.
