Estava lendo um artigo outro dia em que comentavam a respeito de uma pesquisa que fizeram e descobriram que você precisa ganhar a atenção do visitante em menos de 1 segundo. Passou disso, o visitante pode começar ficar entediado e pensar em outras coisas e acabar saindo do site.
Um fator que indica que você deve fazer o máximo possível para seu site abrir mais rápido é a internet no smartphone que é muito ruim, principalmente se comparar com banda larga de casa. Além disso as operadoras estão aproveitando para tirar vantagem e limitando tudo com pacotes de dados que mal conseguem abrir um site. E as pessoas estão cada vez mais usando smartphones e tablets para acessar a internet.
Então o que pode ser feito para melhor o desempenho do site?
Otimize suas imagens
Parece que estou sempre repetindo a mesma fala, mas isso é uma das coisas que mais pesa em um site. As imagens.
Se você vai inserir fotos em um post de um blog, saiba qual a largura do espaço do post para fazer upload de imagens com aquela largura. Não faça upload de imagens gigantes, a não ser que seja realmente necessário aquela imagem naquele tamanho.
Já peguei alguns trabalhos em que faziam upload de imagens com mais de 3 mil pixels de largura, e era tipo umas 10 em 1 post. Nem preciso comentar que a página demora mais que 10 segundos pra abrir, mesmo com internet decente.
Tire um tempinho antes de atualizar seu site ou blog pra redimensionar e otimizar suas imagens.
Se você tem Photoshop, um tutorial básico pra você:
- Abra a imagem no Photoshop
- Vá em Image / Image Size
- Coloque a largura que a foto terá (700 no meu exemplo), e a altura redimensionará proporcionalmente.
- Na resolução deixe 72. Estamos trabalhando com internet, não com impressão, então isso é o suficiente.
- Depois vá em File / Save As e altere a qualidade da imagem.
- Depois é só salvar.
Se você não tem Photoshop, no Google você encontra alguns sites online que faz isso, como o Image Optimizer, ou você pode usar o GIMP, um editor gratuito para baixar e usar no computador.
E hoje o Google tem recomendado usar o formato webp para imagens, que é mais leve. Você consegue converter as imagens de JPG para webp com o GIMP.
Para as imagens do layout, tudo o que for possível faça com CSS sprites.
1 imagem com 8 ícones pesa menos do que 8 imagens separadas.
CSS Sprites dificulta um pouco para qualquer pessoa atualizar ele, como por exemplo, o cliente resolver adicionar um ícone novo e achar que é só colocar uma imagem. Mas precisam entender que o desempenho do site é muito melhor feito dessa forma.
Dica: para ícones use fonte, fonte carrega mais rápido do que imagem, e não perde qualidade no mobile. Uma fonte que gosto bastante de usar é a fontawesome. Se você usar fonte pra fazer ícones, avise o programador qual fonte usou para que na hora de fazer o código ele possa usar ela no lugar de salvar a imagem do PSD.
Otimize o CSS
Se você tem 5 arquivos CSS carregando no início do código do site, coloque tudo em 1 único arquivo. E otimize ele.
Há programas específicos para isso, só procurar no Google.
Se você usa Sublime Text ou VS Code para programar, você encontra alguns extensões que faz isso pra você.
Se você não tiver um trabalho muito grande, com muitos arquivos, você pode fazer manualmente com alguns serviços online como o CSS Minifier e o CSS Compressor.
Quem usa WordPress e tem vários plugins instalados, pode ser um problema editar esses arquivos CSS, pois sempre que o plugin é atualizado, ele atualiza aquele arquivo. Então o recomendado é rever os plugins, se realmente precisa deles. Depois você pode criar uma função no arquivo functions.php do seu tema com o wp_dequeue_style para desativar o carregamento do CSS para o plugin (só funcionará se o plugin estiver usando o wp_enqueue_style), e depois colocar todo esse código CSS principal do tema.
Depois do CSS otimizado, será bem difícil editar ele se for preciso, então o ideal é você ter um CSS normal, para edição, e um CSS otimizado pra ser carregado no site.
Pode ser feito assim:
– faça o CSS normal e salve com o nome style.css
– copie todo o CSS e cole em um novo arquivo, salve com o nome style.min.css e otimize este.
– quando precisar editar o arquivo, edite o style.css e depois repita o processo para otimizar/salvar ele no style.min.css
Antes de fazer todo esse processo, revise seu CSS, veja se não alguma coisa que pode ser feito para reduzir ele. Código repetido é o que mais acontece.
Otimize o Javascript
Da mesma forma que otimizou o CSS, otimize os scripts que são carregados no site.
Se conseguir deixar tudo em 1 único arquivo é melhor, mas se não for possível ao menos coloque todos para abrir no fim do código, antes de </body>.
E mesmo que seja só 1 arquivo, faça este carregar no fim do código.
Eu costumo deixar o jquery carregando no início do código porque alguns outros scripts precisam que este carregue primeiro. E como meus trabalhos são para WordPress, o cliente pode instalar um plugin que carregue o script no head (infelizmente ainda tem plugin que faz isso). Mas todos os outros scripts que uso na programação vão para o fim do código.
Exemplos de javascript que podem ser carregados no fim do código:
- Rede social: Facebook, Twitter, Google+, Pinterest.. todos eles tem uma linha de código pra colocar onde quer que apareça o botão de compartilhar, e tem uma linha de código é que é o script que faz o botão funcionar. Esse script pode ser adicionado somente uma vez, no fim do código.
- Script principal do tema
- Slides – quase todos os slides usam scripts, estes podem ser carregados no fim do código
- Fancybox ou Lightbox (aquele script que faz a imagem abrir em uma janela bonitinha em cima da página)
- Scripts de validação de formulários
Da mesma forma que existem extensões para otimizar o CSS no editor VS Code e Sublime Text, também existe para otimizar javascript. E também é possível criar comandos no Dreamweaver para fazer isso.
Se preferir, o JavaScript Minifier também ajuda nisso.
Posts resumidos na página inicial, em blogs
Um tempo atrás eu ficava muito decepcionada em ver esses posts resumidos na página inicial, porque tinha que ficar clicando pra entrar no post e ler ele inteiro. Hoje penso um pouco diferente.
Alguns posts inteiros na página inicial são ótimos, mas outros que são muito grandes e tem muitas imagens, pode ser uma boa usar o continue lendo.
Uma boa ideia pra você que não quer abrir mão do post inteiro na página inicial, é deixar apenas o post mais recente abrindo totalmente e os outros resumidos.
Se você ainda não se convenceu, e insiste em deixar todos os posts inteiros na página inicial, o bom é reduzir a quantidade de posts por página. 5 posts por página carrega mais rápido do que 10. Mas se seus posts são realmente grandes, 3 por página será melhor.
Já na versão mobile, o ideal é que todos os posts na página inicial apareçam resumidos. Assim o blog abre mais rápido e a pessoa não perde tempo esperando carregar todos os posts pra então conseguir ler alguma coisa.
Cache
Se você usa WordPress tem alguns plugins de cache que podem ajudar, como o WP Super Cache. Se seu servidor for LiteSpeed, use o plugin LiteSpeed Cache porque ele funciona bem melhor nesse caso (se você não sabe qual é seu servidor, entre em contato com o suporte da hospedagem perguntando qual plugin eles recomendam).
Se você não usa WordPress ou não quer usar plugins, você pode fazer cache manualmente editando o arquivo .htaccess que pode ser encontrado via FTP, na raiz da onde está seu site.
Pesquisando no Google por htaccess cache, aparece vários tutoriais a respeito.
Você também pode ativar a compactação das páginas pelo .htaccess.