Como obter uma pontuação de alto desempenho no Google PageSpeed ​​Insights para WooCommerce

O desempenho do site é um aspecto essencial do web design que muitas vezes é negligenciado pelas agências. Se o seu site responder e entregar conteúdo muito rapidamente, você receberá muitos benefícios – incluindo um aumento nas conversões e melhores classificações no Google.

Na Herdl, apreciamos plenamente os benefícios que o alto desempenho pode oferecer em vários canais de marketing e consideramos a otimização do desempenho parte integrante do nosso processo.

Por que a velocidade do site é importante?

Como um site de comércio eletrônico, a taxa de conversão é um dado vital que deve formar o núcleo do seu processo de relatório. A velocidade do site tem um efeito fundamental na taxa de conversão do site, e a pesquisa apresentada pelo Google destaca os profundos benefícios de um site rápido. Em seu relatório, é fácil identificar a forte correlação entre a velocidade do site e a taxa de conversão.

O Google também reconfirmou recentemente a importância da velocidade do site como um fator de classificação: no início de 2018, eles anunciaram o Speed ​​Update como parte de sua transição mais ampla para um índice mobile-first. A atualização de velocidade foi lançada em julho de 2018 e supostamente afetou apenas uma pequena porcentagem de sites responsáveis ​​pelas experiências mais lentas do site.

Como um site de comércio eletrônico, a taxa de conversão é um dado vital que deve formar o núcleo do seu processo de relatório.

No entanto, a velocidade do site tem sido parte do algoritmo do mecanismo de busca do Google desde 2010, quando o Google PageSpeed ​​Insights foi lançado pela primeira vez. Durante o lançamento, a velocidade do site foi oficialmente nomeada como um dos sinais de classificação do Google e, desde então, foi reconhecida como um fator de classificação de SEO integral.

A Importância do Hardware e Configuração

O desempenho começa com o hardware, portanto, se seus servidores ou rede forem limitados, o desempenho inevitavelmente sofrerá.

Nossa plataforma de hospedagem foi projetada, construída e gerenciada pelo especialista em infraestrutura John Arundel, da Bitfield Consulting, e fornece hospedagem WordPress de alto desempenho com recuperação de desastres em nível de data center. Distribuímos sites em Digital Ocean e Linode, que fornecem servidores privados virtuais confiáveis ​​e escaláveis ​​executados em hardware rápido com unidades SSD e uma rede de 40 Gbit.

Para desempenho e segurança, sempre trabalhamos em um modelo de site único por servidor com um firewall por servidor . A hospedagem compartilhada é melhor evitada para sites de negócios e definitivamente deve ser evitada para o comércio eletrônico. Quando se trata de hospedagem e segurança, seja paranóico – “não corra riscos” é a melhor mentalidade a ser adotada.

É melhor evitar a hospedagem compartilhada para sites de negócios e definitivamente deve ser evitada para o comércio eletrônico.

Os servidores Herdl executam uma pilha LEMP (Ubuntu LTS, Nginx, MySQL, PHP) com gerenciamento de configuração por Puppet. O Puppet nos permite automatizar a configuração do servidor, instalação de aplicativos e gerenciamento do sistema, eliminando erros humanos durante essas tarefas repetitivas. Também é usado para automatizar backups diários de servidores, salvando backups completos de banco de dados e de sites incrementais no Amazon S3. Ao salvar backups externos no S3, garantimos que eles sejam acessíveis mesmo que um data center fique inativo.

Para uma arquitetura de servidor único, o gargalo de desempenho geralmente é o banco de dados, que pode consumir muita memória – certifique-se de ter bastante RAM e vCPUs. O desempenho do banco de dados pode ser aprimorado ainda mais usando o Redis para armazenar em cache os resultados da consulta.

A configuração padrão que acompanha o MySQL ( my.cnf ) funcionará, mas você provavelmente deseja ajustar um pouco com base nas especificações do seu servidor. Existem muitos bons artigos sobre como otimizar o MySQL para WordPress que incluem sugestões úteis e arquivos de configuração de exemplo, mas a melhor opção é ajustá-lo ao uso real do seu site – para isso, usamos este excelente script Perl.

Certifique-se de sempre testar todas as alterações de configuração em seu site de teste primeiro e comparar seus resultados usando mysqlslap (que vem com o MySQL). É uma boa ideia habilitar o log de consultas lentas do MySQL também em seu servidor de teste, pois isso pode destacar consultas problemáticas que devem ser investigadas (e também pode ser útil para fornecer consultas de teste para seu benchmarking).

Se você estiver publicando conteúdo regularmente, o banco de dados do WordPress pode ficar muito inchado devido a todas as revisões de página e postagem que ele salva automaticamente. Por padrão, não há limites para quantas revisões o WordPress salva – restringimos esse número a cinco adicionando a seguinte linha ao arquivo de configuração do WordPress ( wp-config.php ):

define( 'WP_POST_REVISIONS', 5 );

Por fim, também vale a pena otimizar seu banco de dados de tempos em tempos, mas certifique-se de fazer backup primeiro. WP Rocket, um plugin de cache do WordPress, fornece todas as ferramentas que você precisa para isso. Falarei um pouco mais sobre o WP Rocket depois.

Ferramentas de desenvolvimento

Para o desenvolvimento do WordPress, contamos com nosso próprio “sabor” especial do WordPress usando o tema inicial Sage (e fluxo de trabalho) pela equipe Roots. Isso inclui Gulp para tarefas de compilação avançadas e automatizadas, Composer para controlar dependências, incluindo o uso de plugins WordPress de terceiros (e versionamento) e npm para gerenciamento de pacotes.

Como você pode imaginar, nosso fluxo de trabalho está em constante evolução e estamos sempre procurando novas ferramentas e serviços para incorporar ao nosso processo. Nossa equipe se esforça para manter nosso código SECO e seguir os princípios BEM o mais próximo possível. A maneira como estruturamos os arquivos de tema é configurada para facilitar isso, dividindo a funcionalidade, os modelos e os ativos do tema.

Para controle de versão, usamos o Git via Bitbucket, seguindo o fluxo de trabalho do NVIE git. O código é criado e implantado automaticamente via DeployHQ, que é simples de configurar e fornece todas as opções necessárias para o desenvolvimento do WordPress. Além disso, o suporte deles é de primeira classe.

Depois que seu aplicativo estiver funcionando, é hora de medir e comparar as estatísticas vitais para que você possa ajustar e otimizar o desempenho. Para isso, usamos uma combinação de Pingdom Tools, GT Metrix e Google PageSpeed ​​Insights. Há muitas métricas a serem observadas nos relatórios que esses serviços produzem – em última análise, o tempo de carregamento e o tamanho da página são os que devem ser focados, com o objetivo de obter o menor valor possível. Isso garante que todos os usuários em todos os dispositivos (e conexões de rede) tenham a melhor experiência possível.

Quando se trata de testes entre navegadores e dispositivos, escolhemos o LambdaTest. É simples de usar, oferece um conjunto de testes abrangente e tem planos para todos os orçamentos. Ele também se integra ao Trello e ao Slack, formando uma parte essencial do nosso fluxo de trabalho.

O WP Rocket é o nosso plugin de cache preferido do WordPress e melhorará drasticamente o desempenho em qualquer site. É fácil de configurar e fornece controles muito granulares para o usuário mais avançado, o que significa que você pode ajustar sua configuração de cache. O WP Rocket se integra perfeitamente com CDNs e seu modelo de licenciamento é perfeito para agências.

Dependendo do orçamento e do site do cliente, os ativos estáticos são atendidos diretamente pelo servidor web, a partir de um CDN (como Beluga e BunnyCDN), ou por meio de serviços de otimização de imagem em tempo real (Piio e Imagekit). Para desempenho móvel, o Piio (pronuncia-se pie-o) é uma excelente escolha, pois detecta, otimiza e redimensiona imagens em tempo real antes de carregá-las lentamente – isso significa que cada dispositivo recebe imagens otimizadas e redimensionadas corretamente (sem dimensionamento no navegador).

Se não estivermos usando um serviço de otimização de imagem, o Short Pixel é nosso plugin recomendado. Ele oferece excelente otimização de imagem usando compactação com perdas, brilho ou sem perdas e também pode converter imagens para o formato WebP. Ele também pode otimizar em massa toda a sua biblioteca de mídia, e o preço também é muito competitivo.

A segurança é um componente essencial do desempenho do site. Se o seu site estiver danificado, infectado com malware ou ficar offline por meio de um ataque, ele não está funcionando de maneira ideal. Ser tão popular torna o WordPress um alvo óbvio para hackers, portanto, a segurança no nível do aplicativo é essencial. Usamos e recomendamos fortemente o WordFence, que é de longe o melhor plugin de segurança do WordPress disponível. Para sites de comércio eletrônico, escolha a licença Pro paga – os dados do cliente não são algo que você deve arriscar.

A disponibilidade também é fundamental. Não adianta ter o site mais rápido do planeta se ele está inativo e você não sabe disso. Para monitoramento em nível de servidor, usamos o Icinga para ficar de olho em todos os serviços executados em cada servidor. Também usamos o Uptime Robot para maior tranquilidade – juntos, esses dois garantem que sempre sejamos alertados prontamente sobre quaisquer problemas.

Mabl, Sentry e Fluxguard lidam com o monitoramento de aplicativos, alertando-nos sobre quaisquer problemas no nível do aplicativo. Eles também podem detectar alterações no nível de conteúdo – um bom indicador de problemas de nível de código subjacentes após uma atualização. A Mabl também faz muitas outras coisas legais, incluindo testes automatizados. É um dos nossos serviços favoritos, e definitivamente um para conferir.

À medida que o tráfego e a carga aumentam além da capacidade de um único servidor, uma arquitetura multiservidor entra em ação. Neste ponto, é altamente recomendável contratar um consultor de operações de desenvolvimento ou um membro interno dedicado de sua equipe.

Torne o desempenho parte de seus processos de design e desenvolvimento

O desempenho é uma consideração em todo o nosso processo, desde o planejamento até o design e desenvolvimento. Há um diálogo contínuo entre nossa equipe de design e desenvolvedores sobre a melhor maneira de abordar um projeto – ou mesmo elementos específicos – para criar a melhor experiência online.

Durante os estágios de planejamento, temos uma ideia firme de qual funcionalidade será necessária no site. Usar o WooCommerce é um excelente exemplo disso, pois os requisitos de hospedagem são diferentes quando fornecemos um elemento de comércio eletrônico. Os clientes estão cientes disso desde o início e são fornecidos com um conjunto diferente de opções de hospedagem.

Esse mesmo pensamento é levado para a fase de design, onde criaremos wireframes, conceitos e até animações, para representar páginas e elementos no site. É aqui que a maioria dos efeitos front-end são concebidos, e nossa equipe trabalha em conjunto para projetar algo que proporcione uma experiência incrível onde o desempenho seja parte integrante.

Achamos importante considerar todos os dispositivos como parte desse processo, levando em consideração como as experiências em dispositivos móveis e computadores podem ser diferentes.

Adotamos uma abordagem iterativa para testar durante todo o desenvolvimento, com elementos continuamente sendo ajustados. Seguimos um processo de degradação graciosa, começando com nosso conceito ideal e removendo camadas apropriadamente para dispositivos e navegadores individuais. Além disso, reservaremos um tempo especificamente para a otimização do desempenho, introduzindo o armazenamento em cache e a otimização de arquivos, bem como alterações no nível de código. Durante esta etapa, testaremos e testaremos novamente os elementos em vários dispositivos até ficarmos satisfeitos com o desempenho máximo.

O foco no desempenho em todas as etapas do nosso trabalho ajudou a garantir que os sites que entregamos sejam bem recebidos durante o lançamento e resultou na conquista de muitos prêmios. Isso inclui vários prêmios específicos de desenvolvimento, como o Awwwards' Developer Award, o Mobile Excellence Award e o Mobile Site of The Week (entre outros).

Melhore a velocidade e a segurança dos seus sites WooCommerce

Esperamos que, compartilhando algumas informações sobre o desempenho do site e detalhes sobre nossa configuração e processo, possamos ajudar os gerentes do WooCommerce a melhorar a velocidade e a segurança de seus sites. Para executar um site de comércio eletrônico de forma eficaz, o desempenho deve ser a principal prioridade, e achamos que isso só se tornará mais crítico com a prevalência de dispositivos móveis.

Se você tiver alguma dúvida ou comentário sobre nossa configuração, deixe-nos um comentário ou entre em contato.