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)?
Qual é o único (e mais eficiente) formato necessário para veicular anúncios na Web? fontes para todos os navegadores modernos?
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.