Funcionalidades do Plugin Litespeed – Page Otimization

Olá, neste artigo iremos descrever oque são as Funcionalidades do Plugin Litespeed – Page Otimization, para ajudar no cacheamento e otimização de seu site, também informaremos quais opções recomendamos ativar ou desativar.

–Não se preocupe se no processo algo der errado, o litespeed não edita o código original de seu site, ele gera uma cópia e trabalha as configurações nesta Cópia, fique tranquilo você estará seguro se é estiver se aventurando em novas configurações ou ajustes.

Esteja ciente configurar um plugin de cache demanda de paciência e tempo *A cada vez que salvar uma opção limpe todo o cache* Este processo é lento nas primeiras vezes, a medida que você entende como é o funcionamento de cada função todo o processo se encurta para alguns minutos. *AVISO* Recomendamos que teste cada opção individualmente para ver se houve ou não quebra do carregamento do site, caso ocorra basta desativar a opção e limpar totalmente seu cache

Dentro de seu WP- ADMIN navegue no menu até LiteSpeeed Cache e selecione: Page Optimzation

CSS Settings

• CSS Minify
  Esta função irá remover do código de seu CSS todos os espaços em branco no código e os Comentários!
  Recomendamos: Ativar 

• CSS Combine
  Esta função fará a unificação de todos os CSS de seu site, logo se você tem 30 CSS ele irá juntar o código de todos em 1 único CSS, este ponto é muito importante ser analisado com Cautela se você busca velocidade e pontuação em Pagespeed /GT Metrix.

  Se seu site possuir muitos CSS sendo carregados a unificação dele poderá gerar um arquivo com peso maior que  1 Mb, e os sistemas de notas podem considerar isso ruim já que as requisições devem sempre ser rápidas e leves.Fica a sua escolha esta configuração.

  Fique tranquilo se estiver abaixo de 500Kb você deverá ficar bom com suas notas

  Recomendamos: Ativar

• CSS Combine External and Inline

  Esta função irá combinar todos os CSS externos diferente da CSS Combine que unifica os CSS locais, a CSS External irá pegar todo css vindo de fora de servidor (chatgoogle/ads…) e todo o Css que estiver lançado direto no código de seu site, gerando um novo arquivo de CSS.

  A ativação dessa função pode resolver problemas causados pelo CSS Combine.
  Recomendamos: Ativar

• CSS HTTP/2 Push

  Esta funcionalidade fará com que o servidor envie o CSS para seu navegador antes mesmo dele ser solicitado pelo HTML.

  Recomendamos: Ativar

• Load CSS Asynchronously

  Esta função fara com que o CSS de seu site carregue ao mesmo tempo que o HTML, isso tornara o carregamento de seu site muito mais rápido porem ele causa o carregamento sem formatação, para isso você deverá gerar o CSS critico  que será próxima função.

  Em nossos testes analisamos que em nossos servidores a entrega doo HTML é mais rápida que a do CSS Asynchronously.
  Como nossos servidores são no Brasil o HTML acaba sendo carregado mais rápido que o próprio CSS que será fornecido pelos servidores da QUIC. estes servidores ainda não possuem ponto de distribuição no Brasil logo essa funcionalidade não corrigira o carregamento sem formatação do site

  Recomendamos que no caso de nossos servidores mantenha: Load CSS Asynchronously desativado, porem teste pois cada caso muda o funcionamento.

  Recomendamos: Desativar

• Generate Critical CSS

  Neste ponto o servidor encaminhará para o servidor QUIC.cloud (litespeed) seu css para que ele gere o CSS Asynchronousl.
  O seu funcionamento é muito simples o servidor pegara seu css e enviara para os servidores da litespeed (quic.cloud) via Cron e sempre manterá esse css pré carregado via rede de distribuição quic
  Muitos templates já fazem o carregamento critico do CSS, recomendamos que procure pela documentação de sue template caos queira usar desta função.

  Esta função só funcionara se  CSS Asynchronously estiver ativado

  Em alguns casos dos casos recomendamos que deixe essa opção desativada caso seu template já faça isso.

• Generate Critical CSS In Background
  Esta função fará com que o servidor carregue em background o CSS critico priorizando o css para que o estrutural do site fique certo, esta função fica condicionada ao funcionamento as duas funções anteriores  Generate Critical CSS e  Load CSS Asynchronously
  Recomendamos: Ativar 

• Separate CCSS Cache Post Types (usuários avançados)

  Será feita a separação do CSS critico das suas postagens de maneira manual você tendo de listar todas as css criticas de sua escolha

  Recomendamos essa função para aqueles que já possuem mais experiência, para principiantes pode deixar em branco

• Separate CCSS Cache URIs

  Esta função server para que você lance o critical css  em line.

  Recomendamos essa função para aqueles que já possuem mais experiência, para principiantes pode deixar em branco.

• Inline CSS Async Lib

  Será feita a incorporação da biblioteca CSS assíncrona para evitar bloqueios de renderização.
  Recomendamos: Ativar

• Font Display Optimization

  Nesta função você irá definir como deseja que suas fontes sejam exibidas durante o carregamento do site:
  Recomendamos: Ativar
  Recomendamos deixar como: SWAP

Js Sessings

• JS Minify

  Irá remover todo espaçamento e comentários de suas JS

  Recomendamos: Ativar

• JS Combine
  Fará a combinação de todos os arquivos JS gerando um arquivo unico.

  Em nossos testes com Google e GT Metrix as Js não afetam criticamente sua pontuação sendo algo intermediário que você pode testar.

  Lembre-se se possuir muitas JS unifica-las poderá acabar gerando um arquivo muito grande recomendamos que tente manter abaixo de 500 Kb neste tamanho você poderá ficar tranquilo com seus carregamentos.

  Caso seja maior o ideal seria manter sem a combinação de JS já que entregar arquivos menores e rápidos pode ser uma boa opção quando se busca uma maior velocidade.

  Recomendamos: Ativar

• JS Combine External and Inline

  Esta função irá combinar todos os Js externos diferente da JS Combine que unifica os JS locais, a JS External irá pegar todo JS vindo de fora de servidor (chat/facebook/google/ads…) e todo o JS que estiver lançado direto no código de seu site, gerando um novo arquivo de JS único

  A ativação dessa função pode resolver problemas causados pelo JS Combine.
  Recomendamos: Ativar

• JS HTTP/2 Push

  Esta funcionalidade fará com que o servidor envie o CSS para seu navegador antes mesmo dele ser solicitado.

  Em alguns casos não notamos diferenças reais com a função ativa ou inativa, pois alguns templates já fazem isso

  Recomendamos: Ativar

• Load JS Deferred

  Fará o carregamento dos JS depois que todo o HTML e CSS foi carregado.

  Recomendamos: Ativar

• Load Inline JS

  Esta função definira quando seu js deverá ser carregado, recomendamos que teste com a opção recomendada DEFERRED  e caso encontre muitos erros  use no modo After DOM Ready

  Pode ocorrer problemas com o menu de alguns sites em (elementor) quanto a função Load Inline Js estiver em DEFERRED e a função Load JD deferred estiver desativada.

  Recomendamos que teste ambas as combinações se atentando sempre no desktop e mobile.

  Recomendamos: Deferred

Optimization

• CSS/JS Cache TTL

  Neste será definido o tempo de duração de cache referente a MINIFICAÇÃO e COMBINE dos css e js, é recomendamos manter o valor de: 604800, ao fim desse tempo o servidor irá gerar um novo cache do CSS ou JS, a limpeza total do cache também irá zera este ponto.

  Recomendamos: 604800

• HTML Minify

  Caracteres extras de espaço em branco, caracteres de nova linha e comentários serão removidos de todo o HTML, se esta opção estiver habilitada.

  Recomendamos: Ativar

• DNS Prefetch

  Você poderá definir DNS para que o serviço os carregue antes da abertura do conteúdo, isso melhora o carregamento de links externos ex:

  //facebook.com

  //ads.google.com

  Você poderá ler mais sobre esta função pelo link:

  https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control

• DNS Prefetch Control
  Habilite amplamente a pré-busca de DNS para todos os URLs do seu site, incluindo imagens, CSS, JavaScript e assim por diante. Isso pode melhorar a velocidade de carregamento da página.

  Recomendamos: Ativar

• Remove Query Strings

  Essa configuração remove a string de consulta dos recursos estáticos. Recursos estáticos com strings de consulta não podem ser armazenados em cache por navegadores e servidores proxy. A remoção das strings permite que sejam armazenadas em cache, o que se traduz em um carregamento de página mais rápido.

  Esta função pode passar a ignorar o Google Recaptch que você tenha em algum formulário de contato, nosso servidor por padrão já passa todas as conexões por Recptcha.

  Recomendamos que só ative esta Opção caso tenha ciência que o Google Recaptch poderá deixar de funcionar em seus formulários de contato.

• Load Google Fonts Asynchronously

  Você pode não desejar habilitar o carregamento assíncrono de todos os seus CSS, mas talvez queira apenas para as fontes do Google. Se ativada, esta opção permitirá que você carregue o Google Fonts de forma assíncrona, sem também carregar o outro CSS dessa forma. Além disso, esta opção adiciona uma pré-conexão ao Google para que as fontes possam ser baixadas mais rapidamente.

  Recomendamos ativar caso use fontes do google em seu site.

  Recomendamos: Ativar

• Remove Google Fonts

  Esta opção remove todas as fontes do Google do seu site. Certifique-se de testar isso. A menos que você tenha fontes de substituição adequadas armazenadas localmente, o estilo do seu site pode mudar drasticamente caso as fontes que ele use sejam as da google.

  Apesar de termos ativado o load das fonte do google, essa função atrelada com a anterior irá diminuir a quantia de fontes da google inserindo só as necessárias para seu site diminuindo as requests.

  Recomendamos: Ativar

• Remove WordPress Emoji
  
  
  

  Se ativada, esta configuração remove o arquivo JavaScript extra que é usado para adicionar suporte para emojis em navegadores mais antigos. Os visitantes que usam navegadores modernos com suporte nativo para emojis não notarão a diferença.

  Recomendamos Ativar, já que isso diminuirá uma request em seu site.

  Atualmente todos os navegadores tem suporte a emoji nativamente.

  Recomendamos: Ativar

• Remove Noscript Tag
  

Os pontos mais importantes em otimização de CSS / JS e HTML são esses e só com eles já se consegue obter melhores pontuações no GT metrix e Google Page Speed, além de melhorar o carregamento global de seu site melhorando a experiência com o usuário em um outro tutorial explicaremos sobre como otimizar imagens um ponto muito importante que merece um post só para o mesmo.