Implementando pré-carregamento, pré-busca e pré-conexão no WordPress

Aproveite os recursos modernos do navegador, como pré-carregamento, pré-busca e pré-conexão, para acelerar o site do WordPress.


Como proprietário do site, que não gosta de fazer o possível para carregar a página da Web mais rapidamente?

Garantir que o site seja carregado de maneira 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 ativar o seguinte dicas do navegador. Eles também são conhecidos como técnicas de pré-navegação.

Nota: 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é-carregamento

Você pode usar a tag preload para instruir o navegador a buscar alguns dos recursos estáticos mais cedo. Eles podem ser uma imagem, fonte, JavaScript, CSS, scripts, vídeo, etc. Ajuda a priorizar o carregamento de recursos; portanto, o desempenho é melhorado.

É recomendável implementar o pré-carregamento se você espera que seus usuários visitem várias páginas posteriormente. Como a loja de comércio eletrônico em que o usuário visita a página do produto e, em seguida, verifica as informações, compara com outro produto, adiciona ao carrinho, paga, etc..

Você pode usar os seguintes plug-ins para configurar o recurso Pré-carregamento.

Melhores dicas de recursos – um plugin gratuito para configurar arquivos CSS e JS.

WP Rocket – um plugin 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 fonte da página. Você deve ver algo como abaixo.

Nem todos os navegadores oferecem suporte à pré-carga 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 todo recurso esteja sendo carregado em seu único domínio, isso pode não ser útil.

Pré-conectando o navegador de dicas 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 acima mencionado ou o premium, como perfmatters.

Depois de configurar os recursos necessários, você deverá vê-los na fonte da página, como abaixo.

Nota: se você estiver carregando os recursos de um domínio que requer o CORS, precisará especificar que, como a crossorigin e a saída devem se parecer com.

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 DNS – explicado abaixo

Pré-busca do link – configurado usando. Usado para pré-buscar os recursos estáticos ou HTML. 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 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, portanto, quando os recursos são solicitados, ele carrega mais rapidamente. Isso ajuda a diminuir a latência geral.

Digamos que você esteja carregando recursos de três domínios, e cada domínio leva cerca de 100 ms para realizar a pesquisa de DNS, e você estará economizando uma latência de 300 ms.

Não é legal?

Você pode implementar usando o plug-in perfmatters ou adicionar o seguinte no arquivo functions.php do seu tema, se quiser editar os arquivos de tema.

// * Pré-busca DNS
função dns_prefetch () {
eco ‘

}
add_action (‘wp_head’, ‘dns_prefetch’, 0);

Você pode ler mais em Documentos da web do Mozilla.

Pré -ender

Você espera que os usuários do site naveguem na página em potencial?

O Prerender pode ajudar a carregar esses ativos em segundo plano e, quando o usuário clica nele, eles o obtêm muito rapidamente. Você pode conseguir isso com o plug-in Dicas de recursos de pré-festas.

A pré-renderização é adequada para uma página ou recurso leve, mas tenha cuidado com o site inteiro ou com grandes recursos, pois isso pode aumentar a utilização e a largura de banda da CPU e diminuir a velocidade do site. 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 as dicas do navegador no WordPress. Escolha o que você gosta e atenda aos requisitos.

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 em muitos plug-ins, e é por isso que às vezes é melhor optar pela versão paga. Os plug-ins da versão comercial são suportados profissionalmente e atualizados com o padrão WordPress & correções de segurança. Se você deseja gastar alguns dólares na otimização do desempenho do site, verifique os seguintes.

WP Rocket – de boa reputação, confiável por mais de 800.000 sites. Custou US $ 49 para um site.

Perfmatters – leve e fácil de seguir custa US $ 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 do tema e plug-ins que você usa. E é essencial otimizar o desempenho do seu site para obter 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 aos seus usuários, globalmente. Existem muitos, mas eu recomendaria tentar o SUCURI, que oferece CDN e segurança, ambos.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map