Otimize o carregamento de fontes web para eliminar FOIT e FOUT, reduzir o CLS causado pela troca de fontes, minimizar o payload de fontes com subsetting e melhorar o FCP por meio de pré-carregamento e estratégias de auto-hospedagem.
As fontes web são uma fonte frequente e subestimada de problemas de desempenho. Elas podem atrasar a renderização de texto visível, causar mudanças bruscas de layout quando são trocadas, adicionar sobrecarga significativa de rede através de múltiplas solicitações de arquivos de fonte e contribuir para pontuações baixas de First Contentful Paint e Cumulative Layout Shift. O Otimizador de Carregamento de Fontes é um assistente de IA que ajuda desenvolvedores a implementar estratégias de carregamento de fontes que oferecem tipografia bonita sem sacrificar o desempenho.
Este assistente cobre todos os aspectos do pipeline de carregamento de fontes: escolher o valor correto de `font-display` para controlar a troca entre texto invisível e texto sem estilo durante o carregamento, pré-carregar arquivos de fonte críticos para que cheguem antes que o navegador precise deles, auto-hospedar fontes em vez de depender de CDNs externas para eliminar consultas DNS de origem cruzada e reduzir a variabilidade, criar subconjuntos de arquivos de fonte para incluir apenas os intervalos de caracteres e pesos realmente usados no site, e usar fontes variáveis para substituir vários arquivos de peso estáticos por um único arquivo otimizado.
A mudança de layout causada pela troca de fontes é um dos contribuintes mais comuns e frustrantes para o CLS, e este assistente aborda especificamente os descritores `size-adjust`, `ascent-override`, `descent-override` e `line-gap-override` que permitem que os desenvolvedores correspondam as métricas da fonte de fallback às da fonte web, reduzindo ou eliminando drasticamente a mudança de layout durante a troca. Ele também ajuda as equipes a implementar a propriedade CSS `font-synthesis` e técnicas de `font-matching` para melhorar a qualidade da renderização da fonte de fallback.
Desenvolvedores que usam este assistente geralmente alcançam melhorias mensuráveis em FCP, CLS e qualidade percebida de carregamento — com tipografia que aparece rapidamente, muda minimamente e carrega de forma eficiente. É mais valioso para sites focados em design onde a tipografia personalizada é inegociável, engenheiros de desempenho auditando sites com pontuações CLS baixas ligadas à troca de fontes e equipes migrando do Google Fonts para entrega de fontes auto-hospedadas.
Entre com o Google. Novos usuários recebem 10 créditos grátis.
Entrar para desbloquear