Dicas para fazer o site abrir mais rápido

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ê:

  1. Abra a imagem no Photoshop
  2. Vá em Image / Image Size
  3. Coloque a largura que a foto terá (700 no meu exemplo), e a altura redimensionará proporcionalmente.
  4. Na resolução deixe 72. Estamos trabalhando com internet, não com impressão, então isso é o suficiente.
  5. Depois vá em File / Save As e altere a qualidade da imagem.
  6. Depois é só salvar.

Se você não tem Photoshop, no Google você encontra alguns sites online que faz isso, como o Image Optimizer.

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 para programar, você encontra alguns plugins que faz isso pra você.
Também é possível fazer isso com o Dreamweaver, quando eu usava ele tinha criado um comando para que fazia tudo com um clique, se pesquisar no Google vai encontrar uns tutoriais e dicas.

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 plugins para otimizar o CSS no 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.

Evite usar Flash

Quase ninguém hoje usa flash, mas infelizmente ainda existem os banners de publicidade feitos assim.

Se você tem muitos banners de publicidade no seu site, converse com quem está anunciando perguntando se não é possível ele fornecer um banner estático, em gif (pode ser otimizado online também!) ou responsivo.

Se você usa o Google Adsense, agora é possível gerar código de anúncios responsivos.

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, como fizemos no Abra a Janela e no Pipoca Musical.

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.
O ruim dos plugins de cache no WordPress é que fazem cache de tudo, e as vezes você não quer que isso seja feito em uma função ou arquivo. Algumas coisas você consegue controlar nas configurações do plugin, mas dependendo do que quiser, não vai ser possível evitar o cache. Nesse caso recomendo fazer cache manual.

Se você não usa WordPress ou não quer usar plugins, você pode fazer isso 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. Vale a pena dar uma olhada, e para quem usa WordPress, é um plugin a menos sendo carregado.

Você também pode ativar a compactação das páginas pelo .htaccess.

Deixe seu comentário

6 comentários

  1. Olá!

    Primeiro, queria dizer que vocês são incríveis, uma inspiração em organização, trabalho e tudo mais!

    Eu adorei as dicas, inclusive no meu site está super lento! Amei mesmo!

  2. Olá, Dani!
    Uma dica, você que é programadora já há um bom tempo, tem um enorme conhecimento!
    Você acha legal sempre fazer o site primeiramente em HTML e CSS? E depois fazer a implementação em WordPress?

    Eu costumo muito fazer em CSS e HTML primeiro, mas algumas vezes me parece estar atrapalhando mais que ajudando, pelo fato que eu acabo demorando mais um pouco;

    Abraços

    1. Sempre faço HTML e CSS primeiro.
      Depois passo para WordPress e faço testes em uma instalação local que tenho.
      Deixo o mínimo de coisas possível pra acertar online no site final.
      Pra mim, é mais fácil e rápido fazer assim do que fazer direto no WordPress.

      1. Olá, Dani! Obrigado por responder, fico muito feliz ;)
        Eu também costumo, porque geralmente consigo deixar as coisas alinhadas corretamente fazendo assim, evitando repetição de DIVs, além de ter menos problemas com DIVs abertas, né?

        Vou continuar assim, também! Obrigado pela dica ;)