Otimizar fontes da Web

Nos módulos anteriores, você aprendeu como otimizar HTML, CSS, JavaScript, e recursos de mídia. Neste módulo, você vai descobrir alguns métodos para otimizar a Web fontes.

As fontes da Web podem afetar o desempenho da página no tempo de carregamento e de renderização. O download de arquivos de fonte grandes pode demorar um pouco e pode afetar negativamente Primeiro Contentful Paint (FCP), mas o valor font-display incorreto pode causar trocas de layout indesejáveis que contribuem para a Cumulative Layout Shift de uma página (CLS).

Antes de otimizar fontes da Web, pode ser discutido, saber como elas são descobertas por navegador pode ser útil, para que você possa 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 um @font-face. declaração:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

O snippet de código anterior define uma font-family chamada "Open Sans" e informa ao navegador onde encontrar o respectivo recurso de fonte da Web. Para preservar 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 disso.

h1 {
  font-family: "Open Sans";
}

No snippet CSS anterior, o navegador faz o download do arquivo de fonte "Open Sans" enquanto analisa um elemento <h1> no HTML da página.

preload

Se as declarações @font-face forem definidas em uma folha de estilo externa, a navegador só pode iniciar o download após ter feito o download da folha de estilo. Isso torna as fontes da Web recursos descobertos tardiamente, mas há maneiras de ajudar navegador a descobrir fontes da web mais cedo.

É possível iniciar uma solicitação antecipada de recursos de fonte da Web usando a preload. diretiva. A diretiva preload torna as fontes da Web detectáveis no início da carregamento da página, e o navegador inicia imediatamente o download, sem esperar para que a folha de estilo conclua 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 CSS de bloqueio de renderização, incluindo as declarações @font-face, no elemento <head> do seu HTML usando o elemento <style>. Nesse caso, o navegador descobre fontes da Web mais cedo no carregamento da página, já que não é preciso esperar folha de estilo para download.

Declarações @font-face inline têm uma vantagem sobre o uso de preload uma dica, já que o navegador só faz o download das fontes necessárias para renderizar a imagem página. 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 ambiente o navegador poderá fazer o download deles. O número de fontes da Web, sua codificação, e o tamanho do arquivo podem afetar significativamente a rapidez com que uma fonte da web transferidos por download e renderizados pelo navegador.

Auto-hospedagem das suas fontes da Web

As fontes da Web podem ser disponibilizadas por serviços de terceiros, como o Google Fonts ou pode ser auto-hospedado na sua origem. Ao usar um serviço de terceiros, sua Web página precisa abrir uma conexão com o domínio do provedor antes de poder iniciar fazer o download das fontes da Web necessárias. Isso pode atrasar a descoberta e o download 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 o destino antes do que o navegador normalmente faria:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

O snippet de HTML anterior indica ao navegador que é preciso estabelecer uma conexão com fonts.googleapis.com e uma conexão CORS com fonts.gstatic.com. Algumas provedores de fontes, como o Google Fonts, disponibilizam recursos de CSS e fonte de diferentes origens.

Você pode eliminar a necessidade de uma conexão de terceiros hospedando por conta própria fontes da Web. Na maioria dos casos, a auto-hospedagem de fontes da Web é mais rápida do que o download de origem cruzada. Se você planeja hospedar fontes da Web por conta própria, verifique se o site usa uma rede de fornecimento 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 o site.

Use apenas WOFF2 e WOFF2

O WOFF2 conta com suporte para navegador amplo e a melhor compactação: até 30% melhor do que WOFF. O tamanho de arquivo reduzido resulta em tempos de download mais rápidos. WOFF2 formato é geralmente o único necessário para compatibilidade total em navegadores da Web.

Criar um subconjunto das suas fontes da Web

As fontes da Web normalmente incluem uma ampla gama de diferentes glifos, que são necessários para representar a grande variedade de caracteres usados em diferentes idiomas. Se as exibir conteúdo em apenas um idioma (ou usar apenas um alfabeto), será possível reduzir o tamanho das suas fontes da Web por meio de subconjuntos. Isso geralmente é feito especificar um número ou um intervalo de pontos de código Unicode.

Um subconjunto é um conjunto reduzido de glifos que foram incluídos na versão original da Web arquivo de fonte. Por exemplo, em vez de exibir todos os glifos, sua página pode apresentar uma um subconjunto específico de caracteres latinos. Dependendo do subconjunto necessário, a remoção glifos podem reduzir significativamente o tamanho de um arquivo de fonte.

Alguns provedores de fontes da Web, como o Google Fonts, oferecem subconjuntos automaticamente por meio do o uso de um parâmetro de string de consulta. Por exemplo, o https://fonts.googleapis.com/css?family=Roboto&subset=latin O URL veicula um folha de estilos com a fonte da web Roboto, que usa apenas o alfabeto latino.

Se você decidiu auto-hospedar suas fontes da Web, a próxima etapa é gerar e hospede esses subconjuntos por conta própria usando ferramentas como gliphanger ou subfont.

No entanto, se você não tiver a capacidade de auto-hospedar suas próprias fontes da Web, poderá subconjunto de fontes da Web fornecidas pelo Google Fonts especificando um text adicional. de string de consulta contendo 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 "Olá", você pode solicitar esse subconjunto pelo Google Fonts usando o seguinte URL: https://fonts.googleapis.com/css?family=Monoton&text=Welcome: Isso pode reduzem significativamente a quantidade de dados de fontes da Web necessários para uma única família tipográfica. em seu site, se essa criação de subconjuntos extrema possa ser útil em seu site.

Renderização de fontes

Depois que o navegador descobrir e fazer o download de uma fonte da web, ela poderá ser renderizado. Por padrão, o navegador bloqueia a renderização de qualquer texto que use uma fonte da Web até que seja feito o download. Você pode ajustar a renderização de texto do navegador comportamento do usuário e configurar qual texto deve ser exibido (ou não) até que fonte foi totalmente carregada usando a propriedade CSS font-display.

block

O valor padrão de font-display é block. Com o block, o navegador bloqueia a renderização de qualquer texto que usa a fonte da Web especificada. Diferente navegadores se comportam de maneira um pouco diferente. O Chromium e o Firefox bloqueiam a renderização para até 3 segundos antes de usar um substituto. O Safari é bloqueado indefinidamente até que a fonte da Web tenha sido carregada.

swap

swap é o valor de font-display mais usado. swap não bloqueia renderização e mostra o texto imediatamente em um substituto antes de trocar na fonte da Web especificada. Isso permite que você mostre seu conteúdo imediatamente sem esperar para fazer o download da fonte da Web.

No entanto, a desvantagem de swap é que ela causa uma mudança de layout se o substituto e a fonte da Web especificada no CSS variam muito em termos de linha altura, kerning e outras métricas de fonte. Isso poderá afetar o CLS do seu site se não use a dica preload para carregar um recurso de fonte da Web assim que possível ou se você não considerar outros valores font-display.

fallback

O valor fallback para font-display é um meio termo entre block e swap. Ao contrário de swap, o navegador bloqueia a renderização de uma fonte, mas trocar o texto substituto apenas por um curto período de tempo. Ao contrário de block, No entanto, o período de bloqueio é extremamente curto.

O valor fallback pode funcionar bem em redes rápidas em que, se a fonte da Web rapidamente, a fonte da web é a família tipográfica usada imediatamente no renderização inicial. No entanto, se as redes estiverem lentas, o texto substituto será primeiro após o término do período de bloqueio e, em seguida, trocada quando a fonte da web chega.

optional

optional é o valor de font-display mais rigoroso e usa apenas a Web recurso de fonte se o download for feito em até 100 milissegundos. Se uma fonte da Web usa mais tempo do que isso para carregar, ele não é usado na página e o navegador usa o tipo de letra substituta para a navegação atual enquanto a fonte da Web é baixada em plano de fundo e colocá-lo no cache do navegador.

Como resultado, as navegações de página subsequentes podem usar a fonte da Web imediatamente, já que o download já foi feito. font-display: optional evita a troca de layout observada com swap, mas alguns usuários não podem ver a fonte da Web se ela chegar tarde demais no navegação na página inicial.

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 buscados com uma diretiva preload)?

Quando o CSSOM da página é criado e é determinado que a fonte da Web é necessárias para o layout atual.
Assim que a referência a ele for descoberta em uma folha de estilo.

Qual é o único (e mais eficiente) formato necessário para veicular anúncios na Web? fontes para todos os navegadores modernos?

WOFF2
TTF
WOFF
EOT

A seguir: JavaScript dividido de código

Com uma compreensão da otimização de fontes, agora você pode se mover o próximo módulo, que aborda um tema com grande potencial de melhoria a velocidade de carregamento da página inicial para seus usuários, ou seja, adiar o carregamento de JavaScript por meio da divisão de código. Assim, você mantém a largura de banda e a CPU a contenção mais baixa possível durante a fase de inicialização de uma página, um período de momento em que os usuários estão muito propensos a interagir com ele.