Estudo de caso: Como aumentar rapidamente o PageSpeed sem escrever código

Introdução

A otimização do desempenho da Web acelera seu site para fornecer conteúdo rapidamente. Sites lentos frustram os visitantes, prejudicam as classificações de pesquisa e reduzem as conversões. De fato, quando se trata de SEO técnico, a velocidade da página é uma das principais categorias.

A plataforma WordPress é a base de 43,2% dos sites atuais, de acordo com a W3Techs. Entretanto, ela é conhecida por acumular rapidamente códigos inchados devido a plug-ins desnecessários e temas mal codificados.

Muitos designers que criam sites usando o WordPress não são especializados em escrever códigos. Consequentemente, a criação de um site bonito pode ser frustrante, apenas para descobrir que ele está carregando lentamente. Felizmente, existe uma solução. Neste artigo, demonstraremos como melhoramos a pontuação do Google Performance Mobile de um site de 3 para 68 sem escrever uma única linha de código.

Como testar seu desempenho atual na Web

Avaliar os principais sinais vitais atuais da Web é fundamental antes de começar a otimizar o desempenho do seu site. Para fazer isso, utilize a ferramenta gratuita Page Speed Insights do Google.

Depois que a ferramenta for carregada, insira o URL do seu site e clique em "analisar". Após um breve momento, a ferramenta gerará pontuações de desempenho para cada dispositivo móvel e desktop.

Essas pontuações são baseadas em quatro categorias:

1. Desempenho - O desempenho geral da velocidade do site é dividido em cinco categorias:

A. First Contentful Paint - Mede a rapidez com que o primeiro elemento de conteúdo aparece em uma página da Web quando ela é carregada.

B. Largest Contentful Paint - Indica o momento no processo de carregamento da página em que o conteúdo principal da página provavelmente foi carregado.

C. Total Blocking Time (Tempo total de bloqueio) - mede quanto tempo os usuários podem sofrer atrasos ou falta de resposta ao usar uma página da Web

D. Mudança cumulativa de layout - mede a quantidade de elementos que se movem inesperadamente à medida que uma página da Web é carregada.

E. Índice de velocidade - mede a rapidez com que uma página da Web aparece visualmente para o usuário à medida que é carregada.

2. Acessibilidade - Avalia a usabilidade do seu site para pessoas com deficiências.

3. Melhores práticas - avalia a eficácia com que uma página da Web adere às práticas recomendadas para um carregamento mais rápido e melhor desempenho.

4. SEO - Avalia se a sua página da Web está seguindo as recomendações básicas de otimização de mecanismos de pesquisa.

A captura de tela abaixo mostra a posição do site do nosso cliente de estudo de caso em todas essas métricas antes da otimização. Também vale a pena observar que esse site é executado no WordPress. Neste artigo, vamos nos concentrar apenas na pontuação de desempenho. Você pode ver que, antes de iniciarmos a otimização, o desktop tinha uma pontuação de 64 e o celular tinha uma pontuação de apenas 3.

Vamos ver como melhoramos esses resultados e compartilharemos nossos números finais no final deste artigo.

Aprimoramento do desempenho do site WordPress: Nossa abordagem e resultados

Cada site tem seu próprio estilo de codificação, bibliotecas e funcionalidade necessária, o que o torna único. Devido a essas diferenças, não há uma abordagem universal para a otimização da velocidade.

No entanto, qualquer pessoa pode adaptar os métodos a seguir a qualquer site WordPress para melhorar as pontuações de desempenho. Além das táticas descritas neste artigo, você também pode considerar o emprego de DevOps para ajudar a aumentar o desempenho e a segurança.

De qualquer forma, antes de fazer qualquer alteração, é essencial criar uma cópia do seu site em um servidor de desenvolvimento ou de preparação. Você pode pedir ajuda ao seu provedor de hospedagem para esse processo. Depois de preparar o site de backup, é hora de aumentar o desempenho do site.

Limpeza de plug-ins não utilizados

É comum encontrar um site WordPress repleto de plug-ins não utilizados ou desnecessários. Nosso site de estudo de caso passou por vários ciclos de desenvolvimento, cada um introduzindo de 2 a 3 novos plugins de diferentes desenvolvedores. Como resultado, o site ficou sobrecarregado com plug-ins redundantes e inchaço desnecessário de plug-ins.

Os plug-ins inativos podem prejudicar o desempenho do seu site. Eles ocupam espaço em seu servidor, podem entrar em conflito com outros plug-ins ou atualizações e impõem riscos de segurança, pois os hackers podem encontrar vulnerabilidades em seu código.

Infelizmente, não há uma maneira automatizada de fazer isso, mas vale a pena passar pelo processo manualmente. No painel do WordPress, navegue até "Plugins". Primeiro, procure os plug-ins "Inativos" e exclua-os.

Antes de prosseguir, observe que o fato de um plug-in estar "ativo" não significa que ele esteja sendo usado. Você precisará testar cada plug-in e determinar quais são necessários e identificar aqueles que não estão sendo usados.

Em seguida, você deverá remover todos os arquivos de plug-in do servidor. Às vezes, os plug-ins criam subpastas que podem permanecer mesmo depois de você ter excluído o plug-in. Você precisará acessar seus arquivos usando o FTP (File Transfer Protocol) para verificar e remover essas subpastas. Se precisar se familiarizar mais com o FTP, entre em contato com seu provedor de hospedagem para obter orientação sobre como acessar seus arquivos dessa forma.

Depois de fazer login no seu site via FTP, navegue até a pasta "wp-content" e abra-a. Procure pastas com nomes associados aos plug-ins excluídos e exclua-as. Tome cuidado para não remover pastas essenciais como "temas", "plugins", "cache", "upgrade" ou "uploads" - elas fazem parte da instalação do WordPress e devem permanecer em seu servidor. Exclua somente as pastas especificamente associadas ao plug-in excluído.

No exemplo abaixo, você pode ver como um plug-in de reserva deixou uma pasta dentro da pasta "wp-content".

Após concluir essa etapa, atualize o site de teste ou desenvolvimento em um navegador da Web para garantir que todos os elementos de funcionalidade e design permaneçam intactos (lembre-se de limpar o cache)

Dica profissional: O Plugin Organizer é uma ferramenta gratuita que oferece controle sobre quais plug-ins são carregados em páginas e publicações específicas de um site. Identifique os plug-ins usados com frequência para otimização e descarte aqueles que não estão melhorando o desempenho ou a velocidade do site.

Instalar e configurar o WP Rocket

A maioria dos designers de WordPress conhece ou já utilizou o WP Rocket. É um plugin de primeira linha para aumentar a velocidade do site, mas sua eficácia depende de como você define suas configurações. Em nosso exemplo, estamos usando a licença para um único site. Vamos analisar as configurações que aplicamos para equilibrar a otimização e manter a funcionalidade do site. Como a construção de cada site varia, talvez seja necessário ajustar as configurações de acordo com os requisitos específicos do seu site.

Depois que o plug-in estiver instalado e ativado, navegue até "Settings" (Configurações) no painel do WordPress. Em seguida, na parte inferior da lista, clique em "WP Rocket". Agora você deve ver as opções de configuração no WP Rocket.

Cache

A primeira opção que habilitaremos é "Cache > Habilitar cache para dispositivos móveis". Isso permitirá que os usuários de dispositivos móveis visualizem uma versão em cache do site. Normalmente, essa opção não interrompe as coisas no front-end; no entanto, a regra geral é verificar o site em uma janela do navegador depois de salvar cada opção. (Observação: verifique se o cache do navegador foi esvaziado)

Otimização de arquivos CSS

Agora, vamos nos aprofundar na configuração "File Optimization" (Otimização de arquivos). A primeira configuração dessa seção é "Minify CSS Files".

Esse recurso permite que o plug-in carregue uma versão condensada dos arquivos CSS. "Minificado" significa que o código é condensado em uma única linha em vez de usar retornos ou quebras de linha para espaçamento. Depois de "salvar as alterações", verifique seu site em um navegador para garantir que tudo esteja funcionando.

Se determinados estilos quebrarem após a minificação, tente adicionar o caminho do arquivo do elemento ou id/classe à seção abaixo de "Excluded CSS Files" (Arquivos CSS excluídos). Isso impedirá que o WP Rocket reduza esses arquivos específicos.

A próxima opção abaixo é "Optimize CSS Delivery". A ativação dessa opção eliminará o CSS que bloqueia a renderização, o que afeta diretamente o carregamento do seu site. Na maioria dos casos, selecionar a opção "Remove Unused CSS" é melhor do que a opção "Load CSS Asynchronously". \

Rolando para baixo um pouco mais, vemos a opção "Minify Javascript Files". A ativação dessa opção também carregará uma versão condensada dos arquivos javascript, em que o código está todo em uma linha, sem retornos ou quebras de linha.

A última opção que habilitaremos nesta seção é "Load Javascript Deferred". Essa opção permitirá que o site carregue o JavaScript depois de carregar o HTML e o CSS.

Depois de salvar as alterações, limpe o cache de navegação e carregue o site de desenvolvimento/estágio em uma nova guia para garantir que tudo permaneça intacto.

A última opção nessa tela, que não será ativada, é "Delay JavaScript Execution" (Atrasar execução de JavaScript). Em nosso exemplo, e na maioria dos sites, o menu móvel depende do JavaScript para ser exibido. Atrasar o carregamento de arquivos JavaScript até que o usuário interaja com o site pode criar a impressão de um menu com mau funcionamento.

Por exemplo, se um usuário visitar o site e sua ação inicial for tocar no botão de menu, nada ocorrerá porque a primeira interação aciona o site para carregar os arquivos JavaScript. Somente quando os usuários tocarem no botão de menu uma segunda vez, ele será aberto. Embora seja raro que a primeira ação de um usuário seja tocar no menu, concluímos que não valia a pena ter um botão de menu aparentemente quebrado. Você deve sempre procurar equilibrar o desempenho e a experiência do usuário.

Carregamento lento de imagens

Passando para a próxima seção do WP Rocket, intitulada "Media". Aqui, selecionamos a opção "Enable for Images" (Ativar para imagens). Esse recurso permite que o navegador adie o carregamento de imagens fora da visualização do usuário. Quando o usuário rola a tela e se aproxima da exibição da imagem, ela é carregada. Essa abordagem reduz significativamente o tempo de carregamento e melhora o desempenho ao diminuir o número de imagens que o navegador precisa empacotar para uma página da Web.

Passando para a próxima seção denominada "Media", ativamos a opção "Add Missing Image Dimensions". Esse recurso ajuda a minimizar as mudanças de layout durante o carregamento da página da Web. Suponha que uma imagem em uma página da Web não tenha as dimensões de exibição especificadas. Nesse caso, o navegador a dimensionará com base no dimensionamento da div ou da largura. Esse processo consome recursos do navegador e pode resultar em mudanças de tamanho durante o carregamento da página.

Ao fornecer dimensões precisas às imagens, garantimos que o navegador saiba o tamanho exato a ser carregado, reduzindo assim as mudanças de layout.

Pré-carregamento

As duas primeiras opções que ativamos nesta seção são chamadas de "Ativar pré-carregamento e pré-carregamento de links". "Activate Preloading" (Ativar pré-carregamento) detecta o mapa do site e salva todos os URLs em um banco de dados. Em seguida, ele garantirá que seu cache seja sempre pré-carregado. Normalmente, isso não causa nenhum conflito com o front-end. Apenas certifique-se de verificar novamente o front-end do seu site.

Com o "Pré-carregamento de link" ativado, ele aumentará a velocidade percebida do seu site, permitindo que o navegador carregue a página de qualquer link quando o usuário passar o mouse sobre ele. Se o usuário clicar no link, a página será carregada rapidamente.

Abaixo das opções de pré-carregamento, temos a opção "Prefetch DNS Requests". Isso ajuda a acelerar a entrega do código por terceiros. Em nosso exemplo, o site usava alguns produtos do Google, incluindo o Google Tag Manager. Sempre que o site era carregado, o navegador precisava solicitar o código correspondente do Google Tag Manager. Uma viagem de ida e volta que pode consumir recursos preciosos. A pré-busca permite que o navegador faça a pré-busca do domínio do terceiro para que ele tenha uma parte das informações pronta.

Para encontrar códigos de terceiros no seu site, volte ao relatório do Page Speed Insights, role para baixo e procure uma seção intitulada "Reduzir tempo de execução de Javascript". Expanda essa opção e selecione "Show 3rd Party Code" (Mostrar código de terceiros). Na parte inferior da lista, você verá os domínios que estão adicionando recursos ao seu site.

Copie esses domínios e adicione-os à seção de DNS de pré-busca do WP Rocket.

Você também notará uma seção para pré-carregar fontes. Em nosso exemplo, continuamos a usar o Google Fonts; no entanto, para uma melhor otimização, você pode converter seus arquivos de fonte para o formato .woff e armazenar as fontes em seu servidor. Isso reduz o tempo de carregamento, eliminando uma viagem de ida e volta de terceiros para o navegador.

Agora, selecione "salvar alterações".

Compressão de imagens

Agora, navegue até a seção "Image Optimization" (Otimização de imagens) no WP Rocket e instale o plug-in "Imagify". Desenvolvido pela equipe do WP Rocket, o Imagify fornece uma solução eficiente para otimizar todas as imagens do seu site e manter a otimização para novos uploads.

A diretriz geral é manter as imagens em seu site com menos de 100 KB. Se você optar por não usar o Imagify, deverá redimensionar suas fotos manualmente.

Você pode fazer isso usando duas ferramentas gratuitas: tinypng.com e cloudconvert.com.

Meu processo envolve primeiro o upload da imagem para o TinyPNG para reduzir o tamanho do arquivo. Em seguida, converto essa imagem em um formato .webp usando o CloudConvert. Monitorar a qualidade e o tamanho do arquivo durante todo o processo é essencial para evitar a otimização excessiva.

Uso do Asset Cleanup para eliminar códigos não utilizados

O terceiro processo dessa otimização foi utilizar o plug-in Asset CleanUp. Ele permite que você descarregue arquivos específicos em determinadas páginas do seu site.

Para localizar arquivos que estão sendo carregados, mas não estão sendo usados, usaremos o Chrome Dev Tools.

1. Primeiro, abra seu site em uma janela do Chrome. Passe o mouse sobre a página da Web e clique com o botão direito do mouse. Vá para a parte inferior da janela pop-up e selecione "inspecionar".

2. Com a janela de inspeção aberta, navegue até o meio do caminho e clique no menu suspenso de três pontos. No menu suspenso, clique em "Cobertura".

Agora, clique no botão "recarregar" com a guia de cobertura aberta.

Isso atualizará a página e começará a rastrear todos os arquivos que estão sendo carregados na página. Depois que a página for totalmente carregada, avalie a lista e procure arquivos que tenham 100% de dados não utilizados. No exemplo abaixo, encontramos um arquivo CSS que pesa 16,5 KB, mas o código não está sendo usado nessa página. \

Compile uma lista dos URLs de todos esses arquivos em um documento separado. Precisaremos deles na próxima etapa.

Agora, acesse o painel do WordPress e vá para "Plugins". Prossiga para instalar e ativar o plug-in Asset CleanUp. Depois de ativado, vá para "Pages" e localize a página que está otimizando. Passe o mouse sobre ela e clique em "editar". Na tela de edição da página, role até a parte inferior para ver a lista de arquivos carregados nessa página fornecida pelo Asset CleanUp.

Em seguida, consulte a lista de arquivos não utilizados que você salvou anteriormente e encontre os URLs correspondentes. Agora você pode optar por descarregar esses arquivos dessa página específica.

A seleção de " unload site-wide " geralmente não é recomendada," pois esse arquivo pode ser usado em outras páginas. Lembre-se de limpar o cache e verificar a página em uma janela do navegador para garantir que a funcionalidade e o design permaneçam intactos.

Repita esse processo de limpeza de ativos para o maior número possível de modelos ou páginas de alto tráfego. E é isso! Após essas implementações simples, aumentamos a pontuação de desempenho do site de 3 para 68 no celular e de 64 para 91 no desktop. Aumentar as métricas do PageSpeed Insight é uma das muitas etapas que também ajudarão a aumentar a visibilidade móvel nos mecanismos de pesquisa, bem como no desktop.

Conclusão

Em conclusão, a otimização das pontuações de desempenho é fundamental para melhorar a classificação de pesquisa do seu site e a experiência geral do usuário. Você pode melhorar significativamente suas pontuações com o mínimo de esforço seguindo as estratégias descritas neste artigo e utilizando os plug-ins recomendados. Se precisar de ajuda para otimizar seu site, entre em contato conosco ou visite a Huely Inc.