Métricas de velocidade do website

3 ferramentas para medir a velocidade do website

Já discutimos por vezes aqui a importância da velocidade do website, seja em termos de marketing e SEO ou mesmo na questão da usabilidade e desempenho. Um site precisa ser veloz. Contudo, muitos apenas usam a ferramenta do Google para efetuar avaliações – o PageSpeed Insights.

Embora o PageSpeed Insights aponte alguns aspetos importantes para melhoria em websites, sua análise muitas vezes é superficial. Alguns critérios relevantes não são ali listados, enquanto perde-se tempo demais em outros fatores que não estão a influir de forma decisiva no carregamento.

Particularmente, há dois aspetos do PageSpeed Insights que são apontados de maneira leviana e sem muitas explicações: o tempo de resposta do servidor e também os scripts e estilos de “bloqueio”. Em ambos os casos, as melhorias podem acarretar problemas maiores. No caso do tempo de resposta, a alternativa muitas vezes obriga à troca do alojamento ou hospedagem. Além disso, critérios técnicos que não são ali explicados estão envolvidos nisso:

  • Módulos do Apache ou Nginx
  • Alterações no .htaccess
  • Suporte para HTTP/2
  • Armazenamento em drives SSD, etc.

O usuário médio simplesmente não tem como “adivinhar” quais desses problemas estão levando a velocidade do website a aumentar. Testes mais elaborados precisam ser feitos e todas as demais alterações indicadas, muitas vezes, acabam por não fazer qualquer diferença. Assim sendo, o melhor é medir o desempenho de seu website por meio de ferramentas mais completas, que realmente são capazes de indicar problemas estruturalmente – o que pode, inclusive, ser de enorme serventia na hora de contratar profissionais para resolver os dilemas.


Velocidade do website – GTMetrix

Essa é, talvez, a melhor de todas as ferramentas para análise de desempenho em websites. Embora algumas ofereçam um diagnóstico ainda mais completo, a exibição de relatórios da GTMetrix é concisa e ajuda a identificar focos de lentidão num passar de olhos. Para conduzir seus testes, a GTMetrix utiliza, ao mesmo tempo, duas APIs de avaliação de desempenho – PageSpeed e YSlow. A primeira todos conhecem, mas a GTMetrix a utiliza de forma ainda mais detalhada que o próprio Google.

GTMetrix

Nosso desempenho no GTMetrix. YSlow “obriga” uso de CDN e praticamente proíbe elementos externos que não podem ser objeto de caching. Itens são descritos de forma detalhada, o que permite a cada webmaster decidir que pontos de melhoria devem ser implementados, e quais simplesmente não valem a pena, seja pela insignificância da melhoria ou pelo uso de recursos essenciais na plataforma.

A ferramenta do YSlow avalia 23 aspectos dentre 34 identificados pela Yahoo!, entre os fatores que influem na velocidade de um website. Essa é uma ferramenta mais exigente. Embora seja possível atingir níveis muito bons, alguns aspectos irão depender da forma com que o website é construído e seus recursos. Por exemplo, não utilizamos CDN, uma vez que nossos testes apontaram que não haveria melhoria em fazê-lo. Outros sites podem atingir algum progresso usando esse tipo de expediente. O YSlow “reduz” a nota para sites que não usam CDN, mas com o GTMetrix, isso aparece descrito com precisão.


Velocidade do website – Pingdom

O Pingdom Tools é outra boa ferramenta para análise de desempenho em seu website. A vantagem do Pingdom são os gráficos que são traçados a partir da análise. Um diagrama mostra o carregamento de ficheiros e recursos, redirecionamentos e a resposta do servidor, tudo em função do tempo. Com o Pingdom Tools, é possível ver, por exemplo, que a opção pelo uso de conexões seguras e os redirecionamentos HTTPS criam uma latência maior. Simplesmente leva mais tempo até que cliente e servidor “dialoguem”.

Nosso desempenho no Pingdom. A análise é mais baseada nos tempos de carregamento de cada recurso, e também analisa redirecionamentos. Como forçamos o HTTPS, um tempo um pouco maior costuma ser registrado.

Entretanto, para a maioria dos sites, o uso de SSL oferece vantagens. O próprio Google começa a utilizar esse aspeto como relevante em suas buscas. Aliás, um ponto que causa certa “lentidão” em websites, porém melhora o desempenho, o nível de confiança do usuário e mesmo o SEO. Trata-se de um recado para os perseguidores frenéticos do “100/100” no PageSpeed. O Pingdom oferece também um score geral, além de detalhes sobre a estrutura do site.


Velocidade do website – WebPagetest

Não é uma plataforma bonita, como as duas anteriores. Contudo, em termos de informação, talvez seja a mais rica delas. O WebPagetest avalia aspetos particulares envolvidos no carregamento de sites, a linha do tempo de tudo o que ocorre desde a requisição até a renderização de todo o conteúdo e também ignora itens à medida que possam não ser essenciais na estratégia de seu website. Para quem decide efetuar um trabalho minucioso, pesquisar ficheiro por ficheiro e script por script, essa é uma ferramenta melhor indicada.

Nosso site no WebPagetest. Notas A em todos os quesitos e engine ignorando o aspeto do CDN, uma vez que não o utilizamos.

Quer uma análise do seu site?

Fazemos gratuitamente o diagnóstico

Clique no botão, receba novidades e dicas e uma análise grátis de seu website. Basta inscrever-se em nossa newsletter.

Compressão de imagens

6 plugins para otimização de imagens no WordPress

Otimização de imagens é uma necessidade. Torná-las mais leves permite que seu site carregue mais depressa, o que evita lentidão, melhora o SEO e agrada mais aos clientes. Imagens de qualidade e alta resolução tê, sem dúvida, seu lugar – mas não é seu site ou blog. Contudo, como nem todos podem se dar ao luxo de ajustar tudo o que precisam em termos de imagens no Photoshop, acaba havendo três maneiras de fazer isso:

  1. Já selecionando, de antemão, fotos mais leves (mas correr o risco de ter uma visualização pobre)
  2. Instalar plugins que oferecem otimização já no WordPress (ou outro CMS)
  3. Usar serviços online nas imagens, antes de postá-las (falaremos disto em outro artigo)

Otimização de imagens – selecionar imagens mais leves

Não há muito segredo aqui. O ideal é optar por imagens mais leves na hora de montar posts ou mesmo seu site na internet. Imagens com mais de 100kb, em geral, provavelmente causarão ao seu site algum tipo de prejuízo na renderização, quando usuários acessarem o endereço. E, mesmo que a velocidade permaneça boa, pode haver penalização em termos de análise por parte de mecanismos de busca.

Uma dica útil aqui, para conseguir imagens leves, mas sem prejuízos à visualização, é atentar às dimensões dessas imagens. Por exemplo, fotos com 2000 x 1000 pixels são desnecessárias. Geralmente a maioria das imagens são exibidas em sites com tamanhos muito menores. A melhor maneira é adicionar fotos que tenham dimensões parecidas ou iguais àquelas que serão de fato exibidas. Por exemplo, se a imagem de destaque em seus posts possui por volta de 700 pixels de largura, tente incluir imagens com essas características – e não gigantes de 2 mil ou 3 mil pixels.

Do mesmo modo, é recomendável que fotos tiradas em câmeras de celulares mais modernos ou em câmeras digitais sejam redimensionadas antes de usadas em sites. Essas imagens são grandes e ocupam muito espaço, e apesar de terem qualidade irão atrasar a abertura de seu site.

Otimização de imagens – uso de plugins

Há imensos plugins que oferecem a possibilidade de otimizar imagens, para quem tem um site em WordPress. O problema é que a grande maioria deles oferece limitações quanto ao número de imagens que podem ser otimizadas. Para otimizar mais imagens, é preciso abrir uma conta nesses serviços e pagar. Simples assim.

Se você não importa-se em gastar um pouco mais, talvez seja uma boa opção. Mas vale lembrar também que, em termos gerais, quanto maior o número de plugins instalados em seu WordPress, pior será o desempenho da página. Às vezes, pode ser que você esteja a ficar na mesma. De todo modo, se prefere automatizar a otimização, os plugins são uma boa forma de fazê-lo. Há plugins melhores e piores, mas separamos aqui os mais utilizados e que oferecem ferramentas que DE FATO otimizam e reduzem o peso das imagens.

EWWW Optimizer

EWWW Image Optimizer – página do plugin

Esse plugin possui excelente desempenho e, como todos os que mostramos nesta lista, irá automaticamente otimizar todas as imagens JPG, PNG ou GIF que você possa subir para seu website. Ele também oferece possibilidades de “bulk optimization”, ou seja, de otimizar de uma só vez todas as imagens que você possua na seção de mídias de seu WordPress. A grande vantagem deste plugin é que não há limitações quanto ao tamanho de cada imagem a otimizar, embora haja limitações quanto ao uso – a menos que seja feita a assinatura da API do EWWW (e nesse caso é preciso instalar outro plugin ao invés deste… confuso).

Smush, da WPMU

Smush Image Compression and Optimization – página do plugin

Um dos otimizadores de imagens mais populares, porém bastante limitado. Os recursos são ótimos – otimização em bloco (mas na versão gratuita, apenas 50 imagens de cada vez), redimensionamento e configuração de tamanhos máximos para novas imagens. Outros recursos exigem algum conhecimento técnico, mas são igualmente úteis. Contudo, a diferença de desempenho e melhoria parece brutal… talvez a WPMU tenha deixado vantagens demais para a versão paga do produto – que só pode ser liberada caso assine todo o pacote de melhorias da WPMU Dev. Caso venha a usar todos os plugins da marca, talvez seja algo a estudar – mas são US$ 49,00 ao mês, sem direito a negociações ou descontos.

Kraken.io

Kraken.io Image Optimizer – página do plugin

Bom otimizador, mas com uma cota gratuita que depende do volume em MB de imagens, não do número de ficheiros. Gratuitamente, é possível otimizar até 100 MB de imagens ao mês – o suficiente para blogs mais simples. Contudo, se quiser mais que isso, só mesmo assinando a API da Kraken.io e inserindo a API Key na instalação do plugin. A partir daí, paga-se um inicial de 5 dólares ao mês, com uma cota de 500MB em ficheiros, mas há planos para um volume maior.

Na verdade, o Kraken.io pode ser vantajoso para aqueles que precisam otimizar imagens de maior peso ou em volume realmente assustador. A API torna-se mais barata conforme o volume avança. O plano mais avançando permite até 60GB mensais de imagens por 79 dólares, e cobra apenas 1 dólar adicional por cada Gigabyte a mais.

Shortpixel

Shortpixel Image Optimizer – página do plugin

Outro dos mais populares, é bastante simples de usar e também possui cota mensal, mas dessa vez de 100 imagens. Para a maioria dos sites WordPress, isso é suficiente. Novamente, há boa vantagem para volumes maiores. Cinco mil imagens mensais por US$ 4,99, doze mil imagens mensais por US$ 9,99, e por aí. Entidades sem fins lucrativos e ONGs ainda podem entrar em contacto com a empresa via e-mail (e em inglês), e assim conseguir acesso gratuito ao sistema.

TinyPNG

Compress JPG & PNG Images – página do plugin

Plugin interessante, de fácil uso e também com limitações em formato de “créditos”, relacionados ao número de imagens. O interessante desse plugin é que, muitas vezes, ele acaba permitindo que uma imagem seja “reotimizada” algumas vezes, e com ganhos. Algumas instalações do WordPress e alguns temas, contudo, podem fazer com que o plugin rode de forma “estranha”, conforme alguns relatos que ouvimos.

resmush-it

reSmush-it Image Optimizer – página do plugin

Esse é o único dos plugins de otimização de imagens que é REALMENTE grátis. A API é pública e não oferece limitações nenhumas em termos do número de imagens, seja por mês ou por tamanho dos ficheiros. Entretanto, pode apresentar alguns problemas de compatibilidade e nem sempre funciona de maneira rápida ou boa no WordPress, a depender da instalação. Ainda assim, o custo (ou ausência dele) vale o teste.

Otimização de imagens – teste rápido

Claro que fizemos um breve teste. A partir de cada um dos 6 plugins de otimização de imagens, aplicamos a ferramenta em uma mesma imagem – a versão original da foto a seguir, com 81,5KB em seu tamanho original. Vale lembrar que, quando subimos uma imagem ao WordPress, o tamanho original geralmente é ignorado – o WP cria versões em diversos tamanhos, para usos específicos, os chamados “thumbnails”. Nesse caso, os otimizadores precisa agir em cada um desses thumbnails.

Imagem para testes

Tiramos a “média” de otimização das ferramentas em cada uma das imagens, ou de suas derivações em thumbnails, em porcentagem de melhoria. Vejamos como cada plugin se comportou:

Nome do plugin Redução da imagem em %
EWWW IMAGE OPTIMIZER 7.2%
SHORTPIXEL IMAGE OPTIMIZER 6.2%
RESMUSH-IT IMAGE OPTIMIZER 5.2%
SMUSH IMAGE COMPRESSION AND OPTIMIZATION 4%
KRAKEN.IO IMAGE OPTIMIZER 3.7%
COMPRESS JPG & PNG IMAGES 2%

Quer uma análise do seu site?

Fazemos gratuitamente o diagnóstico

Clique no botão, receba novidades e dicas e uma análise grátis de seu website. Basta inscrever-se em nossa newsletter.

Site da MeuPPT segundos depois, com "pacote" de otimizações de código simplesmente ativado no painel de plugins

Por que melhorar a velocidade de um website?

Não se trata apenas de uma questão de capricho. Melhorar a velocidade e desempenho de um website é algo fundamental. A velocidade de um website determina o sucesso de muitas estratégias de marketing e vendas, ou mesmo de um negócio como um todo.

Muitas soluções, especialmente no popular WordPress, envolvem a instalação de novos plugins, gastos com ferramentas online e pagamento de horas sem fim para informáticos. A verdade é que o processo de otimização pode ser mais simples e envolver menos gente, dinheiro e recursos.

A velocidade de um website tem três implicações principais:

  1. É medida pelo Google, em termos de otimização, e influencia no ranking da página nas buscas
  2. Quando lento demais, um site é rapidamente abandonado pelos usuários
  3. Se já há lentidão, a tendência é que isso piore com o tempo, à medida que agregamos conteúdo e funcionalidades

Velocidade de um website – Google PageSpeed

O Google PageSpeed é uma referência para medir a velocidade de um website, bem como ajuda a detectar os principais problemas que causam lentidão. O importante, no entanto, é não cair na conversa dos milagreiros do “100 no PageSpeed”. A verdade é que muitos recursos atuais não permitem que determinadas otimizações sejam feitas (sob risco de problemas na navegação do site). Além disso, há problemas que o PageSpeed aponta que dependem do serviço de alojamento usado – ou seja, não podem ser melhorados diretamente pelo proprietário do site.

Ainda assim, o PageSpeed é importante. Em tese, quanto melhor o desempenho de um site ali, melhor será seu posicionamento no Google. O algoritmo atual das buscas não leva em conta apenas SEO, mas também qualidade do código nos sites e melhores práticas de programação e otimização de ficheiros.

O Google PageSpeed trabalha, grosso modo, com a análise de alguns itens em seu website:

  1. Uso de cache no navegador
  2. Tempo de resposta do servidor
  3. Javascript e CSS “de bloqueio”
  4. Otimização de imagens
  5. Redução de HTML
  6. Redução de CSS
  7. Compactação de CSS, JS e outros

Outros fatores podem influir na velocidade de um site. A maneira correta de lidar com os problemas é, primeiramente, identificar a origem de cada um deles. Posteriormente, otimizações podem ser planejadas e concentradas todas em um mesmo lugar – como por exemplo um único plugin. Ao acionar esse “pacote” de melhorias, todas as otimizações operam juntas e melhoram o PageSpeed e a velocidade de uma só vez.

Na MeuPPT, dispensamos todos os plugins de cache, memória, compactação, otimização e outros. Criámos um pacote de otimizações de código e processo e encapsulamos tudo dentro de um plugin que opera em nosso site – ao ativá-lo, tudo é colocado em ação, sem configurações e perguntas. As imagens mostram, primeiro, o desempenho de nosso site no Google PageSpeed Insights sem o plugin ativado. Na segunda imagem, ativamos o plugin.

Site da MeuPPT sem trabalho de otimização em nível de código

Site da MeuPPT segundos depois, com “pacote” de otimizações de código simplesmente ativado no painel de plugins

Velocidade de um website – nem todos são iguais

Os plugins de otimização existentes no mercado não são ruins. Na verdade, alguns deles são óptimos. A questão é que, de duas uma: ou necessitam de configurações complexas para atuar melhor em seu website, ou se aplicam bem a determinados sites e a outros nem tanto.

A solução, como deve estar a pensar, é algo customizado e individual. Cada site tem problemas únicos e característicos, e alguns deles precisam ser trabalhados de forma totalmente distinta. A MeuPPT está a inaugurar um serviço de análise e optimização de websites em nível de programação, para aqueles que possuem sistemas em WordPress. Em nossa análise, plugins prontos e soluções compradas não se aplicam. Nosso processo envolve quatro passos simples:

  1. Mediante seu contacto, avaliámos seu website e estabelecemos algumas linhas de ação
  2. Com acesso à sua instalação e alojamento via FTP, efetuamos testes e concluímos que módulos podem ou não ser optimizados, e como isso deve ser feito
  3. Concentramos todas as optimizações em um plugin leve e único – somente o seu site contará com esse plugin, pois aplica-se apenas aos problemas que seu website possuía
  4. O plugin é ativado e, no horizonte de 30, 60 e 90 dias, realizamos novos testes para verificar se novas optimizações poderão ser agregadas

Se tem dúvidas a respeito de como isso pode ser feito em seu website ou se já tentou outras possibilidades e não obteve sucesso, entre em contacto connosco e peça sua análise e orçamento. Garanta um melhor posicionamento de sua empresa e pare de simplesmente gastar fortunas em AdWords e publicidade, quando parte do trabalho poderia estar a ser feito no piloto automático.

 

Quer uma análise do seu site?

Fazemos gratuitamente o diagnóstico

Clique no botão, receba novidades e dicas e uma análise grátis de seu website. Basta inscrever-se em nossa newsletter.