Nos módulos anteriores, você aprendeu a otimizar recursos de HTML, CSS, JavaScript e de mídia. Neste módulo, descubra alguns métodos para otimizar fontes da Web.
As fontes da Web podem afetar o desempenho da página no tempo de carregamento e de renderização.
Arquivos de fonte grandes podem demorar um pouco para fazer o download e afetar negativamente a Primeira
exibição de conteúdo (FCP, na sigla em inglês), enquanto o valor font-display incorreto pode causar
mudanças de layout indesejáveis que contribuem para a Mudança de layout cumulativa (CLS, na sigla em inglês) de uma página.
Antes de otimizar fontes da Web, saber como elas são descobertas pelo navegador pode ser útil para entender 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 respectivo recurso de fonte da Web. Para preservar
a largura de banda, o navegador não faz o download da fonte da Web até ser determinado
que o layout da página atual precisa dela.
h1 {
font-family: "Open Sans";
}
No snippet de CSS anterior, o navegador faz o download do arquivo de fonte "Open Sans"
ao analisar um elemento <h1> no HTML da página.
preload
Se as declarações @font-face forem definidas em uma folha de estilo externa, o navegador só poderá começar a fazer o download delas após o download.
Isso faz com que as fontes da Web sejam recursos descobertos tardiamente, mas há maneiras de ajudar o
navegador a encontrá-las mais rapidamente.
É possível iniciar uma solicitação antecipada de recursos de fonte 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 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 @font-face inline
É possível tornar as fontes detectáveis mais cedo durante o carregamento da página inserindo
CSS de bloqueio de renderização in-line, incluindo as declarações @font-face, no <head> do
HTML usando o elemento <style>. Nesse caso, o navegador descobre fontes da Web mais cedo no carregamento da página, já que não é necessário aguardar o download de uma folha de estilo externa.
As declarações @font-face inline têm uma vantagem sobre o uso da dica preload, já que o navegador só faz o download das fontes necessárias para renderizar a página
atual. Isso elimina o risco de fazer o download de fontes não usadas.
Fazer o download
Depois de descobrir fontes da Web e garantir que elas sejam 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 de download e renderização de uma fonte da Web pelo navegador.
Hospedar fontes da Web por conta própria
As fontes da Web podem ser disponibilizadas por serviços de terceiros, como o Google Fonts, ou ser 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 fazer o download das 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. Usando preconnect, você pode instruir o navegador a abrir uma conexão com a origem cruzada antes do que ele normalmente faria:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
O snippet HTML anterior dá dicas para o navegador estabelecer uma conexão com fonts.googleapis.com e uma conexão CORS com fonts.gstatic.com. Alguns provedores de fonte, como o Google Fonts, disponibilizam CSS e recursos de fonte de diferentes origens.
Você pode eliminar a necessidade de uma conexão de terceiros hospedando automaticamente suas fontes da Web. Na maioria dos casos, a hospedagem automática de fontes da Web é mais rápida do que o download de origem cruzada. Caso você planeje a hospedagem automática de fontes da Web, verifique se o site está usando uma rede de fornecimento de conteúdo (CDN), HTTP/2 ou HTTP/3 e defina os cabeçalhos de armazenamento em cache corretos para as fontes da Web necessárias para o site.
Use apenas WOFF2 e WOFF2
O WOFF2 oferece suporte amplo a navegadores e a melhor compactação: até 30% melhor do que o WOFF. Isso reduz o tempo de download. O formato WOFF2 geralmente é o único necessário para oferecer compatibilidade total com os navegadores mais recentes.
Crie um subconjunto de fontes da Web
As fontes da Web geralmente incluem uma grande variedade de glifos diferentes, que são necessários para representar a grande variedade de caracteres usados em idiomas distintos. Se a página exibe conteúdo em apenas um idioma ou usa um único alfabeto, é possível reduzir o tamanho das fontes da Web usando a criação de subconjuntos. Isso geralmente é feito com a especificação de um número ou um intervalo de pontos de código Unicode.
Um subconjunto é um conjunto reduzido de glifos incluídos no arquivo de fonte da Web original. Por exemplo, em vez de exibir todos os glifos, sua página pode ter 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 com
o uso de um parâmetro de string de consulta. Por exemplo, o URL https://fonts.googleapis.com/css?family=Roboto&subset=latin disponibiliza uma folha de estilo com a fonte da Web Roboto que usa apenas o alfabeto latino.
Se você decidiu hospedar suas 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 tem a capacidade de auto-hospedar suas próprias fontes da Web, é possível
subdefinir as fontes da Web fornecidas pelo Google Fonts especificando um outro parâmetro de string de consulta text
contendo apenas os pontos de código Unicode necessários para
seu site. Por exemplo, se você tiver uma fonte da Web de display no seu site que precisa
apenas de um pequeno número de caracteres necessários para a frase "Olá", você pode
solicitar esse subconjunto pelo Google Fonts usando o seguinte URL:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Isso pode
reduzir significativamente a quantidade de dados de fonte da Web necessários para uma única fonte
no seu site, caso essa subconfiguração possa ser útil.
Renderização de fontes
Depois que o navegador descobrir e fazer o download de uma fonte da Web, ela poderá ser
renderizada. Por padrão, o navegador bloqueia a renderização de qualquer texto que use uma
fonte da Web até que o download seja feito. É possível ajustar o comportamento de renderização de texto do navegador e configurar o texto que será exibido (ou não) até que a fonte da Web seja totalmente carregada usando a propriedade CSS font-display.
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 se comportam de maneira um pouco diferente. O Chromium e o Firefox bloqueiam a renderização por
até três 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 para a
fonte da Web especificada. Isso permite que você mostre seu conteúdo imediatamente, sem esperar
o download da fonte da Web.
No entanto, a desvantagem de swap é que ele causa uma mudança de layout se a fonte da Web
substituta e a fonte da Web especificadas no CSS variam 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 o mais rápido
possível ou se não considerar outros valores de font-display.
fallback
O valor de fallback para font-display é uma combinação 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, diferentemente de block, o período de bloqueio é extremamente curto.
O uso do valor fallback pode funcionar bem em redes rápidas em que, se o download da fonte
da Web for rápido, ela será a fonte usada imediatamente na
renderização inicial da página. No entanto, se as redes estiverem lentas, o texto substituto será visto
primeiro após o término do período de bloqueio e, em seguida, trocado quando a fonte da Web
chegar.
optional
optional é o valor de font-display mais rigoroso e só usa o recurso de fonte
da Web quando o download é de até 100 milissegundos. Se uma fonte da Web
levar mais do que isso para ser carregada, ela não vai ser usada na página, e o navegador vai usar a
fonte alternativa para a navegação atual, enquanto a fonte da Web é transferida por download em
segundo plano e colocada no cache do navegador.
Como resultado, as navegações subsequentes nas páginas podem usar a fonte da Web imediatamente, porque
ela já foi transferida por download. 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 chega tarde demais na
navegação inicial da página.
Demonstrações de fonte
testar seus conhecimentos
Quando o navegador faz o download de um recurso de fonte da Web (supondo que ela não seja
buscada com uma diretiva preload)?
Qual é o único formato (e mais eficiente) necessário para exibir fontes da Web em todos os navegadores modernos?
A seguir: JavaScript dividido de código
Com uma compreensão da otimização de fontes, agora você pode passar para o próximo módulo, que aborda um tópico com alto potencial de melhorar a velocidade inicial de carregamento da página para os usuários: adiar o carregamento de JavaScript por meio da divisão de código. Ao fazer isso, você pode manter a largura de banda e a contenção de CPU o mais baixa possível durante a fase de inicialização de uma página, um período em que os usuários estão bastante propensos a interagir com ela.