Otimizando um site em Wordpress
Como fazer para que o Wordpress fique mais rápido
O WordPress é um sistema bem mantido e altamente simplificado - quando surgem problemas, eles geralmente se resumem ao fato de que quase ninguém usa uma instalação simples do WordPress. Para obter os resultados de que precisa, é provável que você esteja usando uma grande quantidade de plugins, código personalizado ou temas de terceiros - todos os quais têm o potencial de se fragmentar na velocidade do seu site.
Neste artigo, examinaremos as causas básicas dessas reduções e veremos o que você pode fazer para resolver quaisquer problemas e colocar seu site novamente no ar.
Fatores que afetam a velocidade do site WordPress
Existem alguns fatores que determinam a velocidade de um site, aqui estão os que veremos com mais detalhes:
Ping é um utilitário de linha de comando, disponível em praticamente qualquer sistema operacional com conectividade de rede, que atua como um teste para ver se um dispositivo em rede está acessível .
O comando envia uma solicitação pela rede a um dispositivo específico. Um ping bem-sucedido resulta em uma resposta do computador que fez o ping de volta para o computador de origem.
Você pode utilizar um CDN para reduzir a latência de rede. Falaremos mais sobre os serviços CDN abaixo.
A qualidade do código afeta a velocidade do site de várias maneiras: o código incorreto leva mais tempo para ser processado; código não otimizado pode consumir muito mais memória ou simplesmente maior, levando mais tempo para fazer o download. Isso sem mencionar o efeito bola de neve que está vinculado ao código de difícil manutenção - à medida que mais e mais desenvolvedores adicionam mais e mais ao seu código em estilos diferentes, usando metodologias diferentes, ele começará a degradar, agravando todos os problemas acima .
O problema é que, a menos que você seja um desenvolvedor experiente, é difícil determinar a qualidade do código que está usando. Existem algumas coisas que são mais fáceis de controlar do que outras, como escolher plugins confiáveis, que veremos mais tarde.
Como medir o seu tempo de carregamento
Antes de aprender como diminuir os tempos de carregamento, você precisará saber como medi-los. GTmetrix é uma ótima ferramenta para isso, permitindo medir o desempenho do seu site e obter todos os tipos de informações e itens acionáveis gratuitamente. Outras opções incluem Pingdom e WebPageTest , ambos serviços semelhantes.
Quando você executa seus testes de desempenho, é importante considerar algumas coisas:
Certifique-se de executar vários testes em diferentes horas do dia, para que você tenha uma visão completa dos tempos de carregamento do seu site. Os testes individuais podem variar, então você precisa executar vários testes se quiser dados precisos
Tente escolher um local de teste próximo ao seu público-alvo, para que você possa capturar a experiência com precisão. Ou, se você tiver um público global, certifique-se de testar em diferentes locais ao redor do mundo para ver como os diferentes visitantes terão a experiência de seu site.
GTmetrix e WebPageTest permitem alterar locais de teste, dispositivos e outras variáveis
O que é um bom tempo de carregamento?
Primeiro, é importante lembrar que não há um único tempo de carregamento da página para o seu site. Além de quaisquer otimizações que você tenha feito, a rapidez com que o seu site carrega depende de outros fatores, como a localização do visitante, dispositivo (por exemplo, desktop vs smartphone) e velocidade de conexão (por exemplo, 3G vs uma conexão com fio rápida).
Além disso, um bom tempo de carregamento no desktop não é necessariamente o mesmo que um bom tempo de carregamento no celular, embora os dados sejam semelhantes.
Para dispositivos móveis, o recomendado é que tente manter o tempo de carregamento abaixo de três segundos. Acima disso, a probabilidade de seu visitante sair do site e ir para outro quase dobra.
É difícil encontrar dados semelhantes para visitantes de desktop, mas você também verá um salto semelhante em torno de três segundos em dispositivos de desktop - pelo menos de acordo com esses dados do Pingdom. No entanto, o salto nas taxas de rejeição não é tão grande quanto para os visitantes de dispositivos móveis, o que sugere que os visitantes de desktop são um pouco mais tolerantes.
Em geral, porém, você deseja atirar por no máximo três segundos
Como diminuir o tempo de carregamento
Embora algumas dessas dicas possam parecer um pouco técnicas, você será capaz de executar todas as táticas desta primeira seção sem precisar de nenhum conhecimento técnico especial. A maioria deles envolve fazer escolhas inteligentes e instalar plugins do WordPress quando necessário.
Quando você veicula uma página para seus visualizadores, acontece o seguinte: o código PHP é executado e processado no servidor, resultando no código HTML que é enviado ao usuário. O HTML resultante geralmente é o mesmo, mas ainda é processado todas as vezes.
Pegue uma postagem de blog, por exemplo. Ele não muda a menos que seja atualizado, mas o código PHP ainda é processado todas as vezes.
Os caches economizam um tempo valioso do servidor 'salvando' o resultado da operação de processamento. O código é executado e processado, e o HTML resultante é armazenado no cache. Para os visitantes subsequentes, o processamento é totalmente ignorado e eles recebem a versão HTML salva.
Basicamente, seu servidor tem que fazer menos trabalho para entregar o conteúdo do seu site a cada visitante.
Isso não só agiliza o seu site, mas pode ser uma grande ajuda para lidar com os picos de tráfego, já que o servidor não precisa processar todas as solicitações.
A melhor opção é você adicionar cache com um plugin do WordPress. Pois oferecerá uma grande melhoria em relação ao não uso de cache.
Aqui estão alguns dos melhores plugins de cache:
- WP Rocket
- WP Super Cache
- WP Fastest Cache
Após instalar e ativar o plugin W3 Total Cache em seu Wordpress, você pode realizar as seguintes configurações para ter um melhor desempenho:
-
Vamos a priori na opção General Settings:
-
Page Cache: Essa opção tende a reduzir o tempo de resposta de seu site e aumentar a escala do seu servidor web. Como a Umbler já disponibiliza esse tipo de cache que aumenta potencialmente o desempenho de sua aplicação, você poderá utilizá-lo gratuitamente nesta opção.
-
Minify: Essa opção irá reduzir espaços vazios, caracteres que não compõem o código em si e conteúdos como comentários e linhas sem conteúdo, visando deixar os arquivos de JS e CSS menores, com isso o tempo de carregamento desses arquivos será bem menor.
Obs. 1: Assim que você habilitar essa opção irá aparecer uma opção onde o usuário deve reconhecer que há algum risco em realizar essa operação. Note que há riscos nesse procedimento, uma vez que quando você reduz espaços vazios durante a minificação o plugin pode apagar algum caractere do css ou do js causando anomalias.Obs. 2: Como pode haver chances de habilitar essa configuração e o plugin causar anomalias em seu site, o indicado é antes de realizar essa operação é fazer um backup de seu site antes de habilitar a opção de Minify.
-
Object Cache: Essa opção tende a reduzir o tempo de resposta do servidor usando cache para operações comuns (cacheia algumas consultas no Banco de dados buscando otimizar requisições comumente realizadas pelo visitante). Caso o site for algum blog, um ecommerce ou algum outro tipo de site que faça constantes atualizações de conteúdos essa opção não é recomendada.
-
Browser Cache: Essa opção tende a reduzir as requisições do servidor diminuindo o tempo de resposta, e para isso ele armazena os dados no navegador do visitante do site.
-
CDN: Essa opção utiliza os recursos de uma CDN (Content Delivery Network - Rede de Entrega de Conteúdo. Basicamente é um grupo de servidores que estão distribuídos no mundo todo e visam acelerar a entrega de conteúdo da Web através do armazenamento de cópias de alguns arquivos de seu site) para melhorar a performance de seu site através do fornecimento dos recursos, que você utiliza em seu site, e que estão em um servidor mais próximo do usuário e com isso irá reduzir o tempo de resposta que seu site irá demorar para ser apresentado ao visitante de seu site.
Obs.: Caso utilize algum CDN, habilite a opção Enable da imagem abaixo.
-
Agora partiremos para algumas configurações específicas. Começando então por Page Cache:
-
Aqui, vamos manter a opção de Cache Posts Page que é a cópia (em cache) da nossa página inicial, Cache SSL (cache de solicitações SSL) porém vamos desmarcar a opção de: Don’t cache pages for logged in users, ou seja não será armazenado cache para usuários logados, afinal quando o usuário está logado no site ele irá realizar algumas modificações, então é importante que a visualização que ele tenha não seja alguma que esteja em cache, e sim as alterações em tempo real que ele esteja fazendo ou tenha feito. Assim tendo a visualização mais atualizada possível do site.
-
Agora vamos aumentar o intervalo de atualizações em que o cache deve ser feito, ou seja, de tantos em tantos tempos o cache ele irá se renovar. Como o site em questão é um site estático e não há tantas alterações ao longo do tempo iremos aumentar o tempo dessas atualizações para: 90000 segundos (opção não indicada para sites que tem atualizações constantes, como blogs ou ecommerces).
-
Após isso irei salvar todas essas alterações e remover o cache (caso já exista).
-
Agora vamos na opção de Minify.
-
Em HTML & XML nós iremos habilitar a minificação do HTML e XML, habilitar também a minificação em linha do CSS e do JS e a opção de remover quebras de linhas.
- Em CSS vamos habilitar a opção de remoção de quebra de linha.
- Feitos essas configurações vamos em:
-
Finalizado! Após realizados as configurações acima, fizemos várias medições para analisar então a melhora do site.
Obs.: Sempre desconsidere a primeira medição e faça várias outras em seguida, pois nas primeiras medições ele ainda estará aplicando o cache.
Em primeiro lugar, certifique-se de usar sempre a versão mais recente do WordPress. Desde a versão 3.7, o WordPress tem atualizações automáticas para lançamentos menores e atualizações de segurança. Quando uma nova atualização vier, você receberá um aviso no administrador. Não o descarte como uma tarefa para mais tarde - leva menos de um minuto e aumentará a segurança do seu site e possivelmente a velocidade.
Certifique-se de que seus plugins e temas também estejam atualizados para as versões menos bugadas, mais atualizadas, mais seguras e mais rápidas desses produtos.
Isso cuida do WordPress, mas não se esqueça dos seus servidores - especialmente da sua versão PHP. PHP é a linguagem base na qual o WordPress é escrito, e a diferença de velocidade entre a versão mais recente do PHP e as versões anteriores é dramática.
Mais de 25% dos sites WordPress, infelizmente, ainda usam PHP 5.6 ou inferior.
Um CDN é uma rede distribuída que fornece conteúdo aos visitantes de um local geograficamente mais próximo deles. Se eu fornecer uma imagem por meio de um CDN, os visualizadores nos Estados Unidos podem receber a imagem por meio de um datacenter no Texas, enquanto os europeus podem obtê-la por meio de um datacenter na Alemanha.
Diminuir a distância que os dados precisam percorrer diminui os pings e os tempos de transferência e reduz o estresse no servidor do seu site, já que o seu conteúdo estático agora é distribuído por todo o mundo.
Uma maneira fácil de começar a usar um CDN é usar o recurso Site Accelerator no plugin gratuito Jetpack. Isso irá acelerar suas imagens e arquivos estáticos, como CSS e JavaScript.
Ou você também pode usar o serviço gratuito da Cloudflare, embora isso exija um pouco mais de configuração porque você precisa alterar os servidores de nomes do seu domínio.
Em média, as imagens representam cerca de 50% do tamanho do arquivo de uma página da web. Portanto, se você puder reduzir suas imagens otimizando-as, poderá fazer uma grande melhoria nos tempos de carregamento da página de seu site.
Existem duas partes para otimizar suas imagens:
- Redimensionar - altere as dimensões reais de sua imagem para corresponder às suas necessidades. Por exemplo, se a área de conteúdo do seu tema tem apenas 800px de largura, você deve usar no máximo imagens que tenham aproximadamente 1.600 px de largura.
- Compactação - reduza o tamanho do arquivo sem perda de qualidade (compactação sem perdas ) ou com uma pequena, muitas vezes imperceptível, queda na qualidade (compactação com perdas).
Se for adequado ao seu fluxo de trabalho, você pode otimizar suas imagens antes de carregá-las no WordPress usando recursos como o Photoshop ou GIMP. Todos os editores de imagem permitem que você escolha a qualidade JPEG, portanto, use a configuração mais baixa possível. Em muitos casos, você não notará a diferença entre 100% e 60% de qualidade, mas o tamanho do arquivo pode ser reduzido pela metade (ou mais).
Se você quiser uma solução mais prática, também existem vários plug-ins que podem redimensionar e compactar automaticamente as imagens conforme você as carrega para o WordPress. ShortPixel e Imagify são duas boas opções com planos gratuitos limitados.
Se você tem um site muito lento, revisar seus plugins pode ser uma das melhores coisas a fazer. Recomendo revisar sua lista de plugins duas vezes. Em sua primeira revisão, identifique os plugins que você não usa ou não precisa, desative-os e exclua-os.
Agora que você eliminou todos os plugins desnecessários, é hora de revisar o que resta para ver se há espaço para melhorias. Certifique-se de que cada plugin é o melhor oferecido: Existem milhares de plugins no repositório, então escolha aqueles que são confiáveis, testados e de alta qualidade.
Você deve ter como objetivo ter o mínimo de plugins possível, pois ao otimizar o uso do plugin * você estará reduzindo o número de solicitações que seu site faz, o que aumenta ainda mais a velocidade.
O uso de mais plugins não tornará seu site automaticamente lento porque depende do que cada plugin realmente faz e de como está codificado. Mas, a menos que você tenha o conhecimento para analisar o desempenho de um plugin sozinho, é melhor seguir a regra geral de que mais plugins significa um site mais lento.
Concatenar (mesclar) arquivos ajuda a reduzir o número de solicitações feitas por um site. Se o seu site contém dez arquivos JavaScript e dez arquivos CSS, você está fazendo 20 solicitações. Se você mesclar todos os seus arquivos JavaScript em um único arquivo (e fizer o mesmo com o seu CSS), reduzirá suas solicitações para duas, o que economizará muito tempo de carregamento.
Minimizar arquivos é outra maneira prática de reduzir seu tamanho. O código é escrito para ser lido por humanos, mas as máquinas não precisam de todo esse espaçamento extra e nomes de variáveis legíveis. A minimização elimina tudo o que é necessário apenas para facilitar a leitura, como espaços, quebras de linha e comentários.
Alguns plugins de cache/desempenho do WordPress incluem ferramentas integradas para isso. Por exemplo, WP Rocket permite que você execute minificação e concatenação.
Se você já tem uma solução de cache, você também pode usar o plugin Autoptimize gratuito para reduzir e concatenar seus arquivos.
Tarefas de Desenvolvimento
Aqui estão os problemas mais comuns que você encontrará como resolvê-los:
Carregar scripts consome solicitações valiosas e largura de banda. Embora alguns precisam ser carregados no cabeçalho (a parte do site que carrega primeiro), a maioria funcionará bem se carregados no rodapé - a parte do site que carrega por último. No momento em que o navegador consegue carregar o rodapé do seu site, ele terá carregado o seu conteúdo, para que o visualizador possa começar a ler enquanto os scripts no rodapé são carregados.
A solução é mover o máximo possível para o rodapé. No WordPress, você pode fazer isso usando a função wp_enqueue_script () - dê uma olhada na documentação vinculada para mais detalhes.
Se você não quiser se aprofundar no código, também pode usar o plugin Async JavaScript gratuito para pelo menos adiar o carregamento de algum JavaScript no seu site
O mesmo tipo de lógica pode ser aplicado à forma como seu conteúdo é estruturado. Se sua barra lateral for carregada antes do seu conteúdo e algo der errado, ela bloqueará todo o site. Se for carregado depois do seu conteúdo, ainda pode fazer com que o site trave, mas, nessa altura, o conteúdo principal terá sido carregado.
Estruture seu código de uma forma que permita que seu conteúdo principal carregue o mais rápido possível, para que se algo der errado, os usuários tenham algo para verificar - e eles podem nem perceber os problemas.
Com o tempo, qualquer banco de dados se deteriorará. Quanto pior for o seu código, mais rápido isso acontecerá. Felizmente, o MySQL tem algumas ótimas ferramentas integradas para reparar esses problemas. Grandes bancos de dados consomem mais RAM e tornam as consultas mais lentas, o que leva a tempos de processamento mais longos, que podem adicionar até dez segundos de tempo de carregamento!
Como você pode ver, há muito o que você pode fazer para acelerar seu site! Alguns métodos são para desenvolvedores (ou para os mais aventureiros), mas há um monte de ajustes fáceis que você pode executar como um usuário regular para aumentar a velocidade do seu site, especialmente com a ajuda de alguns plugins gratuitos ou acessíveis.
Se você seguir algumas dessas dicas como os plugins que usa e realizar algumas otimizações básicas (como compactação de imagens e implementação de cache de página), você deve ter um site WordPress que pode carregar em menos de três segundos.