Ninguém gosta de navegar com lentidão pela internet. A velocidade de carregamento de um site é determinante para que ele tenha um bom desempenho como ferramenta de comunicação e presença digital de uma empresa.
Existem inúmeras razões que podem acarretar em lentidão no carregamento de uma página, incluindo a qualidade da conexão de quem está acessando. Mas sempre é possível tomar ações para otimizar o conteúdo e reduzir ao máximo esse tempo de carregamento.
Um site mais veloz é bom para os leitores - que gastarão menos tempo acessando - e ótimo para os criadores do conteúdo, que verão sua página converter mais, ter uma rejeição reduzida e conquistar mais relevância nas buscas orgânicas.
Segundo informações do próprio Google, o tempo de carregamento é um dos critérios que influencia o page rank, que é o que vai determinar o posicionamento de uma página em uma busca no Google.
Ou seja, um site que carrega mais rápido não é uma simples questão de conforto. Ele engaja muito melhor e consegue resultados mais efetivos.
Neste e-book, vamos explicar melhor como descobrir se o seu site está lento demais e o que pode ser feito para otimizar o conteúdo e conseguir uma velocidade melhor. Também vamos sugerir plugins que podem aprimorar a velocidade de carregamento, especialmente se o seu site é desenvolvido em Wordpress.
Boa leitura!
O primeiro passo para começar a otimização da performance de um site é saber como está o seu tempo de carregamento atual. A forma de se fazer isso é com uma ferramenta especializada em testes de velocidade.
Neste capítulo, vamos indicar cinco ferramentas gratuitas que permitem conhecer não só quanto tempo demora para a página carregar, mas também quais são os maiores vilões que estão atrasando esse processo.
Com esse raio-x, é possível identificar pontos de melhoria para o conteúdo, que serão tratados nos próximos capítulos do e-book. Conheça as ferramentas:
O PageSpeed Insights é uma ferramentada Google que analisa o conteúdo da página por completo e sugere melhorias claras, como utilizar CSS ou eliminar itens pesados e problemáticos.
O PageSpeed Insights é uma ótima companhia na hora de otimizar a página, mas apesar das dicas excelentes de melhoria, ele não revela o tempo de carregamento da página, portanto, vale apena utilizar, além dele, outra ferramenta que tenha esse dado específico.
O Pingdom Website Speed Test é uma ferramenta simples e gratuita que entrega de forma objetiva os dados mais relevantes sobre a performance de um site: tempo de carregamento, quantidade de requisições para o carregamento e tamanho da página em MBs.
Além disso, essa ferramenta também compara a performance do site que você testar com as outras páginas que já foram testadas nela, o que é interessante como base de comparação.
O Pingdom Website Speed Test é bem simples e fácil de usar, mas não tem tantos recursos como outros concorrentes.
O WebPageTest é uma ferramenta bem simples e básica que vai medir a velocidade de carregamento do seu site em um teste de conectividade. É possível customizar a localidade e o navegador utilizado para o teste, o que permite a compreensão do desempenho da página.
Essa ferramenta Open Source é bem simples, mas pode dar bons insights de melhoria e uma segunda opinião sobre a velocidade de carregamento da página.
O YSlow é um plugin de navegador que analisa páginas e revela se elas estão rápidas ou lentas de acordo com as boas práticas de otimização do Yahoo!. Se perceber pontos que podem causar lentidão, o YSlow pode sugerir melhorias.
A equipe do Yahoo! sugeriu 32 regras e boas práticas que podem afetar a performance do site. O YSlow verifica se 24 delas estão sendo utilizadas e faz sua análise sobre isso.
O Yslow é um projeto Open Source e pode ser integrado com outras ferramentas mais específicas de análise de performance, como o JSLint e o Smush.it.
Completo e fácil de usar, o GTmetrix é considerado por muita gente a melhor ferramenta para avaliar a performance de carregamento de uma página. Ele utiliza tanto o YSlow quanto o PageSpeed Insights para descobrir pontuações de desempenho para o site, o que traz um bom comparativo de imediato.
No GTmetrix é possível visualizar boa parte das informações úteis que vão ajudar futuras ações de melhoria do site, como os itens que estão causando lentidão, o tamanho da página e a quantidade de requisições necessárias para abrir o site.
E o mais interessante: é possível comparar o desempenho da sua página com a de concorrentes, oque pode ajudar a descobrir o que eles estão fazendo para melhorar o carregamento das suas páginas.
Tudo isso pode ser acessado na versão gratuita do GTmetrix, mas para quem quer mais, é possível adquirir uma versão paga ainda mais completa.
A melhor maneira de otimizar uma página vai variar de acordo com o conteúdo e o objetivo dela. Ainda assim, no geral, existem regras e boas práticas que podem ser seguidas para aprimorar o desempenho dos sites.
A otimização de páginas é uma tarefa de investigação que pode demandar um olhar atencioso, as ferramentas certas e um bom conhecimento técnico. Neste capítulo, selecionamos sete etapas cruciais dessa atividade; confira:
O primeiro passo que nunca deve ser esquecido é inspecionar as páginas para descobrir quais são os principais vilões do seu desempenho. Isso pode e deve ser feito com ferramentas especializadas, mas também vale a pena abrir o código e identificar o que está fora no padrão que pode prejudicar a performance da página.
Mesmo que não afete diretamente o tempo de carregamento, código mal feito em uma página sempre é ruim e deve ser corrigido assim que detectado. Um código limpo, objetivo e organizado é mais fácil de se trabalhar e melhor para a equipe.
A quantidade, o tamanho e principalmente o formato das imagens podem ser cargas pesadas para o seu site. Normalmente, elas estarão em JPG, GIF ou PNG, sendo que os dois últimos são mais específicos e só devem ser utilizados em alguns casos.
No caso de imagens em JPG, lembre-se sempre de exportar para a web nos programas de edição. Essa opção permite otimizar a qualidade com o mínimo de perda e o máximo de economia de espaço. A não ser em raras exceções em que é preciso publicar uma imagem com o máximo de qualidade possível, sempre otimize a qualidade delas.
Uma recomendação bem prática aqui é utilizar o TinyPNG para a compressão de imagens no formato JPG e PNG. Esse aplicativo consegue ótimos resultados e não exige nenhum conhecimento técnico específico.
Uma forma de reduzir o número de requisições necessárias para a renderização de uma página é com a combinação de arquivos CSS ou Javascript. É possível, por exemplo, juntar seis arquivos CSS em um só e com isso fazer com que baste uma requisição HTTP para todos eles.
Sprites CSS são arquivos que unificam várias imagens de um site em uma folha só. Com isso, na hora que for preciso utilizar alguma dessas imagens, basta indicar a localização dela na folha de sprites via CSS.
A grande vantagem aqui é que a folha de sprites só é carregada uma única vez e utilizada à vontade pela página, eliminando a necessidade de múltiplas imagens e, consequentemente, reduzindo em muito o peso do site.
É possível compactar objetos da página no servidor e fazer com que eles sejam descompactados localmente direto no browser. Essa estratégia reduz significativamente o tempo de carregamento da página, exigindo pouco da memória do usuário que abrirá o conteúdo em troca.
A compactação server side usualmente é feita com Deflate e gzip. Para ativá-la, pode ser preciso entrar em contato como serviço de hospedagem.
Vale a pena aproveitar o cache do navegador ao máximo possível. Para isso, é necessário evitar o uso de CSS e javascript incorporado ou inline, ou seja, aquele que está no documento HTML e terá que ser carregado sempre que o usuário retornar à página.
Se o CSS externo e os arquivos javascript são armazenados em cache pelo browser, não será necessário baixar tudo novamente, agilizando em muito o carregamento. Logo, prefira esse tipo de solução para as folhas de estilo e JS.
Um bom código que esteja bem formatado envolve quebras de linha, comentários regulares e outras questões de organização que não estão diretamente relacionadas com funcionalidade, mas sim efetividade na hora de trabalhar o produto.
Mas todas essas informações extras podem pesar nos arquivos. Para deixá-los o mais enxuto possível, é importante realizar a chamada minificação, que remove tudo desnecessário e deixa o código o mais compacto possível.
O processo de minificação não é feito no braço, mas sim com uma ferramenta especializada como o MinifyCode, que inclusive permite reverter tudo para que seja possível trabalhar no código novamente.
Uma página pode contar com muitos tipos de redirecionamento, como quando ela vai se referir a outro conteúdo web ou a um serviço externo, como a integração do Facebook. Uma boa dica é tentar eliminar esses redirecionamentos ao máximo, pois a latência acrescentada por eles prejudica a performance da página.
É possível descobrir problemas de redirecionamento com algumas das ferramentas de diagnóstico citadas no capítulo anterior, que sugerem soluções objetivas para eliminá-los.
Se o seu site utiliza o Wordpress como gerenciador de conteúdo, a otimização da performance pode ser feita coma ajuda de plugins especializados. Neste capítulo, recomendaremos as 5 melhores opções que vão trazer resultados imediatos no desempenho da página:
O W3 Total Cache é o plugin mais usado para otimização de páginas de Wordpress. Ele faz sozinho boa parte das recomendações citadas no capítulo anterior, incluindo a minificação do código.
O WP Rocket é um plugin especializado em potencializar a velocidade de carregamento de páginas com um bom uso do cache, compressão de arquivos por minificação e carregamento inteligente de imagens de acordo com a rolagem dos usuários na página.
Esse é um plugin voltado para a criação de cache em páginas de Wordpress, reduzindo não só o consumo de rede dos usuários como também os gastos em RAM e CPU para a renderização do conteúdo.
O WP Fastest Cache é utilizado por mais de 300 mil pessoas e muito bem avaliado por boa parte delas.
Mais uma opção para o bom uso do cache no WordPress, o WP Super Cache é extremamente popular, com mais de um milhão de instalações ativas, segundo o próprio site do WP.
O WP Super Cache é fácil de ser personalizado e instalado, mesmo para quem não é desenvolvedor.
A CloudFlare é uma CDN gratuita extremamente popular. Esse plugin é a forma mais simples e objetiva de utilizá-la no Wordpress. Ele ajuda tanto na questão do cache como também na segurança dos conteúdos.
Dos mesmos criadores do WP Rocket, o Imagify consegue otimizar imagens em um grau de compressão determinado pelo o usuário. Com uma interface bem prática e fácil de aprender, ele está disponível em uma versão demonstrativa gratuita com limitações de uso e planos pagos.
Cada segundo gasto a mais esperando aumenta drasticamente as chances de um usuário perder a paciência e deixar a página. Otimizar o conteúdo é muito importante para um site, independentemente de qual seja a estratégia em que ele está inserido.
Esperamos que o conteúdo deste e-book seja esclarecedor e prático para quem quer aprimorar o desempenho das suas páginas. Com as dicas e ferramentas citadas aqui, é possível conseguir resultados visíveis e rápidos, mas para quem quiser ir além, vale a pena encarar esse guia como um primeiro passo na jornada de aprendizado.
Uma dica para quem quer se tornar especialista em otimização é, além de pesquisar mais sobre o assunto, brincar muito com as ferramentas de diagnóstico e plugins que melhoram a performance de páginas. Como em qualquer técnica, além da teoria, é preciso muita prática para ficar bom.
Fale sobre seu negócio e sobre seus objetivos com relação ao marketing para que possamos montar um projeto eficaz para seus clientes e seu segmento. Se você quer ter uma boa receita com seu site, somente aqui é possível encontrar profissionais capacitados e que possuem domínio de todas as ferramentas necessárias.
