Todos nós sabemos a importância de causar uma boa primeira impressão e que não existe uma segunda chance para isso.
A primeira impressão é um dos principais fatores de permanecia de um visitante no site, ela só perde para o fator “recomendação”, quando um amigo de confiança indica um site, o visitante tende a passar alguns segundos em alguma atividade especifica ainda que a primeira impressão não seja boa.

Levando em conta a primeira impressão do visitante como fator determinante para o tempo de permanecia, imediatamente entendemos a importância da Home Page para garantir um resultado positivo.

O que a sua “Página Inicial” diz sobre o site? Ela é suficientemente esclarecedora? Ela transmite a atmosfera que o visitante espera estar no momento que busca o seu produto ou serviço? Ela consegue despertar o interesse para que o visitante queira se aprofundar na visita? Carrega rápido o bastante? O tempo que o navegador necessita para renderizar as informações relevantes para o visitante é ideal?

Características de uma Home Page eficiente

Veja a seguir algumas características importantes para garantir que a sua home seja eficiente. Observe que são apenas recomendações e que, a aplicação de todas elas não garante o sucesso de um site, existem muitos outros fatores envolvidos, como cores, imagens, conteúdo de qualidade, etc, e ao mesmo tempo alguns projetos permitem que vc ignore algumas ou todas essas recomendações.

Tic-tac, tic-tac, tic-tac… Vc tem apenas 7 segundos

Pesquisas indicam que os primeiros 7 segundos definem se o visitante vai permanecer no seu site ou não.
Mesmo nos sites mais rápidos, o tempo de carregamento leva em média de 2 a 3 segundos sendo assim, restam apenas 4 segundos para que você consiga transmitir a sua mensagem.
Para garantir que a sua página seja atraente, reduza o tempo de carregamento da página principal. Quanto mais rápido ela carrega, mas tempo você terá para conseguir atrair o seu visitante.

Veja a seguir algumas dicas de como melhorar o tempo de carregamento de um site.

Pingdom Tools

O site Pingdom Tools oferece informações importantes sobre o tempo de carregamento de cada arquivo do site. Por causa dele eu fiz algumas mudanças importantes eliminando arquivos pesados que não estavam sendo usados e também arquivos não encontrados.

Ele mostra em amarelo o momento em que é feita a requisição do arquivo até o momento em que inicia-se a conexão, em verde o tempo que demora entre o momento que se inicia a conexão até o inicio do download do arquivo, e em azul o tempo de download da página.

Sendo assim, se as barras amarelas e verdes estão muito longas é bom verificar se o seu servidor realmente tem um bom desempenho e se a barra azul for muito longa, melhor rever o tamanho dos seus arquivos.

Diminuindo a quantidade de arquivos:

Como vc pode ver pelo Pingdom Tools , cada arquivo que a sua página solicita passa por dois processos antes de ser efetivamente carregado: a requisição e a conexão, sendo assim, podemos concluir que agrupando múltiplos arquivos em um só, o tempo de carregamento da página deve ser reduzido. Vou mostrar duas situações básicas:
1 – Se vc tem um menu ou botão que muda quando se passa o mouse (hover) e cria uma imagem para o estado normal e outra para o estado ” hover” , o servidor fará duas requisições e duas conexões, uma para cada imagem e ainda somaremos a isso o tempo de carregamento de cada uma. O ideal seria juntas as duas imagens em uma só e trabalhar com posicionamento. A imagem ficará maior e conseqüentemente mais pesada, no entanto faremos apenas uma requisição e uma conexão. Não sabe como fazer isso? O Rodrigo Medeiros explicou muito bem no artigo “Mudando o background-image no hover”

2 – Em se tratando de arquivos css externos , algumas classes e propriedades podem não ser usadas em todas as páginas e por isso nos vemos tentados a fazer arquivos separados. Por exemplo, porque eu deveria inserir o css de formatação do “formulário de contato” da página “contato” no mesmo css que é usado na home “home” ou nas outras páginas do site? Faz sentido criar um arquivo especifico para esses casos, mas também devemos lembrar que isso aumenta o tempo de carregamento da “Página de Contato” pois teremos que carregar um novo arquivo.
Lembrando que arquivos CSS são cacheados automaticamente, ou seja, ficam gravados no computador e não são recarregados a cada nova requisição, talvez seja interessante termos toda a formatação em um único arquivos que será carregado uma única vez.

Mas então você vai pensar: “Ora Daniele, mas você não está falando sobre a necessidade de termos uma ‘Página Inicial’ rápida para garantir que o visitante encontre a informação que procura nos primeiros segundos?” Sim, eu estou, mas tarde eu vou explicar que muitas pessoas entram no seu site pelos mecanismos de busca, e por isso acabam caindo em outras páginas as quais também vale a regra dos 7 segundos, não adianta reduzir o tempo de carregamento da “Home” aumentando o tempo de carregamento das outras páginas.

Trabalhando com “url amigáveis”

Não vou explicar o que é ou para que servem, pois o Bruno Torres já explicou muito bem no artigo “Gerenciamento de URLs – Criando URLs amigáveis“, o que é importante saber é que essas URLs Amigáveis sempre deve terminar com uma barra (/). Por exemplo: ao invés de colocarmos http://18.218.219.63/blog, devemos colocar http://18.218.219.63/blog/. Isso é necessários porque quando o servidor recebe uma requisão que não especifica qual é o tipo de arquivo que ele irá abrir, antes de iniciar o carregamento, ele fará uma checagem em todas as extensões possiveis (.htm, .html. jpg, .gif., etc etc) isso leva alguns milisegundos, mas pode fazer diferença. Colocando uma barra no final, ficará claro que se trata de uma pasta e a resposta será entregue muito mais rapidamente. * fonte: http://www.wordpressthemes.com.br/7-dicas-para-carregar-seu-blog-em-wordpress-mais-rapido/

Otimizando o tempo de carregamento em sites usando WordPress

Se como eu, vc utiliza o wordpress como ferramenta de gerenciamento do seu site ou blog, existem algumas informações que vc deve considerar:

Limpeza do seu banco de dados: O WordPress 2.9 possui um recurso de limpeza e otimização do banco de dados, para isso basta adicionar a seguinte informação no seu “wp-config.php”:

define('WP_ALLOW_REPAIR',true);

Em seguida acesse: http://seu_site/wp-admin/maint/repair.php e siga os procedimentos.

Arquivos não encontrados: Para cada arquivo não encontrado no site, o wordpress gera uma página de erro 404. Ou seja, você uma super-otimização no seu site, mas esqueceu de eliminar uma imagenzinha que estava lá naquele css esquecido, no momento que o WordPress se depara com uma requisição aquela imagenzinha de menos de 1kb, ele interrompe o que está fazendo, gera uma página de erro 404, e em seguida retoma a sua atividade de carregamento da página. Tá… Isso leva só alguns milisegundos também, mas pode comprometer o carregamento. O Site Pingdom Tools ajuda a identificar esses arquivos, depois é só elimina-los ou corrigi-los.

O Gilberto “Knuttz” escreveu uma solução bem interessante no artigo “Acalmando o WordPress – 404 amigável“.

Favicon: Uma das requisições que o wordpress sempre faz, é para o Favicon, aquela imagem que é exibida ao lado da URL ou do Titulo da sua página em alguns navegadores. Sendo assim é importante você sempre criar um favicon.ico para o seu site em wordpress, do contrario ele vai gerar um erro 404 para esse arquivo também. Não sabe o que é isso ou como fazer? Veja o artigo “21 melhores geradores de favicon da Internet“.

Requisições ao banco de dados desnecessárias: Como o wordpress é um gerenciador de conteudo desenvolvido para ser usado em qualquer site, algumas informações precisam ser facilmente customizadas, e uma delas é, evidentemente, o endereço do site, . A solução que o wordpress escolheu foi gravar o endereço do site no Banco de Dados, e então cada vez que ele precisa utilizar essa informação ele vai até o banco, pesquisa, e retorna a informação para o site, chamamos isso de requisição ou consulta ao banco. Se vc parar para analisar a quantidade de vezes que o wordpress vai ao banco para solicitar essa informação em cada página é gigantesca, para ajudar a resolver esse problema podems substituir algumas informações dinâmicas por outras estáticas, ou seja, ao invés de inserir as tags especiais (dinâmicas: <?php echo bloginfo(‘url’); ?>) do WordPress, nós podemos inserir as urls completas (estáticas: http://www.seu_site.com.br).

O Guga Alvez explicou muito bem como fazer isso no artigo “Deixe seu site WordPress mais limpo e mais rápido”

Ufa!

Eu ainda não escrevi nem 10% de tudo o que tenho pra falar sobre assunto, e o artigo já ficou imenso. Vou continuar amanhã algum dia

Até mais