Aproveite os recursos modernos do navegador, como pré-carregamento, pré-busca, pré-conexão para tornar o site 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?
Garantir que o site carregue de forma mais rápida e consistente em todo o mundo é um desafio. Há várias coisas que você pode fazer para carregar os recursos do site rapidamente, incluindo habilitar as dicas do navegador a seguir. 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.
últimas postagens
Pré-carregar
Você pode usar a tag de pré-carregamento para informar 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 a loja de comércio eletrônico onde o usuário visita 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 plugins para configurar o recurso de pré-carregamento.
Melhores dicas de recursos – um plugin gratuito para configurar arquivos CSS e JS.
WP Rocket – um plugin premium para turbinar o desempenho do site com muitas técnicas essenciais, incluindo cache de pré-carregamento e mapa do site.
Como saber se o pré-carregamento está ativado?
A maneira mais rápida de descobrir é visualizando a fonte da página. Você deve ver algo como abaixo.
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
Nem todos os navegadores suportam o pré-carregamento durante a gravação. Então, confira o matriz de compatibilidade antes da implementação.
Pré-conexão
Você carrega recursos de outros domínios? Talvez CDN?
Caso contrário, e todos os recursos estão sendo carregados de seu único domínio, isso pode não ser útil.
Dicas de pré-conexão do navegador 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 idéia é diminuir a latência para fornecer carregamento rápido de recursos de outro domínio.
Novamente, você pode usar o melhor plugin de dicas de recursos mencionado acima ou o premium como questões de desempenho.
Uma vez configurados os recursos necessários, você deverá vê-los na fonte da página como abaixo.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Nota: se você estiver carregando os recursos de um domínio que requer CORS, você precisará especificar isso como origem cruzada e a saída deve ser semelhante.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
O Preconnect é compatível com a versão mais recente do Chrome, Edge, 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 – explicada abaixo
Pré-busca de link – configurada usando . Usado para pré-buscar o HTML ou recursos estáticos. Você pode pré-buscar recursos usando como um atributo.
como 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 Plugin de dicas de recursos pré-festa.
Pré-busca de DNS
Carregando recursos de vários 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 seja carregado 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 100ms para realizar a pesquisa de DNS, então você economizará 300ms de latência.
Não é legal?
Você pode implementar usando o plugin perfmatters ou adicionar o seguinte no arquivo functions.php do seu tema se 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 Mozilla.
Pré-renderização
Você espera que os usuários do seu site naveguem pela página em potencial?
O Prerender pode ajudar a carregar esses ativos em segundo plano e, quando o usuário clica nele, ele o obtém muito 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 isso 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 tenha efeitos colaterais.
Como você pode ver, existem quatro plugins principais envolvidos para implementar dicas de navegador no WordPress. Escolha o que você gosta e se encaixa no requisito.
Plugin de dicas de recursos pré-festa – um plugin 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 plugin 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. Os plugins da versão comercial são suportados profissionalmente e atualizados com o padrão do WordPress e correções de segurança. Se você estiver disposto a gastar alguns dólares para otimizar o desempenho do seu site, confira os seguintes.
WP Rocket – bem reputado, confiável por mais de 800.000 sites. Custou US $ 49 para um site.
Perfmatters – um 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 se torna volumoso dependendo de qual tema e plugins você usa. E, é essencial otimizar o desempenho do seu site para uma melhor classificação e conversão de pesquisa. 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 uma CDN para armazenar em cache e entregar conteúdo mais rapidamente para seus usuários, globalmente. Existem muitos, mas eu recomendaria tentar o SUCURI que oferece CDN e segurança, ambos.