A ideia de ter um site rico em informações – com conteúdos em texto, imagem e vídeo diferenciados é o desejo de qualquer blogueiro ou profissional web de qualquer seguimento. Assim que iniciamos no WordPress e começamos a configurar, montar e adicionar postagens, percebemos a necessidade gritante de algum “truque” ou ferramenta que melhore a performance e desempenho do blog ou loja. Os plugins para gerenciamento de cache são os primeiros a serem adotados. No entanto, nem sempre eles são suficientes. Por isso, o CanalWP vai te apresentar duas ferramentas importantíssimas para um melhor desempenho:  Prefetching e Prerender.

Prefetching e Prerender

Aqui no blog por diversas vezes abordamos o tema “Desempenho e Performance”. O motivo para isso é fácil. Quanto mais rápido e estável nosso web site for, melhor é a experiência do nosso visitante e maiores são as chances de fidelizá-lo como leitor fixo.

A primeira coisa que indicamos é avaliar como está o desempenho do nosso blog, site ou loja – veja o post Ferramentas para Testar Velocidade e Performance WordPress. Depois, como citamos no início deste artigo, a adoção por um plugin para gerenciamento de cache é interessante – como primeira medida. O que me lembra que já falamos e ensinamos aqui sobre 2 dos plugins mais utilizados e indicados para isso, você pode conferir em WordPress Cache com o Plugin Quick Cache ou Como Instalar e Configurar o WP Super Cache Plugin.

E quando a ferramenta de cache não é mais o suficiente e você precisa otimizar ainda mais o desempenho do seu WordPress? É aí que entram truques e novas ferramentas, como prefetching e prerender. Acredito que a grande maioria não tenha ouvido falar sobre eles, mas não precisa ficar com medo ou receoso. Tudo que você precisa saber será explicado agora!

O Que É Prefetching

Não sei se você já ouviu falar em pré-busca de DNS. Bastante procurado para acelerar o processo para abertura de páginas web, o prefetching ou pré-busca de DNS influencia de forma significativa no tempo ou aceleração da navegação no mundo virtual.

Quando digitamos um endereço/URL em um browser, estamos pedindo que o nosso navegador encontre o servidor que hospeda aquela página web e depois exiba seu conteúdo. Assim, se o nosso software de navegação (browser) já fez essa busca anteriormente e encontrou o servidor DNS ou nome de domínio, logicamente podemos pular tal etapa e ir direto para o carregamento do site em si. A ideia do recurso prefetching é a diminuição da latência na resolução de DNS – que pode ser significativa.

Acredite, guardar a resolução da busca de um ou mais servidores DNS faz muita diferença no tempo de acesso a navegação. A técnica de prefetching é bastante utilizada pelos navegadores modernos – por exemplo, guardando os registros DNS para os resultados de busca em uma página específica. Até mesmo você pode especificar de forma manual alguns domínios para prefetching.

O Que É Prerender

Você entendeu que prefetching diminui a latência ou aquele intervalo que o browser leva para resolver a busca por um site, certo? Sendo assim, do que se trata então o prerender?

Diferente do prefetching, o prerender diz respeito ao carregamento do conteúdo em si de um blog ou qualquer web site. Mesmo otimizando o tempo da resolução de DNS, nosso browser ainda tem que exibir textos, imagens e folhas de estilo. Só assim podemos realmente visualizar a página da internet.

Após a chamada que otimizamos com prefetching, podemos utilizar a pré-renderização – outro nome para prerender, com o intuito de otimizar e acelerar a exibição do corpo e conteúdo de um site. Esse recurso também pode ser realizado de forma manual, mas para links específicos dentro de um site. O exemplo de uso mais fácil e extremamente eficaz é o seguinte: assim que uma página é carregada, as respectivas páginas para os links de paginação (Anterior/Próxima) – pré-configuradas como prerender, são renderizadas antes mesmo de serem chamadas. O que tornará a exibição do conteúdo após o clique do mouse quase que instantânea.

Prefetching e Prerender Plugin

Agora que você já entendeu a ideia por trás do prefetching e prerender, por que não utilizar um plugin para aplicá-los de forma fácil? A ferramenta que você precisa e da qual estamos falando é o WordPress Instant Articles.

Em sua versão 1.4, o WordPress Instant Articles é um plugin relativamente novo, mas muito eficaz no gerenciamento de prefetching e prerender para seu site WordPress. Prático para instalar, como todo plugin feito para WordPress, com toda a certeza essa é uma ferramenta do seu interesse.

O plugin WordPress Instant Articles permite que você configure URLs para prefetching  automaticamente, para os 2 últimos posts publicados, adiciona o recurso de prerender.

Além disso, você tem a possibilidade de adicionar pré-renderização para posts fixos e especificar os arquivos do seu tema que têm maior prioridade (.CSS, .js, etc). Vale salientar que o próprio plugin recomenda que você não cadastre mais do que 5 links para prerender.

Implementando O Seu Próprio Prerender

Quer algo próprio, ou interessou-se apenas em aplicar o prerender para seu site? Tudo bem, você pode fazer isso sem instalar qualquer plugin, mas claro, precisará envolver algum código nisso.

Essa solução é perfeita e ideal para quem quer utilizar o recurso de pré-renderização para posts específicos. Acesse o arquivo functions.php do seu tema via Dashboard (Aparência > Editor > functions.php) ou por uma software para edição de código via FTP (wp-content > themes > SEU TEMA > functions.php) e adicione o código no final do functions.php antes do ?>.

O primeiro código é para quem pretende implementar o prerender para posts ou páginas contidos na Home. Você precisa informar apenas os IDs de cada post/página que deseja implementar a tag rel para indicar a pré-renderização:

add_action( 'wp_head', function() {
if ( is_front_page() ) {
$posts = array( 869, 1014);
foreach($posts as $post) {
$url = get_permalink( $post );
printf( '', esc_url( $url ) );
}
}
});

Claro, se você quiser que os posts para prerender sejam escolhidos de forma dinâmica e baseando-se em algum campo personalizado, também é possível. O seguinte exemplo é referente ao custom field “prerender_home”:

add_action( 'wp_head', function() {
if ( is_home() ) {
$args = array(
'meta_key' => 'prerender_home',
'meta_value' => true
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
foreach( $query->posts as $post ) {
$url = get_permalink( $post->ID );
printf( '', esc_url( $url ) );
}

}

}
});

Quando ele encontra o termo citado, implementa a pré-renderização automaticamente.

Conclusão

Buscar por ferramentas e métodos capazes de otimizar o desempenho e performance do WordPress deve ser uma atividade corriqueira. Os plugins WP para gerenciamento de cache são sempre um bom início. Assim, os métodos para prefetching e prerender são uma sacada consequente da necessidade de sempre melhorar a experiência de nossos visitantes. Explore cada vez mais as formas indicadas para que seu empreendimento digital tenha qualidade. Não hesite!

Se você achou este artigo interessante ou se de alguma forma ele lhe foi útil considere compartilhar nas redes sociais. Você também pode deixar seu comentário abaixo para compartilhar a sua opinião sobre as nossas configurações, ou até mesmo deixar dicas que possamos ter deixado passar despercebido.