7 dicas para acelerar seu site hoje
Todo mundo adora uma animação animada, certo? Mas se esse divot durar mais de um segundo ou dois, apenas chamará a atenção para o fato de o site estar carregando lentamente. E isso é um assassino de sites.
Os usuários esperam que os sites sejam carregados com rapidez e eficiência. É seu trabalho garantir que o design não seja apenas visualmente agradável, mas também 100% funcional. Se seu site estiver arrastando um pouco, você pode parar de se preocupar agora, porque temos sete dicas para ajudá-lo a acelerar seu site com pequenos ajustes no design. (Visite cada um dos sites exibidos na postagem; eles ficam ótimos e carregam muito rápido.)
Explore o Envato Elements
1. Tome cuidado com animações
A animação no design de sites é uma das tendências de "it" de 2015. Não fique para trás criando arquivos enormes que simplesmente não carregam. Comece com pequenos toques animados quando começar a trabalhar com esse tipo de efeito e vá para animações maiores depois de ter uma boa idéia de como elas funcionam e funcionam com a estrutura geral do site.
A chave das animações não é carregar um monte de arquivos de vídeo no seu site. Quanto menor a animação, mais fácil é criar algo com uma pequena área ocupada. Então, por onde você começa?
Faça algo simples e divertido, como criar um estado de foco dinâmico. Ter um botão para mudar de cor ou expandir é um efeito bacana que o ajudará a dominar o CSS e terá uma boa ideia da animação básica antes de passar para elementos maiores. Você também pode considerar animações de carregamento de AJAX ou paralaxe. O interessante de qualquer uma dessas opções é que você oferece tempo para carregar elementos sem que o usuário perceba. Como os elementos são carregados à medida que os usuários rolam, você ganha alguns segundos preciosos para preparar tudo.
2. Otimizar imagens
Com o número de telas HD e retina disponíveis para os usuários, você pode ser tentado a carregar todas as suas imagens em tamanho real em alta resolução quando estiver criando seu site. Não caia nessa armadilha. A maioria dessas imagens provavelmente é muito grande para o seu site manipular com eficiência.
Conheça seus tipos de arquivo. Os formatos de arquivo mais comuns para imagens na web são JPG, PNG, GIF e SVG.
- JPG: mais adequado para fotos, os arquivos JPG podem variar em tamanho, de pequeno a grande. Ao salvar arquivos JPG para uso do site, salve um arquivo otimizado. (No Adobe Photoshop, você pode otimizar imagens para a Web usando as configurações de exportação em Arquivo> Exportar> Exportar como.)
- PNG: use este formato de arquivo para imagens que incluem texto, para que as letras sejam renderizadas corretamente. Normalmente, esse é um arquivo pequeno.
- GIF: o formato de arquivo preferido para elementos animados menores, como a sempre popular imagem animada em estilo de meme. Mas cuidado, esse formato de arquivo pode ficar pesado se você não tomar cuidado.
- SVG: se você precisar de uma imagem vetorial para a Web, esta é a melhor opção. Pode ser usado para qualquer coisa, de ícones a logotipos.
3. Use o código sempre que possível
Você pode ficar tentado a criar um monte de ícones e imagens bacanas para o seu site e carregar cada um deles como um elemento individual. Isso pode causar alguns problemas. Em vez disso, use o código para chamar esses elementos sempre que possível.
Use CSS para carregar imagens de fundo também. Isso "forçará" seu site a carregar todo o resto à frente do plano de fundo, para que os usuários possam começar a ver outros elementos e textos no site imediatamente. O W3Schools tem um ótimo e simples tutorial de como fazer isso.
Existem muitas ferramentas, como ícones do Font Awesome e muitas outras bibliotecas CSS e JavaScript que você pode usar para criar ótimos elementos com efeitos divertidos que são leves. (O CSS Design Awards tem uma coleção especialmente agradável de 30 botões e elementos de formulário para experimentar.)
4. Mantenha os vídeos curtos
Outro elemento moderno de design da web é o uso de vídeo em tela cheia na sua página inicial. Isso pode ser outra armadilha de tempo de carregamento. Você se sentirá preso entre a qualidade, o conteúdo e a velocidade do vídeo e terá que fazer um sacrifício em algum lugar.
Os melhores vídeos são super curtos - apenas alguns segundos - e repetem para que a ação não pare. Você não precisa incluir som ou outros efeitos.
Você pode tentar alguns outros truques para reduzir o tamanho do arquivo o máximo possível.
- Pense em uma sobreposição de cores ou desfoque em um vídeo de resolução mais baixa. Ainda pode parecer limpo, mas não exige tanta largura de banda.
- Considere um vídeo com tamanho menor que a tela cheia.
- Abandone a reprodução automática, o que pode "induzir" os usuários a pensar que seu site está carregando mais rápido do que é.
- Não fique preso a vídeos longos. Se você deseja exibir vários videoclipes, considere um elemento de controle deslizante ou altere manualmente os vídeos em uma programação para que os usuários vejam algo novo sempre que visitarem o site. (Não importa o quão bom seja o seu clipe, poucos usuários assistirão por mais de alguns segundos; portanto, não sacrifique o tempo de carregamento por clipes mais longos.)
5. Pense sobre o tema
Se você estiver usando o WordPress ou outro sistema de gerenciamento de conteúdo com um tema, lembre-se de que nem todos os temas são criados da mesma forma. Embora você provavelmente tenha mais sorte com uma opção premium - algumas das quais permitem "desativar" elementos não utilizados - dê uma olhada no código e construa para garantir que não seja isso que está atrapalhando o site.
6. Assista seus plugins
Você tem vários plugins ou aplicativos de terceiros vinculados ao seu site? Você está usando ativamente todos eles? Certifique-se de desativar os plugins não utilizados para otimizar a eficiência.
Os usuários do WordPress podem aproveitar o Plugin Performance Profiler para ver quais plugins estão ativos e como estão funcionando. Isso pode ajudá-lo a solucionar problemas e identificar problemas e remover ou reconfigurar esses plug-ins. (Uma área de problema comum é geralmente plug-ins de compartilhamento social.)
7. Comprimir, Comprimir, Comprimir
Não apenas os componentes individuais do seu site devem ser compactados, mas você também pode compactar o site como um todo para ajudar a mantê-lo funcionando rapidamente. Entre os elementos que podem ser compactados estão os arquivos CSS e JavaScript, imagens e vídeo (redimensionando) e o site, por enquanto, usando uma ferramenta como o GZIP.
Arquivos minificados são a melhor rota para plugins e criação de arquivos menores. Você também deseja verificar como o código foi projetado no site. Para velocidade máxima, todo o JavaScript deve estar contido em um arquivo e todo o CSS deve estar contido em outro arquivo. (Outra observação: onde você coloca esse código também conta. Vincule CSS na parte superior da página e JavaScript na parte inferior para aumentar também a velocidade do site.)
Conclusão
Seu site está carregando com rapidez suficiente? Caso contrário, é hora de ajustá-lo para obter os melhores tempos de carregamento. (Se você precisar pensar sobre essa questão, provavelmente o seu site não é rápido o suficiente.)
Os sites precisam ser rápidos para que os usuários possam interagir imediatamente. Quanto mais tempo a página carregar, independentemente do dispositivo, maior a probabilidade de os usuários abandonarem o site por completo. Portanto, dedique alguns minutos hoje ou nesta semana e analise esta lista para garantir que seu site esteja funcionando no nível ideal.
Fonte da imagem: Mohammed Al-Sultan .
