Nos módulos anteriores, você aprendeu a otimizar recursos de HTML, CSS, JavaScript e mídia. Neste módulo, você vai descobrir alguns métodos para otimizar fontes da Web.
As fontes da Web podem afetar a performance da página no tempo de carregamento e de renderização.
Arquivos de fontes grandes podem levar um tempo para serem baixados e afetar negativamente o First Contentful Paint (FCP). Já o valor font-display incorreto pode causar mudanças indesejáveis no layout que contribuem para o Cumulative Layout Shift (CLS) de uma página.
Antes de discutir a otimização de fontes da Web, é útil saber como elas são descobertas pelo navegador. Assim, você entende como o CSS impede a recuperação de fontes da Web desnecessárias em determinadas situações.
Discovery
As fontes da Web de uma página são definidas em uma folha de estilo usando uma declaração @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
O snippet de código anterior define um font-family chamado "Open Sans" e
informa ao navegador onde encontrar o recurso de fonte da Web respectivo. Para economizar largura de banda, o navegador não faz o download da fonte da Web até que seja determinado que o layout da página atual precisa dela.
h1 {
font-family: "Open Sans";
}
No snippet de CSS anterior, o navegador baixa o arquivo de fonte "Open Sans" ao analisar um elemento <h1> no HTML da página.
preload
Se as declarações @font-face estiverem definidas em uma folha de estilo externa, o navegador só poderá começar a fazer o download delas depois que a folha de estilo for baixada.
Isso faz com que as fontes da Web sejam recursos descobertos tarde, mas há maneiras de ajudar o navegador a descobri-las antes.
É possível iniciar uma solicitação antecipada de recursos de fontes da Web usando a diretiva preload. A diretiva preload torna as fontes da Web detectáveis no início do
carregamento da página, e o navegador começa imediatamente a fazer o download delas sem esperar
que a folha de estilo termine o download e a análise. A diretiva preload
não espera até que a fonte seja necessária na página.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Declarações de @font-face in-line
Você pode tornar as fontes detectáveis mais cedo durante o carregamento da página incorporando
CSS de bloqueio de renderização, incluindo as declarações @font-face, no <head> do
HTML usando o elemento <style>. Nesse caso, o navegador descobre
as fontes da Web mais cedo no carregamento da página, já que não precisa esperar o download de uma folha de estilo
externa.
Declarar @font-face em linha tem uma vantagem sobre o uso da dica preload, já que o navegador só baixa as fontes necessárias para renderizar a página atual. Isso elimina o risco de baixar fontes não usadas.
Download
Depois de descobrir as fontes da Web e garantir que elas são necessárias para o layout da página atual, o navegador pode fazer o download delas. O número de fontes da Web, a codificação e o tamanho do arquivo podem afetar significativamente a velocidade com que uma fonte da Web é baixada e renderizada pelo navegador.
Fazer auto-hospedagem das fontes da Web
As fontes da Web podem ser disponibilizadas por serviços de terceiros, como o Google Fonts, ou auto-hospedadas na sua origem. Ao usar um serviço de terceiros, sua página da Web precisa abrir uma conexão com o domínio do provedor antes de começar a baixar as fontes da Web necessárias. Isso pode atrasar a descoberta e o download subsequente de fontes da Web.
Essa sobrecarga pode ser reduzida usando a dica de recurso preconnect. Ao usar
preconnect, você pode instruir o navegador a abrir uma conexão com a origem cruzada
antes do que ele faria normalmente:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
O snippet HTML anterior indica ao navegador que estabeleça uma conexão com
fonts.googleapis.com e uma conexão CORS com fonts.gstatic.com. Alguns
provedores de fontes, como o Google Fonts, oferecem CSS e recursos de fontes de diferentes
origens.
Você pode eliminar a necessidade de uma conexão de terceiros hospedando suas próprias fontes da Web. Na maioria dos casos, a auto-hospedagem de fontes da Web é mais rápida do que o download delas de uma origem cruzada. Se você planeja fazer a hospedagem própria de fontes da Web, verifique se o site está usando uma rede de entrega de conteúdo (CDN), HTTP/2 ou HTTP/3 e define os cabeçalhos de cache corretos para as fontes da Web necessárias para seu site.
Use WOFF2, e somente WOFF2
O WOFF2 tem ampla compatibilidade com navegadores e a melhor compressão, até 30% melhor que o WOFF. O tamanho reduzido do arquivo resulta em tempos de download mais rápidos. O formato WOFF2 geralmente é o único necessário para compatibilidade total em navegadores modernos.
Criar subconjuntos de fontes da Web
As fontes da Web geralmente incluem uma ampla variedade de glifos, que são necessários para representar a grande variedade de caracteres usados em diferentes idiomas. Se a página veicula conteúdo em apenas um idioma ou usa um único alfabeto, é possível reduzir o tamanho das fontes da Web usando subconjuntos. Isso geralmente é feito especificando um número ou um intervalo de pontos de código Unicode.
Um subconjunto é um conjunto reduzido dos glifos incluídos no arquivo de webfont original. Por exemplo, em vez de veicular todos os glifos, sua página pode veicular um subconjunto específico para caracteres latinos. Dependendo do subconjunto necessário, a remoção de glifos pode reduzir significativamente o tamanho de um arquivo de fonte.
Alguns provedores de fontes da Web, como o Google Fonts, oferecem subconjuntos automaticamente usando um parâmetro de string de consulta. Por exemplo, o URL
https://fonts.googleapis.com/css?family=Roboto&subset=latin veicula uma
folha de estilo com a família tipográfica Roboto para a Web que usa apenas o alfabeto latino.
Se você decidiu hospedar as fontes da Web por conta própria, a próxima etapa é gerar e hospedar esses subconjuntos usando ferramentas como glyphanger ou subfont.
No entanto, se você não tiver capacidade para auto-hospedar suas próprias fontes da Web, é possível criar um subconjunto de fontes da Web fornecidas pelo Google Fonts especificando um parâmetro de string de consulta text adicional que contenha apenas os pontos de código Unicode necessários para seu site. Por exemplo, se você tiver uma fonte da Web de exibição no seu site que só
precisa de um pequeno número de caracteres para a frase "Welcome", é possível
solicitar esse subconjunto no Google Fonts usando o seguinte URL:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Isso pode reduzir significativamente a quantidade de dados de fontes da Web necessários para um único tipo de letra no seu site, se esse subconjunto extremo for útil.
Renderização de fontes
Depois que o navegador descobre e baixa uma fonte da Web, ela pode ser
renderizada. Por padrão, o navegador bloqueia a renderização de qualquer texto que use uma
fonte da Web até que ela seja baixada. É possível ajustar o comportamento de renderização de texto do navegador e configurar qual texto deve ser mostrado (ou não) até que a webfont seja totalmente carregada usando a propriedade font-display do CSS.
block
O valor padrão de font-display é block. Com block, o navegador
bloqueia a renderização de qualquer texto que use a fonte da Web especificada. Navegadores diferentes têm comportamentos ligeiramente diferentes. O Chromium e o Firefox bloqueiam a renderização por até 3 segundos antes de usar um substituto. O Safari bloqueia indefinidamente
até que a fonte da Web seja carregada.
swap
swap é o valor de font-display mais usado. swap não bloqueia a
renderização e mostra o texto imediatamente em um substituto antes de trocar pela
fonte da Web especificada. Isso permite mostrar seu conteúdo imediatamente sem esperar
o download da fonte da Web.
No entanto, a desvantagem do swap é que ele causa uma mudança de layout se a fonte da Web de substituição e a fonte da Web especificada no CSS variarem muito em termos de altura da linha, kerning e outras métricas de fonte. Isso pode afetar o CLS do seu site se você não usar a dica preload para carregar um recurso de fonte da Web assim que possível ou se não considerar outros valores de font-display.
fallback
O valor fallback para font-display é uma espécie de compromisso entre block e swap. Ao contrário de swap, o navegador bloqueia a renderização de uma fonte, mas
troca o texto substituto apenas por um período muito curto. No entanto, ao contrário do block, o período de bloqueio é extremamente curto.
Usar o valor fallback pode funcionar bem em redes rápidas, em que, se a fonte da Web for baixada rapidamente, ela será o tipo de letra usado imediatamente na renderização inicial da página. No entanto, se as redes estiverem lentas, o texto substituto será mostrado primeiro após o período de bloqueio e depois será trocado quando a fonte da Web chegar.
optional
optional é o valor de font-display mais restrito e só usa o recurso de fonte da Web se ele for baixado em até 100 milissegundos. Se uma fonte da Web demorar mais do que isso para carregar, ela não será usada na página, e o navegador usará a família tipográfica substituta para a navegação atual enquanto a fonte da Web é baixada em segundo plano e colocada no cache do navegador.
Como resultado, as navegações de página subsequentes podem usar a fonte da Web imediatamente, já que
ela já foi baixada. font-display: optional evita a mudança de layout vista
com swap, mas alguns usuários não veem a fonte da Web se ela chegar muito tarde na
navegação inicial da página.
Demonstrações de fontes
Teste seus conhecimentos
Quando o navegador faz o download de um recurso de fonte da Web (supondo que ele não seja
buscado com uma diretiva preload)?
Qual é o único formato (e o mais eficiente) necessário para veicular fontes da Web em todos os navegadores modernos?
Próximo: divisão de código JavaScript
Agora que você já sabe como otimizar fontes, pode passar para o próximo módulo, que aborda um tema com grande potencial para melhorar a velocidade de carregamento inicial da página para os usuários: adiar o carregamento de JavaScript usando a divisão de código. Assim, você pode manter a disputa de largura de banda e CPU o mais baixa possível durante a fase de inicialização de uma página, um período em que os usuários provavelmente vão interagir com ela.