Carregamento responsivo de web fonts, uma nova estratégia
Otimizando o carregamento de fontes para dispositivos móveis mais lentos com pré-carregamento responsivo e declarações font-face responsivas
Estratégia responsiva de exibição de fontes e pré-carregamento de fontes
Como especialista em Core Web Vitals, vejo diferentes soluções criativas todos os dias. A maioria não faz muito sentido, mas de vez em quando me deparo com uma estratégia que é tão simples e tão elegante que faz sentido para certos sites.
Este artigo explica como implementar o pré-carregamento responsivo de fontes para desktops junto com font display:optional para eliminar o Flash Of Unstyled Text (FOUT) enquanto carrega a fonte por padrão no mobile usando font-display: swap.
dica: esta estratégia funciona bem para sites com um critical rendering path maior.
O problema com o carregamento antecipado de fontes
Ao otimizar os Core Web Vitals, há uma regra simples que sempre se aplica:
"Tudo o que você faz antes da Largest Contentful Paint atrasará essa Largest Contentful Paint".
Este princípio também se aplica às web fonts. Priorizar o carregamento de web fonts durante o carregamento da página pode melhorar a experiência do usuário, mas se o seu site estiver com dificuldades para atingir os limites do Core Web Vitals, especialmente para tipos de dispositivos específicos, você precisará equilibrar a UX para melhorar a LCP.
Vamos considerar o exemplo abaixo de um site de jornal holandês. Em um dispositivo móvel, 3 fontes são enfileiradas antes do elemento de LCP. Isso faz com que as 3 fontes concorram pelos primeiros recursos de rede e atrase o tempo da imagem.
Estratégia responsiva de fontes ao resgate!
Em casos como esse, onde há muita concorrência inicial na rede, faz sentido distinguir entre os tipos de dispositivos. Normalmente, dispositivos desktop mais rápidos em conexões com fio (e conexões de rede mais rápidas) conseguem lidar com mais recursos iniciais de rede de uma vez e faz todo o sentido pré-carregar alguns arquivos de fontes críticas.
Dispositivos móveis, por outro lado, podem ser usados no trajeto para o trabalho sob condições de rede não ideais. Dispositivos móveis também costumam ter CPUs mais lentas e menos memória disponível em comparação aos desktops. Essas limitações significam que tratar o carregamento de fontes de maneira diferente com base no tipo de dispositivo pode fazer sentido.
- Desktop: Pré-carregar fontes melhora o desempenho de renderização em dispositivos com melhor largura de banda e poder de processamento. Use font-display: optional para minimizar o bloqueio e eliminar problemas de troca de fontes. Isso garante que a fonte seja usada apenas se estiver disponível dentro de 100ms após ser solicitada, enquanto o pré-carregamento garante que o alvo seja atingido.
- Mobile: Não pré-carregue a fonte devido à concorrência de rede. Use font-display: swap para uma renderização de texto mais rápida. Essa abordagem exibe fontes de fallback imediatamente enquanto a fonte personalizada continua carregando em segundo plano, oferecendo uma experiência melhor em dispositivos menos potentes.
Implementação usando <link rel="preload"> e Media Queries
Em vez de carregar a fonte universalmente, você pode usar o atributo media na tag <link> do HTML junto com CSS para aplicar estratégias de fontes diferentes com base nos tipos de dispositivos.
Estrutura HTML
<head>
<!-- Preload font for desktop only -->
<link rel="preload" href="/fonts/custom-font.woff2"
as="font" crossorigin="anonymous"
media="(min-width: 768px)">
<style>
/* Global font settings */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}
/* Desktop font settings */
@static/cache/static/img/clients/dpgmedia.webp (min-width: 767px) {
@font-face {
font-display: optional;
}
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head> Benefícios desta abordagem
- Foco na UX do Desktop: O desktop renderiza com a web font imediatamente, evitando o FOUT ou FOIT.
- Foco na performance Mobile:
font-display: swapgarante que os usuários vejam o texto imediatamente, mesmo que a fonte personalizada ainda não esteja carregada. - Simplicidade Declarativa: Evita JavaScript, reduzindo a complexidade e melhorando a capacidade de manutenção.
Caso de uso no mundo real
Como mencionado na introdução: esta estratégia é baseada em um exemplo do mundo real com o qual me deparei. Um site de e-commerce direcionado a usuários de desktop e mobile implementou esta estratégia. O resultado:
- Desktop: CLS e UX aprimorados, com fontes estilizadas aparecendo quase imediatamente.
- Mobile: First Contentful Paint e Largest Contentful Paint mais rápidos garantiram uma experiência de usuário rápida, mesmo em conexões mais lentas.
Ask AI why your INP spiked.
CoreDash is the only RUM tool with MCP support. Connect it to your AI agent and query your Core Web Vitals data in natural language. No more clicking through dashboards.
See How It Works
