Page Speed com Orçamento Limitado: Maneiras Econômicas de Aumentar o Desempenho do Site

Page Speed com Orçamento Limitado

Como consultor de Core Web Vitals, recebo muitos pedidos diferentes de suporte para pagespeed. E sim, às vezes não há um orçamento grande. Se for esse o caso, preciso ser ainda mais eficiente com o meu tempo e realizar apenas otimizações de alto ganho / baixo esforço. Neste artigo, exploraremos estratégias práticas e econômicas para elevar o desempenho do site e oferecer uma experiência de usuário perfeita.

Dica de Core Web Vitals: O serviço mais acessível que ofereço é o suporte Core Web Vitals de 2 horas! Em 2 horas vou ajudá-lo a definir uma estratégia eficaz que corrigirá os problemas mais urgentes para lhe dar o melhor retorno sobre o seu investimento!

Agende agora!

Descubra os problemas primeiro

Ao otimizar a Web Performance com um orçamento limitado, precisamos ter certeza absoluta de que estamos otimizando da forma mais eficaz possível. Isso significa que primeiro precisamos saber qual é o verdadeiro problema.

Podemos usar o excelente e gratuito PageSpeed Insights para consultar os dados CrUX. Os dados CrUX são a única fonte de dados que importa, pois é a fonte de dados que o Google usa.

Dados CrUX aprovados!

Dados CrUX reprovados!

Abaixo da pontuação CrUX, você verá uma auditoria lighthouse. 

Deixe-me ser claro sobre a auditoria lighthouse! Neste momento não nos importamos com o lighthouse. Por quê? Porque ele não mede os Core Web Vitals. Claro, o lighthouse é uma ferramenta de teste incrível e sinta-se à vontade para explorar todas as suas sugestões, mas como estamos com um orçamento limitado, nos preocupamos em passar nos Core Web Vitals. Não nos importamos em passar em testes sintéticos agora!

De volta aos dados CrUX. Aqui estão algumas diretrizes a seguir se você estiver com um orçamento limitado! Comece a investigar os Core Web Vitals nesta ordem exata e concentre-se nesses problemas primeiro!

• Se você estiver reprovando no Time to First Byte, corrija isso primeiro!
• Se você estiver reprovando no First Contentful Paint, corrija os recursos que bloqueiam a renderização (adie scripts e otimize estilos)
• Se você estiver reprovando no Largest Contentful Paint, priorize os recursos necessários para esse LCP (como fontes ou imagens)
• Se você estiver reprovando no CLS, adicione largura e altura a todas as imagens, encontre e remova transições CSS e reserve espaço para elementos de renderização tardia (como anúncios, filtros de produtos, etc.)
• Se você estiver reprovando no Interaction to Next Paint, é muito provável que esteja usando muito JavaScript no momento errado. Remova scripts/plugins desnecessários, use uma ferramenta RUM como o CoreDash para encontrar os scripts mais lentos

Otimizando Imagens com Responsabilidade

As imagens contribuem para os Core Web Vitals de várias maneiras diferentes. Elas costumam ser os maiores contribuintes para o tamanho da página web. Ao aproveitar técnicas eficientes de compressão de imagem e utilizar formatos de imagem modernos como o WebP, os proprietários de sites podem manter a qualidade visual enquanto reduzem significativamente os tempos de carregamento. Muitas vezes as imagens se tornam o elemento Largest Contentful Paint. Isso significa que temos que priorizar essas imagens LCP importantes e despriorizar as imagens menos importantes e abaixo da dobra (below-the-fold).

1. Converta Imagens para WebP gratuitamente

Existem muitas ferramentas, soluções e plugins gratuitos disponíveis que permitirão converter imagens para formatos mais recentes, rápidos e modernos como o WebP. Para WordPress, por exemplo, eu sugiro o excelente e gratuito WebP Express

2. Implemente Lazy loading

O lazy loading sinalizará ao navegador que uma imagem não deve ser carregada até que esteja (quase) na janela de visualização visível (a parte visível da página). Se você tiver 15 imagens em uma página e apenas 3 estiverem na parte visível da página, poderá adicionar com segurança loading="lazy" às imagens que não estão na janela de visualização visível. 

Existem 2 maneiras de resolver isso. A primeira é habilitar o lazy loading em seu CMS. Isso adicionará o lazy loading a todas as imagens. Em seguida, consulte a documentação sobre como remover o lazy loading das imagens que são visíveis e importantes. A outra maneira é adicionar manualmente loading="lazy" a imagens abaixo da dobra.

<img loading="lazy" src="image.jpg">

3. Configure a fetchpriority da imagem

Ao adicionar fetchpriority="high" a uma tag de imagem, podemos sinalizar ao navegador que essa imagem é mais importante do que as outras imagens e deve ser baixada com uma alta fetchpriority. E embora eu esteja ciente de que existem maneiras melhores que incluem o pré-carregamento de imagens e 103 early hints, configurar a fetchpriority é simples, rápido e eficaz! O processo é simples: basta identificar a imagem mais importante em sua página, editar o template da própria página e adicionar fetchpriority="high" à imagem. Ficará mais ou menos assim:

<img fetchpriority="high" src="image.jpg">

2. Aproveitando o Caching do Navegador para Consistência

Se você estiver usando uma hospedagem econômica, é provável que o servidor web não esteja configurado de forma otimizada. Um dos erros que encontro regularmente é o caching do navegador mal configurado.  O caching do navegador permite que recursos acessados com frequência, como imagens, scripts e folhas de estilo, sejam armazenados localmente, reduzindo o tempo de carregamento para visitantes recorrentes. Configure cabeçalhos de caching para encontrar um equilíbrio entre o desempenho ideal e garantir que os usuários recebam as atualizações de conteúdo mais recentes.

Se você estiver usando o Apache como servidor web, basta criar um arquivo chamado .htaccess no diretório raiz (base) do seu site e adicionar estas linhas

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Se você estiver usando um servidor web diferente como o NGINX, entre em contato com seu provedor de hospedagem e aponte para eles este artigo!

3. Considere uma CDN gratuita ou econômica como o CloudFlare

Explore os benefícios das Content Delivery Networks (CDNs) para distribuir conteúdo estático em servidores em todo o mundo. Embora as CDNs premium ofereçam recursos avançados, mesmo as opções gratuitas ou econômicas ainda podem fornecer um aumento significativo na velocidade e confiabilidade da página.

No plano gratuito:

No plano gratuito, você receberá muitas das "coisas boas", como 

1. DNS super rápido. Os servidores DNS do CloudFlare são gratuitos e provavelmente superarão os servidores DNS do seu provedor de hospedagem econômico. Só por esse motivo já é uma ótima ideia mudar para o CloudFlare 
2. HTTP/3. O CloudFlare utiliza os protocolos mais recentes e os métodos de compressão mais rápidos. Sem entrar em muitos detalhes, tenha certeza de que isso acelerará sua rede em pelo menos 10%.
3. Caching de Navegador consistente. O CloudFlare tem um histórico muito forte quando se trata de fazer cache de recursos estáticos. A configuração padrão provavelmente é melhor do que a que você tem no momento!
4. Edge caching para recursos estáticos. O CloudFlare fará cache de versões de seus recursos estáticos como imagens, scripts e arquivos css, e servirá diretamente ao usuário final de sua edge network. Isso elimina a necessidade de viagens de ida e volta para seu servidor de origem.
5. Rocket loader. O Rocket loader adiará o carregamento de scripts e lidará com todas as complicações que surgem a partir disso. O Rocket loader é um método rudimentar, mas se você não conseguir adiar os scripts manualmente, isso provavelmente melhorará as métricas de paint como Largest Contentful Paint.

No plano Pro

Uma das primeiras coisas que sempre digo quando vejo um plano gratuito do CloudFlare é 'vá para o pro!'. Se os $25 forem algo que você pode pagar e está disposto a gastar em um site mais rápido, você provavelmente deve considerar isso.

1. Todos os recursos gratuitos. Obviamente o plano pro vem com todos os recursos gratuitos.
2. CloudFlare APO para WordPress. O APO para WordPress é uma solução completa que fará cache de suas páginas na edge network se os visitantes não estiverem logados. Isso pode acelerar enormemente o time to first byte. 
3. Otimização de Imagem Sem Perdas e Com Perdas. Uma das principais vantagens de usar a versão pro do CloudFlare é a otimização de imagem deles. O CloudFlare irá converter e fazer o cache de imagens no formato webp e servi-las apenas para os visitantes que aceitarem esses formatos.

4. Hospede você mesmo o máximo que puder!

Outra otimização simples e eficaz é auto-hospedar 'recursos estáticos'. Em muitos sites, os recursos estáticos são hospedados em CDNs externas (não confunda isso com a sua própria CDN). Por exemplo, o jQuery é hospedado em  https://code.jquery.com/,  o Bootstrap é hospedado em https://cdn.jsdelivr.net e as suas fontes são hospedadas em https://fonts.googleapis.com. Eu entendo o apelo, essas CDNs apresentam-se como fáceis e rápidas, mas usar isso é na verdade uma péssima ideia e tornará seu site mais lento!

A ideia de usar uma CDN compartilhada para esses tipos de arquivos era boa na época em que os navegadores ainda podiam compartilhar esses arquivos entre sites. Esses dias ficaram no passado. O resultado é que um novo visitante sempre precisa baixar o arquivo estático e ele precisa de uma nova conexão com um novo servidor para cada arquivo. E essas novas conexões para esses novos servidores podem consumir muito tempo extra.

A solução é hospedar você mesmo esses arquivos de terceiros. Fazer isso é fácil, basta baixar o arquivo, colocá-lo no seu servidor e alterar a referência para esse arquivo.

5. Carregamento de Script Assíncrono

Um grande gargalo podem ser os 'blocking scripts' no cabeçalho da página. Esses scripts podem às vezes atrasar o carregamento da página em até 20 segundos! Agora, adiar esses scripts não é nada difícil. Basta adicionar defer à tag script e pronto. Se você puder, faça isso! Edite o template e altere o seu script da seguinte forma:

<!-- old blocking script tag -->
<script src="script.js"></script>

<!-- new deferred script tag -->
<script defer src="script.js"></script>

Mas existem armadilhas! Adicionar defer a tags de script pode causar todos os tipos de problemas e erros de dependência. E como você tem um orçamento limitado, tenho que presumir que você não tem os meios para contratar um especialista em JavaScript para corrigir todos os problemas que possam ocorrer. Portanto, tente adiar seus scripts e verificar se há erros (pressione Ctrl-Shift-I no Chrome e verifique a guia console). Se não houver problemas após o teste... você é um dos poucos sortudos! Se houver problemas, você provavelmente deve recorrer a uma das seguintes soluções:

Use o Rocket loader 

Conforme discutido, a versão gratuita do CloudFlare dará acesso ao Rocket Loader. Isso adiará todos os scripts de uma página. De modo algum é perfeito, mas na maioria das vezes fará um trabalho muito bom.

Use um plugin

A maioria dos sites baseados em CMS tem um grande repositório de plugins. Existem muitos plugins que permitirão adiar o JavaScript e lidar com todas as complicações que podem surgir com o adiamento de scripts.

6. Caching caching caching!

Quando você está com um orçamento limitado e não quer gastar muito em hospedagem, o caching é uma das maneiras mais eficazes de acelerar um site. O caching é especialmente eficaz contra um alto time to first byte. O caching pode ser feito em diferentes níveis. 

Cache do lado do cliente: Configure o seu servidor web para instruir o navegador a fazer o cache do maior número possível de recursos estáticos. Isso diminuirá a carga em seu servidor.

Object Cache:  O object cache pode ser usado para armazenar dados que podem ser computacionalmente caros para serem gerados novamente, como o resultado de consultas complexas de banco de dados. Peça ao seu provedor de hospedagem para instalar o Redis ou Memcached.

Full Page Cache: Se você estiver usando um CMS, provavelmente vai querer adicionar um cache de página inteira (full page cache) ao seu site. Para WordPress, boas opções são o WP Fastest Cache ou WP Core Web Vitals

7. Faça escolhas estratégicas de hospedagem

Quando se trata de hospedagem, vale a pena pesquisar e o host mais caro nem sempre é o mais rápido. Geralmente você está procurando um plano de hospedagem otimizado para o seu CMS, porque quem quer fazer tudo acaba não fazendo nada direito!  Procure provedores que ofereçam servidores otimizados. Uma escolha estratégica de hospedagem pode fazer uma diferença considerável na velocidade do site.

8. Monitoramento e Análise Contínuos

Implemente uma estratégia de monitoramento robusta com ferramentas acessíveis como o [url =https://coredash.app]CoreDash[/url] Faça auditorias regulares no desempenho de seu site para identificar novas oportunidades de otimização e garantir melhorias consistentes de velocidade.