Performance Astra Pro: corrigir lentidão de muitas fontes

Tipo Performance & Velocidade

Nome do erro Lentidão do Astra Pro com muitas fontes personalizadas EN: Astra Pro slow with too many custom fonts

Severidade Atenção

Descrição A queda de performance do Astra Pro com muitas fontes personalizadas ocorre quando o tema carrega várias famílias e pesos de Google Fonts de servidores externos, somando requisições que bloqueiam a renderização e atrasam o LCP da página.

O que é lentidão de performance do Astra Pro com muitas fontes?

A lentidão de performance do Astra Pro com muitas fontes personalizadas é a queda de velocidade que aparece quando o site usa várias famílias tipográficas, cada uma com vários pesos e estilos, configuradas na tipografia do tema ou pelo plugin Custom Fonts. Cada família e cada peso vira um arquivo de fonte a baixar, e quando essas fontes vêm dos servidores do Google o navegador abre uma conexão externa e espera o download antes de pintar o texto, o que aumenta as requisições da página e o tempo de carregamento.

O impacto recai principalmente no LCP e no CLS, duas métricas de Core Web Vitals. Fontes externas e não pré-carregadas atrasam a exibição do texto principal, piorando o LCP, e a troca da fonte de fallback pela fonte final empurra o layout, gerando CLS. O Astra oferece desde a versão 3.6.0 a opção de hospedar as Google Fonts localmente e pré-carregá-las, justamente para reduzir essas requisições externas e acelerar a exibição do texto.

Como identificar

O PageSpeed Insights aponta o aviso ‘Ensure text remains visible during webfont load’ (font-display) e marca as fontes como recurso que atrasa o First Contentful Paint.
O relatório de performance lista várias requisições para ‘fonts.googleapis.com’ e ‘fonts.gstatic.com’, uma para cada família e peso configurados no tema.
O texto aparece com a fonte de fallback do sistema por um instante e depois ‘pula’ para a fonte definitiva, gerando layout shift (CLS) visível ao carregar a página.
O LCP da página sobe acima de 2,5 segundos no campo e nos testes de laboratório quando o bloco de texto principal usa uma das fontes personalizadas.
A aba Network do navegador mostra a aba de fontes (Font) demorando para concluir, com vários arquivos .woff2 ainda em download enquanto o restante da página já renderizou.

Antes de começar: Antes de alterar a tipografia ou ativar a hospedagem local de fontes em produção, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso alguma fonte deixe de carregar como esperado.

Como prevenir

Padronize o projeto em no máximo duas famílias de fonte e poucos pesos desde o início, evitando acumular variações que ninguém usa no layout.
Mantenha ‘Load Google Fonts Locally’ e ‘Preload Local Fonts’ sempre ativados no Astra para servir as fontes do próprio servidor e pré-carregá-las.
Sempre que adicionar uma fonte personalizada pelo plugin Custom Fonts, priorize o arquivo .woff2 e remova formatos pesados que não são mais necessários.
Reavalie o PageSpeed Insights após cada mudança de tipografia para acompanhar o número de requisições de fonte, o LCP e o CLS antes de publicar.

Causa

O tema está configurado com várias famílias de fontes diferentes na tipografia do Astra (corpo, títulos, botões e widgets), e cada família adicional gera mais arquivos de fonte para o navegador baixar antes de exibir o texto.
Cada família está carregando muitos pesos e estilos (por exemplo 300, 400, 500, 600, 700 mais itálicos), e cada variação é um arquivo .woff2 separado a baixar, multiplicando as requisições mesmo com poucas famílias.
A opção 'Load Google Fonts Locally' está desativada em Astra > Dashboard > Settings > Performance, então as fontes são buscadas em fonts.gstatic.com a cada visita, abrindo conexões externas que bloqueiam a renderização do texto.
As fontes locais não estão pré-carregadas: com 'Preload Local Fonts' desligado, o navegador só descobre o arquivo da fonte ao processar o CSS, atrasando a exibição do texto e piorando o LCP.
Fontes adicionadas pelo plugin Custom Fonts foram enviadas apenas no formato .ttf ou .otf, sem a versão .woff2 mais leve, o que aumenta o tamanho de cada download e o tempo de carregamento.

Como resolver

Hospede as Google Fonts localmente no Astra: Ative a hospedagem local para que o Astra faça uma única chamada à API do Google, baixe os arquivos em .woff2 e os sirva do seu próprio servidor, eliminando as conexões externas a cada visita e melhorando o CLS.
```
Painel WP -> Astra -> Dashboard -> Settings -> Performance
Ative a opção 'Load Google Fonts Locally'
```
Pré-carregue as fontes locais: Com as fontes já salvas localmente, ative o preload para o navegador buscar o arquivo da fonte cedo no carregamento, deixando o texto pronto para pintar mais rápido e reduzindo o LCP.
```
Painel WP -> Astra -> Dashboard -> Settings -> Performance
Ative a opção 'Preload Local Fonts'
```
Reduza o número de famílias e pesos de fonte: Na tipografia do Astra, padronize o site em uma ou duas famílias e mantenha apenas os pesos realmente usados (por exemplo 400 e 700). Cada família e cada peso a menos é um arquivo de fonte a menos para baixar.
```
Personalizar -> Global -> Typography (Tipografia)
Defina a mesma família para corpo e títulos quando possível
Remova pesos e estilos não usados de cada família
```
Envie as Custom Fonts em formato .woff2: Para fontes que não são do Google, use o plugin Custom Fonts e priorize o arquivo .woff2, que é mais leve que .ttf ou .otf. Assim cada fonte personalizada baixa mais rápido sem perder qualidade.
```
Painel WP -> Aparência -> Custom Fonts -> Adicionar nova fonte
Faça upload do arquivo .woff2 da família desejada
```
Atualize as fontes locais e revalide a performance: Depois de ajustar as fontes, limpe o cache local do Astra para regerar os arquivos e rode o teste de novo para confirmar a queda nas requisições e no LCP.
```
Painel WP -> Astra -> Dashboard -> Settings -> Performance
Clique em 'Flush Local Fonts Cache'
Rode o PageSpeed Insights e confira o número de requisições de fonte e o LCP
```

PHP

<?php
// Pré-carrega a fonte local mais usada (.woff2) para acelerar o LCP no Astra.
// Ajuste o caminho conforme a fonte servida pelo seu site.
add_action( 'wp_head', 'full_preload_fonte_principal', 1 );
function full_preload_fonte_principal() {
    $fonte = get_stylesheet_directory_uri() . '/assets/fonts/inter-v13-latin-regular.woff2';
    printf(
        '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "n",
        esc_url( $fonte )
    );
}

Perguntas frequentes

Por que muitas fontes personalizadas deixam o Astra Pro lento

Cada família e cada peso de fonte vira um arquivo separado que o navegador precisa baixar antes de exibir o texto. Quando essas fontes vêm dos servidores do Google, o navegador ainda abre conexões externas, somando requisições que atrasam o carregamento e pioram o LCP da página.

Onde fica a opção de hospedar Google Fonts localmente no Astra

A opção está em Astra > Dashboard > Settings > Performance, no botão 'Load Google Fonts Locally'. Disponível desde a versão 3.6.0 do Astra, ela faz uma única chamada à API do Google e salva os arquivos em .woff2 no seu servidor.

Hospedar as fontes localmente melhora o Core Web Vitals

Sim. Servir as fontes do próprio servidor elimina as conexões externas a cada visita e, junto com o preload, ajuda o texto a aparecer mais cedo. Isso reduz o LCP e o layout shift causado pela troca de fonte, melhorando as métricas de Core Web Vitals.

Para que serve o Preload Local Fonts no Astra

O 'Preload Local Fonts' avisa o navegador para buscar o arquivo da fonte cedo no carregamento, antes de processar todo o CSS. Assim a fonte fica pronta quando o texto começa a ser pintado, reduzindo o atraso de exibição e o impacto no LCP.

Quantas fontes devo usar para não prejudicar a velocidade

Como regra prática, mantenha uma ou duas famílias e só os pesos realmente usados, como 400 e 700. Cada família e cada peso a menos é um arquivo de fonte a menos para baixar, o que reduz requisições e acelera a renderização do texto.

Qual formato de fonte é melhor para performance no WordPress

O formato .woff2 é o mais indicado por ser bem mais leve que .ttf ou .otf, mantendo a qualidade. Ao usar o plugin Custom Fonts, priorize enviar a versão .woff2 de cada família para que cada fonte baixe mais rápido.

Preciso limpar o cache depois de mudar as fontes do Astra

Sim. Após ativar a hospedagem local ou trocar famílias, use o botão 'Flush Local Fonts Cache' em Astra > Dashboard > Settings > Performance para regerar os arquivos locais e garantir que as fontes corretas sejam servidas.

Grave

Como corrigir o conflito de CSS otimizado entre Astra Pro e WP Rocket

O conflito de CSS otimizado entre Astra Pro e WP Rocket acontece quando o Remove Unused CSS ou a combinacao de CSS do WP Rocket descarta o estilo dinâmico do Astra, e o site carrega sem layout: fontes erradas, cores fora do lugar e botões sem formatacao. Aparece so na primeira visita de cada URL, porque o CSS usado e gerado por página.

Grave

Como corrigir o conflito de cache entre WP Rocket, LiteSpeed e Perfmatters

O conflito acontece quando WP Rocket e o plugin LiteSpeed Cache geram cache de página ao mesmo tempo e o Perfmatters repete otimizacoes (como Remove Unused CSS) que o WP Rocket já faz. O resultado e layout quebrado, JavaScript que para de funcionar e o ganho de PageSpeed que some.

Grave

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

O conflito de JS entre Perfmatters e Elementor surge quando o Delay JavaScript adia os scripts do construtor (frontend.min.js, jQuery) para depois da interacao do usuário. O resultado e editor que não abre, menu de dois toques e animacoes paradas. A correção e excluir os arquivos do Elementor do delay, não desligar o Perfmatters.

Informativo

Como corrigir quando o WP-Optimize não remove comentários spam no WordPress

O WP-Optimize não remove comentários spam quando a opção de limpeza de comentários spam está desmarcada na tela Banco de Dados, quando os comentários estão como pendentes ou não aprovados em vez de marcados como spam, ou quando a otimização agendada nunca chega a rodar. A correção é marcar a opção correta e disparar a otimização.

Grave

Como corrigir o conflito de otimização de JavaScript entre WP Rocket e Perfmatters

O conflito acontece quando WP Rocket e Perfmatters aplicam a mesma otimização de JavaScript (adiar, atrasar ou minificar) sobre os mesmos arquivos. O script recebe a otimização em dobro, perde a ordem de carregamento e funções como menu, slider e formulário param de responder no frontend.

Informativo

Como corrigir o erro ao desativar RSS Feeds no Perfmatters

O erro ao desativar RSS Feeds no Perfmatters acontece quando a opção Disable RSS Feeds, em Options, fica ativa e passa a redirecionar ou bloquear todas as URLs de feed do WordPress, derrubando integracoes que ainda dependem do RSS, como Mailchimp, FeedBurner, podcast e leitores de feed.

Setores

Extensões

Integrações

Como corrigir a lentidão do Astra Pro com muitas fontes personalizadas no WordPress

O que é lentidão de performance do Astra Pro com muitas fontes?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o conflito de CSS otimizado entre Astra Pro e WP Rocket

Como corrigir o conflito de cache entre WP Rocket, LiteSpeed e Perfmatters

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

Como corrigir quando o WP-Optimize não remove comentários spam no WordPress

Como corrigir o conflito de otimização de JavaScript entre WP Rocket e Perfmatters

Como corrigir o erro ao desativar RSS Feeds no Perfmatters

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos