Blog de SEO, Interfaces e Comércio Eletrônico » performance

Google Analytics com relatórios de velocidade do site

Héric Tilly — Wed, 18 May 2011 12:05:54 +0000

Agora você já tem como saber de maneira mais clara quanto tempo em média o seu site demorar para ser carregado.

Este relatório está disponível na nova Interface do Google Analytics, basta acessar a aba de Conteúdo e depois Velocidade do site:

Google Analytics - Velocidade do Site

Para começar a medir a velocidade do seu site, basta adicionar em seu código a linha referente ao Tempo de Carregamento do site,

_gaq.push(['_trackPageLoadTime']);.

O seu código da chamada ao Google Analytics deverá ficar parecido com isso:

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-XX'],['_trackPageview']);
  _gaq.push(['_setDomainName', '.XXXX.com.br']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_trackPageLoadTime']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Lembrando que a recomendação é que este bloco deve estar entre as tags de cabeçalho .

Por que medir a velocidade?
Porque sites com uma velocidade de carregamento mais rápida tendem a mehorar a experiência do usuário e ganham pontos na indexação do Google.

Segundo o Google Webmaster Tools, eles consideram sites rápidos os que abrem na casa dos 1-2seg, se seu site está acima dessa média, tente rever seu código ou contrate uma hospedagem com maior disponibilidade de recursos, isto pode aumentar o seu gasto mensal, mas se bem estruturado aumentará também o seu retorno.

Seguem algumas dicas para diminuir o tempo de carregamento do site:

Diminua o número de arquivos de imagens a serem carregados com CSS Sprites;
Unifique e compacte os arquivos Javascript e CSS;
Faça cache de consultas a banco de dados ou ofereca versões estáticas para conteúdos com baixa frequência de atualização;
Contrate uma hospedagem com maior disponibilidade de recursos ( Memória / Processamento );
Habilite o gZip na sua hospedagem;
Codifique sua interface que maneira enxuta e otimizada, tableless é fundamental.

Posts relacionados:
Compressão de arquivos Javascript e CSS com gZip

[]‘s

Otmização de Sites PHP – Compressão de arquivos com gzip

Héric Tilly — Thu, 24 Mar 2011 12:10:00 +0000

Não importa o tamanho do seu site, se você quer que ele tenha um tempo de carregamento menor, com certeza você deverá seguir este pequeno tutorial.

Para fazer os passos a seguir é necessário um conhecimento médio/avançado, pois você irá mexer em arquivos de configuração críticos que podem tirar o seu site do ar.

Só fiz testes com hospedagens em ambiente Linux/Apache e tive boas experiências chegando a reduzir o tamanho dos arquivos em até 400%.

Passo 1

Crie um arquivo na raiz do site com seguinte trecho de código:
Arquivo js-gzip.php

Este código além de fazer a compressão do arquivo, irá também forçar o navegador a fazer o cache do mesmo, otimizando o desempenho do seu site no navegador do cliente.

Passo 2

Agora vamos mexer no .htaccess e aconselho fazer um backup antes de salvar o arquivo, pois este é um arquivo crítico que pode tirar o site do ar.
Se seu site não possuir, crie um e publique na raiz do site, qualquer problema basta removê-lo.
.htaccess


    ForceType application/x-httpd-php
    php_value auto_prepend_file "/caminho/completo-do-js-gzip.php"

Mesmo sem fazer a versão Minify você já terá um ganho de performance. Nos meus testes reduzi um arquivo de 200kb de JavaScript para apenas 35kb.
Para seu usuário fará diferença no tempo de carregamento do site e no fim do mês você terá economizando mais banda do seu servidor.

O mesmo processo pode ser feito para arquivos CSS também, ficaria assim:
gzip-css.php

e no .htaccess , adicionar:


    ForceType application/x-httpd-php
  php_value auto_prepend_file "/caminho/completo-do-css-gzip.php"

O caminho completo onde está o arquivo seria algo parecido com “/home/site/login/public_html/arquivo-gzip.php”.
Se você não sabe o caminho completo, pode pegar rodando o seguinte comando php

echo $_SERVER['DOCUMENT_ROOT']

Existem diversos métodos para efetuar esta operação, vou citar mais um e você escolhe qual utilizar.

No .htaccess, adicione as linhas :



SetOutputFilter DEFLATE

Em ambos os casos, é necessário que o seu servidor esteja com o gzip habilitado.

Para servir o conteúdo HTML otimizado também, você pode colocar no cabeçalho do seu site em php a chamada

Para o WordPress existem um plugin chamado WP Super Cache que comprime os arquivos e gera versões estáticas dos arquivos de conteúdo, economizando as consultas ao banco de dados e também há o WP Minify que gera versões reduzidas de Javascript e CSS

Por que é importante otimizar?
Por que além de melhorar a experiência do seu usuário navegando em um site mais rápido, o Google também leva em conta o tempo de carregamento do site como um dos fatores de ranking.

Também é interessante otimizar as imagens que são servidas em seu site, recomendo o uso de um plugin do Firefox, o ySlow que já integra o serviço do Yahoo Smush.it! que citei em um post anterior. Através do ySlow você consegue ir medindo os resultados de suas ações através de um score que vai até 100, cada item tem um peso e Compressão de arquivos com gzip é uma das princípais.

Espero que tenha ajudado a deixar seu site mais rápido e que você não tenha tirado seu site do ar.

Joomla com Conteúdo Estático

Héric Tilly — Sun, 05 Apr 2009 06:47:01 +0000

Sim, é possível ter um site totalmente dinâmico com conteúdo estático.

Há um plugin do Joomla chamado “Content Static” que possibilita gerar arquivos físicos à partir das categorias do Joomla. Por exemplo, ao acessar www.xxx.com.br/categoria/artigo.html o plugin se encarrega de gerar o arquivo seguindo a mesma estrutura de diretório.
Com o arquivo gerado, ele terá prioridade sobre o “.htaccess” e o conteúdo passa a ser exibido sem acessar o banco de dados.

Para que tudo funcione perfeitamente, deverá ser habilitado o modo SEF (Search Engine Frinedly) e de quebra você terá um site mais rápido e amigável aos mecanismos de busca.

Em Configuração Global -> Site, habilite as 3 opções no box SEO.

sef-joomla

Caso você faça alguma atualização, terá que limpar o cache indo em Ferramentas-> Limpar Cache.

cache-joomla

Selecione o que deseja apagar e clique em “Remover”

Este plugin é essencial para sites com grandes números de acesso.