Usar preload e preconnect para fontes e assets no WordPress

Os resource hints são pequenas instruções <link> no <head> de uma página com as quais você diz ao navegador quais recursos ele deve tratar cedo. Os três mais importantes são rel="preconnect" (estabelece antecipadamente a conexão – DNS, TCP, TLS – com um domínio externo), rel="dns-prefetch" (resolve apenas o nome DNS antecipadamente, um fallback econômico para navegadores mais antigos) e rel="preload" (baixa um arquivo específico com alta prioridade antes de o navegador o descobrir no documento). Usados corretamente, encurtam o Largest Contentful Paint (LCP) muitas vezes em 100 a 400 ms, porque a imagem mais importante e as fontes já não ficam no fim da cadeia de carregamento. Usados de forma incorreta ou generosa demais, porém, prejudicam: cada preload compete por largura de banda, e hints em excesso atrasam justamente os recursos que deveriam ser rápidos. Este guia mostra quando e como definir os hints de forma direcionada no WordPress.

Os três hints num relance

Hint	O que faz	Para quê
`preconnect`	estabelecer antecipadamente DNS + TCP + TLS com o domínio externo	host de fontes, CDN, analytics – domínios dos quais se carrega cedo
`dns-prefetch`	apenas resolução DNS antecipada	fallback econômico e para domínios necessários um pouco mais tarde
`preload`	carregar imediatamente um arquivo específico com alta prioridade	imagem LCP, web fonts críticas, CSS crítico

Passo 1: Identificar recursos críticos

Abra as Chrome DevTools, aba Network, recarregue a página e observe o diagrama de cascata. Determine:

O elemento LCP: geralmente a grande imagem hero no topo. Na aba Performance ou no Lighthouse ele é marcado como "Largest Contentful Paint element".
Fontes necessárias para o texto visível (fontes carregadas tarde causam o "Flash of Unstyled Text").
Domínios externos dos quais se carrega cedo (Google Fonts, um CDN de imagens, um host de ícones).

Apenas esses poucos recursos recebem um hint, não cada arquivo.

Passo 2: Preconnect para domínios externos

Se a sua página incorpora recursos de outro domínio, com preconnect você economiza o estabelecimento da conexão. Exemplo para um host de fontes ou CDN:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

O atributo crossorigin é obrigatório para fontes e outros recursos carregados de forma anônima, caso contrário a conexão estabelecida antecipadamente não é reutilizada. O dns-prefetch abaixo serve de fallback para navegadores sem suporte a preconnect.

Observação sobre Google Fonts: O mais rápido é hospedar Google Fonts localmente e dispensar completamente o domínio externo. Se isso não for possível, ajuda um preconnect para fonts.gstatic.com.

Passo 3: Preload para a imagem LCP e as fontes

Pré-carregar a imagem LCP

<link rel="preload" as="image"
      href="/wp-content/uploads/2026/07/hero.avif"
      type="image/avif"
      fetchpriority="high">

Como alternativa – e muitas vezes mais elegante – defina fetchpriority="high" diretamente na tag <img> da imagem hero e remova o lazy loading dessa imagem, em vez de usar um preload separado.

Pré-carregar uma fonte

<link rel="preload" as="font" type="font/woff2"
      href="/wp-content/themes/mein-theme/fonts/inter.woff2"
      crossorigin>

Nas fontes, crossorigin é necessário mesmo no mesmo domínio, porque as fontes são sempre carregadas de forma anônima.

Implementação no WordPress

Variante A: via functions.php

Adicione os hints através do hook wp_head (no functions.php do child theme):

add_action( 'wp_head', function () {
    ?>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="font" type="font/woff2"
          href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
          crossorigin>
    <?php
}, 1 ); // Prioridade 1 = o mais cedo possivel no head

Variante B: via o filtro resource_hints

Para preconnect e dns-prefetch, o WordPress oferece o filtro oficial wp_resource_hints:

add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = array(
            'href'        => 'https://fonts.gstatic.com',
            'crossorigin' => 'anonymous',
        );
    }
    return $hints;
}, 10, 2 );

Variante C: via um plugin

Plugins de otimização como WP Rocket, Perfmatters ou FlyingPress oferecem campos onde você pode inserir URLs de preload e preconnect, sem código.

Como meço o efeito?

Execute o Lighthouse (Chrome DevTools, aba Lighthouse) antes e depois da alteração e compare o valor de LCP.
Na aba Network, verifique que a imagem LCP e as fontes agora começam mais cedo na cadeia (prioridade "High").
O PageSpeed Insights não deve mais mostrar os diagnósticos "Largest Contentful Paint image was lazily loaded" ou "Preconnect to required origins".

Erros frequentes

Preloads demais: Se tudo for pré-carregado, nada fica priorizado. Limite-se a 1–2 imagens e 1–2 fontes.
Preload sem uso: Um asset carregado via preload mas não usado em poucos segundos gera no console o aviso "was preloaded but not used" e desperdiça largura de banda.
Esquecer o crossorigin: Se faltar nas fontes, o navegador baixa o arquivo duas vezes (uma via preload de forma anônima, outra normalmente).
Preconnect para domínios demais: Cada conexão aberta custa recursos. Mais de 4–6 preconnects raramente fazem sentido.
Valor as errado: as="image", as="font", as="style" devem corresponder ao tipo de recurso, caso contrário o preload é ignorado.

Perguntas frequentes (FAQ)

Qual é a diferença entre preload e preconnect?

preconnect estabelece antecipadamente a conexão (DNS, TCP, TLS) com um domínio externo, mas ainda não carrega nenhum arquivo. preload baixa um arquivo específico com alta prioridade antes de o navegador o descobrir no documento. preconnect usa-se para hosts de fontes ou CDNs, e preload para a imagem LCP e as fontes críticas.

Por que as fontes precisam do atributo crossorigin no preload?

As fontes são sempre carregadas de forma anônima (em modo CORS) pelo navegador, mesmo do próprio domínio. Se faltar o atributo crossorigin no preload, a requisição pré-carregada não corresponde à requisição posterior da fonte e o navegador baixa o arquivo duas vezes. Por isso crossorigin no preload as="font" é sempre necessário.

Quantos recursos devo pré-carregar?

O menos possível. Se tudo for pré-carregado, nada fica priorizado e os hints atrasam justamente os recursos que deveriam ser rápidos. Limite-se a 1 ou 2 imagens e 1 ou 2 fontes, além de no máximo 4 a 6 preconnects.

O que significa o aviso do console "preloaded but not used"?

Este aviso aparece quando um recurso carregado via preload não é usado na página em poucos segundos. O preload então desperdiça largura de banda. Verifique se o valor as (image, font, style) está correto e se o URL pré-carregado coincide exatamente com o URL usado depois.

Como o InspectWP ajuda com resource hints?

O InspectWP registra os recursos <link> presentes no <head> bem como os domínios externos e as fontes incorporados. O relatório mostra quais hosts externos são contatados cedo e onde fontes de terceiros são carregadas, bons pontos de partida para usar de forma direcionada preconnect ou uma hospedagem local.