Pré-carregando fontes

O autor do artigo, cuja tradução estamos publicando hoje, quer falar sobre por que ele pré-carrega as fontes, mesmo quando não deveria.

Quando ele criou o site no qual o original deste material foi publicado, ele não usaria nenhuma de suas próprias fontes nele. Isso afetaria inevitavelmente o desempenho do site, embora não muito. O autor do artigo diz que se esforçou para criar um site rápido. No entanto, no final, foi decidido usar uma fonte especial para os títulos das páginas e, ao mesmo tempo, tentar fazer com que essa solução o menos possível afetasse o desempenho do projeto.

Introdução

Para começar, decidi tornar o arquivo da fonte o menor possível. Então, eu criei um subconjunto dessa fonte. Em outras palavras, selecionei na fonte apenas os caracteres necessários para as palavras no título.

Como resultado, recebi um arquivo muito compacto, cujo tamanho era inferior a 2 Kb. Além disso, coloquei-o no mesmo local que todos os outros materiais do site, o que me permitiu livrar-me das dependências de terceiros e do tempo gasto na conexão com outro domínio.

E, finalmente, o link para o arquivo de fonte foi colocado no código CSS incorporado na página, na parte superior do código HTML, e não no arquivo CSS externo.

Isso significa que o navegador pode detectar e baixar o arquivo de fonte sem precisar baixar uma folha de estilo externa. A propósito, esse é um motivo comum pelo qual as fontes são carregadas depois do necessário.

Surpresa

Como fontes especiais são necessárias para a exibição de texto, o navegador deve tratá-las como recursos de alta prioridade.

Como resultado, eu esperava que o arquivo da fonte fosse carregado muito rapidamente. As páginas do meu recurso eram, de qualquer forma, bastante "leves", então pensei que nada deveria impedir o carregamento do arquivo da fonte.

Quando analisei o site, fiquei um pouco chocado.

Então, olhando o site usando as ferramentas de desenvolvedor do Chrome e examinando-o no Webpagetest, descobri que a fonte de alta prioridade foi carregada após as imagens - recursos de baixa prioridade.


As imagens são baixadas antes do download da fonte

Pareceu-me um absurdo completo.

Eu tinha certeza de que o navegador, antes de baixar a fonte, pode esperar até descobrir que a fonte é necessária para exibir a página. Mas o elemento em que minha fonte foi usada estava localizado na parte superior da página, dentro da <header> , muito maior do que as tags com imagens que foram carregadas antes do download da fonte. O elemento correspondente foi localizado não apenas no código da página, mas também na árvore do DOM.

Pré-carregando fontes como uma solução para o problema

O atributo preload informa ao navegador que ele precisa pré-carregar o recurso correspondente necessário para exibir a página atual.

O uso desse atributo é uma boa maneira de fazer o download antecipado de recursos importantes que seriam descobertos pelo navegador posteriormente.

Arquivos de fonte são um ótimo exemplo de uso desse mecanismo. Se o link para o arquivo de fonte for criado em uma folha de estilos externa, o navegador não detectará a fonte até que ela seja carregada.

O uso do atributo preload aplicado a arquivos de fonte informa ao navegador que ele precisará das fontes apropriadas quando exibir a página.
Além disso, esse mecanismo é muito fácil de implementar usando o elemento <link> .

 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 

Como alternativa, você pode adicionar uma diretiva de pré-carregamento ao cabeçalho da resposta (embora, a menos que seja especificado de outra forma, alguns servidores ou CDNs podem interpretar esse design como uma solicitação iniciada pelo servidor para transferir recursos para o cliente).

Eu não esperava que neste site eu tivesse que usar mecanismos de pré-carregamento de recursos. Meu código CSS é muito modesto, eu o integrei no código HTML da página, para que as páginas sejam exibidas mais rapidamente pelos navegadores na primeira visita ao site. Como minha fonte não dependia do carregamento de um arquivo CSS externo, o navegador, em qualquer caso, deveria detectá-lo muito cedo e sem "dicas" sobre o pré-carregamento.

No entanto, descobri que o pré-carregamento da fonte levou à restauração da justiça, ao fato de que o arquivo da fonte estava carregado agora antes do download dos arquivos de imagem.

Aqui está o diagrama em cascata da Webpagetest - destaquei os lugares onde o trabalho com o arquivo de fonte é mostrado. Na parte superior da figura, a pré-carga não é usada. No fundo - usado.


Pré-carregando e trabalhando com o arquivo de fonte.

Talvez seja mais útil considerar o storyboard do processo de carregamento da página (aqui, para maior clareza, foi usada uma imitação de uma conexão muito lenta).


No storyboard superior, o pré-carregamento não é usado. No fundo - usado

De passagem, notei que usei o identificador de font-display: fallback . Ou seja, o título foi exibido originalmente usando a fonte de backup, caso minha fonte seja carregada lentamente. No entanto, para este teste, desativei esse recurso, pois, caso contrário, seria muito difícil distinguir entre as etapas de carregamento da página.

Por que funcionou?

Para exibir uma página da web, o navegador precisa criar a árvore DOM e a árvore CSSOM, que são usadas posteriormente para construir a árvore de renderização.

preload que o uso do elemento <link> com o atributo preload para baixar a fonte permite que o navegador comece a criar CSSOM antes da conclusão do DOM.

Você pode ver isso nas imagens a seguir, que mostram uma exploração do processo de carregamento da página usando as ferramentas de desenvolvedor do Chrome.

Veja como é o trabalho com materiais de página sem usar a pré-carga. Primeiro, o DOM é criado e a imagem é carregada, o CSSOM é criado e a fonte é carregada.


Trabalhar com a página sem usar o pré-carregamento

E aqui é o mesmo, mas com o uso de pré-carregamento. Aqui, o navegador começa a criar CSSOM, inicia o download da fonte e, em seguida, cria o DOM e inicia o download das imagens.


Trabalhando com a página usando pré-carregamento

Existem alternativas para pré-carregamento?

Suponha que eu não possa usar o atributo preload para aumentar a prioridade do arquivo de fonte. O que eu poderia fazer então? Como você pode diminuir a prioridade das imagens?

Por curiosidade, tentei implementar a idéia acima e adicionei o atributo loading="lazy" aos elementos que descrevem as imagens. No Chrome 76 (o único navegador que suportava isso no momento da redação), isso teria que diminuir a prioridade das imagens fora da área visível original da página.

Testar essa idéia com ferramentas de desenvolvedor mostrou que isso faz com que as fontes sejam baixadas anteriormente. Talvez isso deva ser lembrado, pois o nível de suporte do navegador a mecanismos de carregamento lento está aumentando com o tempo.

Navegadores diferentes se comportam de maneira diferente

Testei o projeto em vários navegadores diferentes e em vários dispositivos. Nos testes, descobri que o iOS Safari (iPhone 8) mostra o mesmo comportamento do Chrome. Nomeadamente, as fontes, por padrão, são carregadas após as imagens, mas o uso do atributo preload permite corrigir a situação.

O problema do carregamento tardio de fontes também ocorreu no Firefox, mas o atributo preload ainda não é suportado por este navegador por padrão, portanto, o uso do atributo preload ao exibir um site no Firefox não mudou nada.

No Edge, as fontes também são carregadas depois do desejado. Havia um sentimento de que o uso do Webload Pagetest usando o atributo preload apenas funcionou parcialmente. Ou seja, parecia-me que parecia um download de fonte dupla. Uma vez carregado anteriormente, a segunda vez depois.

No parágrafo anterior, falei sobre o fato de que "tive uma sensação" e que "parecia". O fato é que, quando tentei testar esse comportamento usando minha própria versão do Edge, os downloads "duplos" desapareceram. Agora, tive a sensação de que o uso do atributo preload não acelera o carregamento da fonte. Talvez essa diferença no comportamento da página tenha resultado da correção de algum erro no Edge, embora, nesse caso, o erro tenha sido corrigido com o custo de alterar o mecanismo de pré-carregamento de recursos.

Sumário

Aqui falamos sobre por que o pré-carregamento de fontes não prejudica, mesmo que os links para seus arquivos sejam feitos no código CSS incorporado na página.

Os navegadores nem sempre se comportam como queremos ou como esperamos. Mas temos ferramentas que ajudam a influenciar o comportamento dos navegadores, a orientá-los na direção que precisamos.

Eu costumava pensar que pré-carregar fontes no meu site é completamente inútil. Com tudo o que falei, aprendi uma lição importante para mim. Consiste no fato de que você nunca deve assumir nada.

No final, posso dizer que o pré-carregamento de fontes é uma ótima maneira de acelerar a saída de texto nas páginas da web.

Caros leitores! Você usa mecanismos de pré-carregamento de fontes em seus projetos da web?