• Otimização e velocidade do site WordPress

    Deixe o site rápido com o LiteSpeed Cache: medir a velocidade, configurar o cache, deixar arquivos e imagens mais leves e conferir o resultado no PageSpeed.

    • Passo 1
      +
      • Antes de instalar qualquer plugin, meça a velocidade do site. Esse número de partida mostra no final o quanto o site melhorou.
      • Acesse pagespeed.web.dev, cole o endereço do site e clique em Analisar.
      • Olhe primeiro a aba Celular. O Google usa a versão de celular para avaliar o site, e ela quase sempre tem a nota mais baixa.
      • Anote a nota de desempenho e tire um print do resultado para comparar depois.
      • As métricas que aparecem no relatório
        +
        • LCP: o tempo até o maior elemento da tela aparecer, normalmente o banner ou a imagem do topo. O ideal é ficar abaixo de 2,5 segundos.
        • CLS: o quanto a página "pula" enquanto carrega. O ideal é ficar abaixo de 0,1.
        • INP: o tempo que o site leva para reagir a um clique ou toque. O ideal é ficar abaixo de 200 milissegundos.
        • TBT e Speed Index: mostram o quanto o JavaScript trava a página e a rapidez com que o conteúdo aparece na tela.

      • A nota muda um pouco a cada teste. Rode duas ou três vezes e considere a média, sempre na mesma aba.

    • Passo 2
      +
      • Existem vários plugins de otimização para WordPress, alguns gratuitos e outros pagos. Todos fazem o mesmo trabalho principal: guardar uma cópia pronta das páginas (cache) e deixar os arquivos do site mais leves.
      • Plugins gratuitos
        +
        • LiteSpeed Cache GRÁTIS É o que usamos nesta aula. Funciona completo em hospedagens com servidor LiteSpeed, como a Hostinger.
        • WP Fastest Cache e W3 Total Cache GRÁTIS Opções para hospedagens que não usam servidor LiteSpeed.
      • Plugins pagos
        +
        • WP Rocket PAGO Muito bom e fácil de configurar. Funciona em qualquer hospedagem e já entrega boa parte da otimização ativada assim que é instalado.
        • FlyingPress e Perfmatters PAGO Outras opções pagas que também aparecem bastante em sites WordPress.
      • Aula completa do WP Rocket
        +
        • Se você preferir usar o WP Rocket, a aula abaixo mostra a configuração completa e atualizada.
        • Conhecer o WP RocketPlugin pago, funciona em qualquer hospedagem

      • Use só um plugin de cache por site. Dois plugins de cache ativos ao mesmo tempo brigam entre si e costumam quebrar o layout ou deixar o site mais lento.

    • Passo 3
      +
      • O LiteSpeed Cache é gratuito e tem todo o poder quando o site está numa hospedagem com servidor LiteSpeed. A Hostinger usa esse servidor, então o plugin funciona completo por lá.
      • No painel do WordPress, vá em Plugins > Adicionar novo, pesquise por LiteSpeed Cache, instale e ative. Nos sites WordPress criados pelo painel da Hostinger, ele costuma vir instalado.
      • Se houver outro plugin de cache ativo, desative e exclua antes de configurar o LiteSpeed.
      • No menu lateral vai aparecer o item LiteSpeed Cache. É por ele que fazemos todas as configurações.
      • Gerar a chave do QUIC.cloud
        +
        • Vá em LiteSpeed Cache > Geral e clique no botão para solicitar a chave de domínio (Domain Key).
        • Aguarde alguns minutos e atualize a página até a chave aparecer como aprovada.
        • A chave libera os serviços on-line gratuitos do plugin, como a otimização de imagens e a geração do CSS crítico.
      • Contratar a Hostinger com descontoCupom já aplicado no link
    • Passo 4
      +
      • O jeito mais rápido de começar é aplicar um pacote de configurações pronto. O plugin chama esses pacotes de Presets.
      • Vá em LiteSpeed Cache > Presets.
      • Escolha o pacote Avançado (Recomendado) e clique em Aplicar. Ele liga o cache e as otimizações mais seguras de uma vez.
      • O plugin salva um backup das configurações anteriores. Se algo der errado, dá para voltar na mesma tela, em Histórico.
      • Os pacotes Agressivo e Extremo apertam mais a otimização, mas têm mais chance de quebrar menus, sliders e formulários.

      • Depois de aplicar o pacote, abra o site numa janela anônima e confira menu, botões, formulário e página no celular antes de seguir para os ajustes finos.

    • Passo 5
      +
      • O cache guarda uma versão pronta de cada página. Assim o servidor não precisa montar a página do zero a cada visita, e ela abre bem mais rápido.
      • Em LiteSpeed Cache > Cache, deixe ligada a opção Ativar cache.
      • Deixe desligado o cache de usuários logados. Quem está logado precisa ver as alterações na hora.
      • Cache para celular pode ficar desligado quando o site é responsivo, como os sites feitos no Elementor.
      • Na aba Navegador, ligue o cache do navegador. O visitante que volta ao site não baixa de novo imagens e arquivos que já tem.
      • Na aba Limpar, deixe marcada a limpeza automática ao atualizar páginas e posts.

      • Sempre que editar o site e a mudança não aparecer, use o botão Limpar tudo (Purge All), no topo do painel do WordPress, no ícone do LiteSpeed.

    • Passo 6
      +
      • Em LiteSpeed Cache > Otimização de página ficam os ajustes que deixam o código do site mais leve. Ligue uma opção de cada vez e teste o site entre uma e outra.
      • Aba CSS
        +
        • Minificar CSS: ligado. Tira espaços e comentários desnecessários dos arquivos.
        • Gerar UCSS e Carregar CSS de forma assíncrona: ligados. Precisam da chave do QUIC.cloud e fazem o topo da página aparecer mais rápido.
        • Combinar CSS: teste com cuidado. Em alguns sites ajuda, em outros quebra o layout.
        • Exibição de fonte: escolha Swap, para o texto aparecer logo com uma fonte do sistema enquanto a fonte do site carrega.
      • Aba JS
        +
        • Minificar JS: ligado.
        • Combinar JS: desligado no começo. É a opção que mais quebra sites feitos com Elementor.
        • Carregar JS: escolha Diferido. A opção Atrasado deixa a nota mais alta, mas pode travar menu, slider e pop-up.
      • Aba HTML
        +
        • Minificar HTML: ligado.
        • Carregar Google Fonts de forma assíncrona: ligado, se o site usa fontes do Google.
      • Aba Mídia
        +
        • Lazy load de imagens: ligado. As imagens de baixo só carregam quando a pessoa rola a página.
        • Adicionar tamanhos ausentes: ligado. Evita que a página pule enquanto as imagens carregam.
        • Na aba Exclusões de mídia, coloque a logo e a imagem principal do topo. Essas precisam aparecer na hora, sem esperar o lazy load.

      • Quebrou alguma coisa depois de ligar uma opção? Desligue a última que você ativou, clique em Limpar tudo e teste de novo. Assim você descobre rápido qual opção não combina com o seu site.

    • Passo 7
      +
      • Imagem pesada é a principal causa de site lento. O ajuste tem duas partes: deixar cada imagem no tamanho certo com o plugin Smush e trocar o formato para WebP com o LiteSpeed Cache.
      • Tamanho certo com o Smush
        +
        • No painel do WordPress, vá em Plugins > Adicionar novo, pesquise por Smush, instale e ative. A versão gratuita já resolve.
        • Vá em Smush > Otimização em massa (Bulk Smush) e ligue a opção Redimensionar imagens originais (Resize original images).
        • Defina a largura e a altura máximas, como 1920 pixels. Uma foto de celular ou de banco de imagens costuma vir com mais de 4000 pixels, bem maior do que qualquer tela.
        • A partir daí, toda imagem nova já entra no tamanho certo. Para as imagens que já estão no site, clique em Otimização em massa.
        • Deixe desligado o lazy load do Smush. O LiteSpeed Cache já faz o lazy load, e os dois ligados ao mesmo tempo entram em conflito.
      • Formato WebP no LiteSpeed Cache
        +
        • Vá em LiteSpeed Cache > Otimização de imagem, na aba de configurações.
        • Ligue a solicitação automática por cron e a troca da imagem pela versão WebP. O WebP fica bem mais leve que o JPG e o PNG, com a mesma qualidade.
        • Volte à aba Resumo e clique em Enviar solicitação de otimização. O QUIC.cloud processa as imagens e devolve as versões em WebP.
        • Os originais ficam guardados. Se quiser desfazer, dá para restaurar na mesma tela.

      • A imagem do topo da página é a que mais pesa na métrica LCP. Confira se ela está no tamanho certo e já aparece em WebP antes de qualquer outra.

    • Passo 8
      +
      • Com o tempo, o banco de dados acumula revisões de páginas, rascunhos automáticos, itens da lixeira e dados temporários. Limpar isso deixa o painel e o site mais leves.
      • Vá em LiteSpeed Cache > Banco de dados.
      • Clique em Limpar tudo, ou limpe item por item: revisões, rascunhos automáticos, lixeira, spam e transientes expirados.
      • Clique também em Otimizar tabelas.
      • Na aba de configurações, limite o número de revisões guardadas por página, por exemplo, 5.

      • Faça um backup do site pelo painel da Hostinger antes de limpar o banco de dados. A limpeza não tem botão de desfazer.

    • Passo 9
      +
      • O Elementor também tem opções próprias de desempenho. Elas somam com o LiteSpeed e ajudam principalmente na nota de celular.
      • Vá em Elementor > Configurações > Recursos (Features) e deixe ativadas as opções de carregamento otimizado de recursos e de CSS.
      • Em Elementor > Configurações > Desempenho (Performance), ligue o carregamento das Google Fonts no próprio servidor e o lazy load das imagens de fundo.
      • Ainda em Desempenho, ative a otimização da imagem principal (LCP), quando a opção aparecer na sua versão.
      • Use contêineres (Flexbox) em vez de seções e colunas antigas. Eles geram menos código na página.
      • Evite vídeo de fundo e sliders pesados no topo da página, principalmente na versão de celular.

      • Depois de mudar as configurações do Elementor, vá em Elementor > Ferramentas e clique em Regenerar arquivos e dados. Em seguida, limpe o cache do LiteSpeed.

    • Passo 10
      +
      • Hora de conferir o resultado. Limpe o cache, meça de novo e compare com a nota do Passo 1.
      • Clique em Limpar tudo no LiteSpeed e abra o site uma vez numa janela anônima, para o cache ser criado.
      • Rode o PageSpeed de novo, na aba Celular, e compare com o print do começo.
      • Se a nota ainda estiver baixa, abra os itens em vermelho do relatório. Eles mostram exatamente qual imagem ou arquivo está pesando.
      • Quando o site quebrar depois da otimização
        +
        • Desligue as opções mais sensíveis, nesta ordem: Combinar JS, Carregar JS atrasado, Combinar CSS e Carregar CSS de forma assíncrona. Limpe o cache e teste após cada uma.
        • Em LiteSpeed Cache > Ferramentas (Toolbox), existe a opção de desativar todos os recursos por um tempo, para confirmar se o problema vem do plugin.
        • Se o problema for num script específico, como o do WhatsApp ou do formulário, coloque o arquivo na lista de exclusões da aba JS.
        • Para voltar tudo como estava, abra LiteSpeed Cache > Presets > Histórico e restaure o backup das configurações.
      • Prompt: entender o relatório do PageSpeed
        +
        • Prompt: entender o relatório do PageSpeed
          Meu site é feito em WordPress com Elementor e uso o plugin LiteSpeed Cache na Hostinger.
          Rodei o PageSpeed Insights na versão de celular e vou colar abaixo os itens do relatório (as oportunidades e os diagnósticos em vermelho e laranja).

          Me explique em linguagem simples o que cada item significa, qual deles mais pesa na nota e o que eu devo ajustar no LiteSpeed Cache, no Elementor ou nas imagens para resolver. Coloque em ordem de prioridade e diga o que testar depois de cada ajuste.

          [cole aqui os itens do relatório]

      • Nota 100 não é obrigatória. Um site acima de 80 no celular, com as métricas em verde, já carrega rápido para o visitante e agrada o Google.