Aproveite os recursos modernos do navegador, como pré-carregamento, pré-busca e pré-conexão para tornar o site do WordPress mais rápido.
Como proprietário de um site, quem não gosta de fazer todo o possível para carregar a página da Web mais rapidamente?
garantindo site carrega mais rápido consistentemente em todo o mundo é um desafio. Há várias coisas que você pode fazer para carregar os recursos do site rapidamente, incluindo habilitar o seguinte dicas do navegador. Eles também são conhecidos como técnicas de pré-navegação.
Observação: as técnicas de dicas do navegador não ajudam muito quando você acessa o site pela primeira vez, mas as solicitações subsequentes são mais rápidas.
Pré-carregar
Você pode usar preload tag para dizer ao navegador para buscar alguns dos recursos estáticos antecipadamente. Podem ser uma imagem, fonte, JavaScript, CSS, scripts, vídeo, etc. Ajuda a priorizar o carregamento de recursos; portanto, o desempenho é melhorado.
O pré-carregamento seria uma boa ideia para implementar se você espera que seus usuários visitem várias páginas posteriormente. Como o loja de comércio eletrônico onde o usuário acessa a página do produto e depois verifica as informações, compara com outro produto, adiciona ao carrinho, paga, etc.
Você pode usar os seguintes plug-ins para configurar o recurso de pré-carregamento.
Melhores dicas de recursos – um plugin gratuito para configurar arquivos CSS e JS.
foguete WP – um plug-in premium para sobrecarregar o desempenho do site com muitas técnicas essenciais, incluindo pré-carregamento de cache e mapa do site.
Como você sabe se o pré-carregamento está ativado?
A maneira mais rápida de descobrir é visualizando a origem da página. Você deve ver algo como abaixo.
<link rel="preload" as="style" href="IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">Nem todos os navegadores suportam pré-carregamento durante a gravação. Então, confira o matriz de compatibilidade antes da implementação.
Pré-conectar
Você carrega recursos de outros domínios? Talvez CDN?
Caso contrário, e todos os recursos estiverem sendo carregados de seu domínio único, isso pode não ser útil.
Navegador de dicas de pré-conexão para estabelecer uma conexão com outros domínios em segundo plano para economizar tempo para Pesquisa de DNS redirecionamento, handshake TCP, negociação TLS, etc. A ideia é diminuir a latência para fornecer carregamento rápido de recursos de outro domínio.
Novamente, você pode usar o plug-in de dicas de recursos melhores mencionado acima ou o premium como desempenho importa .
Uma vez configurados os recursos necessários, você deve vê-los na fonte da página, como abaixo.
<link rel="preconnect" href="https://ANOTHERSITE.com">Observação: se você estiver carregando os recursos de um domínio que requer CORS, precisará especificar isso como crossorigin e a saída deve se parecer.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>O Preconnect é compatível com a versão mais recente do ChromeBorda, Firefox, Safari.
Pré-busca
Deixe o navegador buscar a próxima página, que você acha que será necessária quando o usuário navegar. A pré-busca fará o download dos recursos necessários e os armazenará no cache local e os servirá rapidamente quando necessário. Existem dois tipos de pré-busca.
Pré-busca de DNS – explicado abaixo
Pré-busca de link – configurado usando. Usado para pré-buscar o HTML ou recursos estáticos. Você pode pré-buscar recursos usando as um atributo.
<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">
as atributo suporta vários recursos como áudio, vídeo, script, faixa, estilo, fonte, objeto, documento, etc. A pré-busca de link pode ser configurada com a ajuda de Plug-in de dicas de recursos pré-festa .
Pré-busca de DNS
Carregando recursos de muitos domínios e deseja resolvê-los em segundo plano?
Essa configuração rápida pode ajudar a resolver todos os domínios em potencial mais cedo para que, quando os recursos forem solicitados, ele carregue mais rapidamente. Isso ajuda a diminuir a latência geral.
Digamos que você esteja carregando recursos de 3 domínios e cada domínio leva cerca de 100 ms para realizar a pesquisa de DNS, então você economizará 300 ms de latência.
Não é legal?
Você pode implementar usando o plug-in perfmatters ou adicionar o seguinte em functions.php arquivo do seu tema se você estiver confortável em editar os arquivos do tema.
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);Você pode ler mais em Documentos da web da Mozilla .
Pré-renderização
Você espera que os usuários do seu site naveguem na página em potencial?
Pré-renderização pode ajudar a carregar esses recursos em segundo plano e, quando o usuário clica nele, eles o obtêm rapidamente. Você pode conseguir isso com o plugin Pre Party Resource Hints.
A pré-renderização é adequada para uma página ou ativo leve, mas tenha cuidado com todo o site ou recursos grandes, pois pode aumentar a utilização da CPU e a largura de banda e tornar o site mais lento. Portanto, tente com o recurso menor e teste-o para garantir que não haja efeitos colaterais.
Como você pode ver, existem quatro plugins principais envolvidos para implementar as dicas do navegador no WordPress. Escolha o que você gosta e se encaixa no requisito.
Plug-in de dicas de recursos pré-festa – um plug-in gratuito oferece pré-busca de DNS, pré-busca de link, pré-renderização, pré-conexão e pré-carregamento.
Melhores dicas de recursos – uma alternativa à anterior.
O plug-in gratuito é bom, desde que seja mantido e suportado. Infelizmente, isso não acontece com muitos plugins, e é por isso que às vezes é melhor optar pela versão paga. Plugins de versão comercial são suportados profissionalmente e atualizados com o padrão WordPress e correções de segurança. Se você estiver disposto a gastar alguns dólares para otimizar o desempenho do seu site, verifique os seguintes.
foguete WP – bem conceituado, confiável por mais de 800.000 sites. Custou $ 49 para um site.
Perfmatters – um peso leve e fácil de seguir custa $ 24,95 para um site. Enquanto escrevo, ele oferece os seguintes recursos.
Isso é muita otimização.
Conclusão
O núcleo do WordPress é leve, mas fica volumoso dependendo do tema e dos plugins que você usa. E, é essencial otimizar o desempenho do seu site para uma melhor classificação de busca e conversão. As técnicas acima são fáceis de seguir, mas você não deve parar por aí.
Você também deve considerar o uso de um CDN para armazenar em cache e entregar conteúdo mais rapidamente para seus usuários globalmente. Existem muitos, mas eu recomendaria tentar SUCURI que oferece CDN e segurança, ambos.
