🚙 🤵🏽 👨🏾‍🍳 Sobre o impacto positivo de fontes variáveis no desempenho de projetos da web 🚎 👸🏼 🤙🏼

Ao pensar em fontes da Web e em qual impacto elas têm no desempenho do site, elas costumam prestar atenção aos três indicadores a seguir:

Número de solicitações para baixar arquivos de fonte.
Tamanhos de arquivos de fonte.
O tempo até a renderização da primeira página.

Eu queria saber como o uso de fontes variáveis afeta esses indicadores. Portanto, eu os comparei com fontes regulares. Isso é o que eu fiz.

Reduza o número de solicitações para baixar arquivos de fonte

Existem várias maneiras de reduzir o número de solicitações de download de fontes. Por exemplo, isso é cache, usando CDN, reduzindo o número de variantes de fontes usadas. Não falarei aqui sobre o uso de CDN ou cache, pois geralmente é a mesma coisa quando se trabalha com fontes regulares, como quando se trabalha com fontes variáveis. Em vez disso, falarei sobre como reduzir o número de opções de estilo de fonte.

No mundo das fontes padrão, reduzir o número de opções de fontes usadas reduz o número de solicitações de download de fontes. Isso acontece porque o uso de menos estilos significa que menos arquivos de fonte são necessários. Geralmente, para isso, é necessário planejar a seleção da fonte e encontrar um equilíbrio entre design e desempenho, decidindo se o design mais atraente e "pesado" vale o impacto que isso causa no desempenho.

O uso de fontes variáveis, devido ao fato de serem capazes de armazenar diferentes opções de fonte em um arquivo, significa reduzir o número de solicitações para baixar arquivos de fonte sem precisar conversar com o designer para reduzir o número de opções de fonte usadas no projeto.

O uso de fontes variáveis leva a uma redução no número de solicitações apenas devido aos recursos do dispositivo dos arquivos dessas fontes. Mas se o arquivo contiver todas as informações sobre as diferentes opções de fonte, é apropriado perguntar como isso afeta o tamanho do arquivo.

Reduzindo tamanhos de arquivo de fonte

Existem várias maneiras de reduzir o tamanho dos arquivos de fonte. Normalmente, o primeiro passo desse processo é escolher o formato mais eficiente para armazenar fontes da web. Por exemplo - WOFF2.

IndingEncontrar ponto de referência

Eu conduzi um estudo dos tamanhos de vários arquivos de fonte. Em particular, usando a fonte Source Sans Pro da Adobe. Eu escolhi essa fonte específica porque seu código está hospedado no GitHub e porque é de código aberto.

Comparação dos tamanhos dos arquivos OTF da fonte Source Sans Pro - um arquivo que armazena uma fonte de uma saturação e um arquivo que armazena uma fonte variável.

Como ponto de referência, peguei um arquivo que descreve uma fonte de uma saturação da versão padrão do Source Sans Pro. Seu tamanho no formato OTF é 248 Kb. O tamanho do arquivo OTF de fonte variável é 405 Kb. Isso significa que o tamanho do arquivo da fonte variável é 73% maior que o tamanho do arquivo que contém uma versão do Source Sans Pro padrão.

Mas considerando o fato de que o arquivo de fonte variável contém todas as informações necessárias para variantes de fonte com qualquer saturação, o tamanho de um conjunto de arquivos de fonte regulares, com recursos semelhantes, será de aproximadamente 1170 Kb.

E isso é quase três vezes o tamanho do arquivo de fonte variável.

Mesmo se você precisar de uma fonte nas opções de saturação normal e em negrito, os dois arquivos necessários para armazenar essas opções de fonte acabarão sendo mais de um arquivo de fonte variável.

▍Comparação dos formatos OTF e WOFF2

Arquivos OTF, em comparação com os formatos compactados WOFF e WOFF2, acabam sendo bastante grandes.

Um arquivo com uma opção de fonte: OTF - 234 Kb, WOFF2 - 111 Kb. Arquivo de fonte variável: OTF - 405 KB, WOFF2 - 112 KB.

Se você comparar os tamanhos de arquivo de diferentes formatos, poderá reduzir bastante o tamanho do arquivo simplesmente usando o formato WOFF2.

Pareceu-me interessante quanta economia é fornecida usando o formato WOFF2 ao armazenar dados de fonte variáveis. O fato de o tamanho do arquivo ter diminuído de 405 Kb para 112 Kb leva ao fato de que o arquivo de fonte variável tem quase o mesmo tamanho do arquivo que armazena apenas uma versão do Source Sans Pro padrão.

Isso me surpreendeu e estou absolutamente certo de que essa economia não será possível em todos os casos. Mas é muito bom ver a eficácia da compactação WOFF2 quando aplicada a uma fonte variável.

▍ Reduzindo tamanhos de arquivo usando subconjuntos de fontes

Ao trabalhar com fontes padrão, há outra maneira de reduzir o tamanho dos arquivos. Consiste no uso de subconjuntos de fontes. Isso permite que você se livre de caracteres desnecessários ou reduza o conjunto de caracteres da fonte, por exemplo, deixando apenas os necessários para exibir textos digitados em latim.

Criar subconjuntos de fontes traz alguns riscos. O uso de subconjuntos pode fazer com que algumas partes do texto sejam exibidas usando uma fonte de fallback. Isso pode acontecer se os caracteres necessários foram excluídos acidentalmente da fonte usada.

Você pode criar subconjuntos de fontes usando ferramentas especiais - como o glifhanger. Em particular, um bom guia no GitHub foi preparado para esta ferramenta. Funciona com fontes padrão e variáveis.

Eu processei as versões padrão e variável do Source Sans Pro com glyphhanger e selecionei caracteres minúsculos e maiúsculos do alfabeto latino, além de números e caracteres especiais, como pontos de exclamação.

Usando subconjuntos de fontes para reduzir o tamanho dos arquivos

Esta operação nos permitiu reduzir o tamanho de um arquivo contendo uma fonte de uma saturação de 111 Kb para 16 Kb (economizar 85% é muito bom). No caso de uma fonte variável, o tamanho do arquivo diminuiu de 112 Kb para 27 Kb (75% é um nível aceitável de economia).

Novamente, esses resultados me surpreenderam. Eu esperava que um arquivo de fonte variável fosse maior. Considerando que, em situações típicas, eles usam a mesma fonte de saturação normal e em negrito, um arquivo de fonte variável de 27 KB é menor que dois arquivos, cada um contendo informações sobre a mesma fonte de saturações diferentes. Como resultado, acredito que essa abordagem fornece economias muito boas.

É verdade que é importante observar que apenas minhas experiências com a fonte Source Sans Pro são descritas aqui. Em outras fontes, os mesmos métodos podem levar a outros resultados não tão bons. O uso de uma fonte variável pode não produzir o mesmo nível de redução do tamanho do arquivo. Como resultado, recomendo que você tenha cuidado ao usar subconjuntos de fontes. Ou seja, antes de aplicar essa técnica de otimização na prática, vale a pena testar tudo bem, avaliá-la e entender o que é melhor para um projeto específico.

Considerations Considerações adicionais sobre tamanhos de arquivo

Algumas considerações adicionais a serem consideradas ao falar sobre tamanhos de arquivo de fonte são que o download de um arquivo grande levará mais tempo do que o download de vários arquivos menores.

Por exemplo, ao usar fontes padrão, os arquivos que armazenam informações sobre seu tipo de saturação normal geralmente são menores que outros. Como resultado, o corpo do documento pode ser exibido rapidamente, imediatamente após o download do pequeno arquivo correspondente. E mais tarde, depois de carregar a versão em negrito da fonte, você pode aplicá-la. A vantagem dessa abordagem é que ela permite exibir texto na página mais rapidamente do que usar uma fonte variável. O ponto aqui é que os arquivos de fonte padrão individuais são menores que o arquivo de fonte variável.

Ao usar uma fonte variável, é necessário aguardar o carregamento de um único arquivo grande antes de exibir o texto. Isso pode aumentar o tempo necessário para preparar uma página para o trabalho. No entanto, a necessidade de aguardar todos os dados da fonte antes da exibição do texto permite evitar o problema de que as fontes baixadas gradualmente afetam o texto já exibido. Além disso, como ao usar fontes variáveis, todos os tipos de fonte são carregados ao mesmo tempo, não precisamos forçar o navegador a redesenhar a página toda vez que uma nova versão da fonte é carregada.

Como resultado, quando se trata de tamanhos de arquivo de fonte, a conclusão que pode ser tirada sobre o uso de fontes variáveis depende da situação específica. Ou seja - a partir dos recursos do projeto, dos requisitos de design, das fontes usadas.

Reduza o tempo para renderizar primeiro

Agora, vamos falar sobre reduzir o tempo antes da renderização da primeira página. Quanto menor o tempo, melhor o desempenho. Isto é bastante óbvio. Além disso, deve-se ter em mente que, como já mencionado, o único arquivo de fonte variável grande pode carregar mais lentamente que alguns arquivos de fonte pequenos. Mas, mesmo com um pequeno atraso na saída da página, o único "flash de texto invisível" (Flash de texto invisível, FOIT) pode levar ao fato de que o usuário sentirá como se a página estivesse carregando mais lentamente do que realmente acontece. Como resultado, acredito que, em vez de colocar a página em risco de FOIT, devemos tentar limitar esse problema ao que é chamado de "Flash de texto não estilizado" (FOUT).

▍FOIT

É assim que a FOIT se parece.

Um exemplo da manifestação visual do FOIT

"Flash of invisible text" ocorre quando bloqueamos ou atrasamos a saída do texto até que a fonte desejada seja carregada. Como resultado, antes de carregar a fonte, a página ficará em branco.

OFOUT

E aqui está um exemplo de FOUT.

Um exemplo da manifestação visual de FOUT

“Flash de texto não estilizado” ocorre se o texto for exibido pela primeira vez usando uma fonte de backup e, quando a fonte desejada estiver disponível, ela alterna para ela ou substitui a fonte usada anteriormente.

Eu acredito que é melhor se o usuário encontrar FOUT do que a incapacidade de ler o conteúdo da página. Portanto, é melhor que, por um lado, visualizemos um cenário com a aparência de FOUT diante do usuário e, por outro lado, tentemos fazer com que o mínimo possível afete a usabilidade do projeto.

A maneira mais fácil de implementar o mecanismo FOUT em um projeto é usando uma propriedadefont-displaycom um valorswap. Isso permitirá que o texto seja exibido usando a fonte de fallback descrita no conjunto de fontes. Depois de carregar a fonte desejada, ela substituirá a fonte de backup. A propriedade font-displaypode aceitar outros valores, e eu recomendo que você os examine, mas para implementar o comportamento FOUT dos textos, o valor swapé um bom ponto de partida.

font-display: swap;

Um dos problemas do FOUT é que, ao substituir uma fonte, é possível ver um re-layout do texto na página, realizado para adaptar o conteúdo a uma fonte cujos parâmetros são "medidos" de maneira diferente dos parâmetros de uma fonte usada anteriormente.

Ao trabalhar com fontes padrão, podemos modificar propriedades como line-height, font-sizee letter-spacingfazendo isso para adaptar o texto para substituir a fonte e reduzir as trocas de conteúdo que ocorrem durante esse processo. Você pode fazer isso com a fantástica ferramenta Match Style Font . Foi criado por Monica Dinkulescu , que foi inspirada por este excelente artigo de Helen Holmes (sério - um artigo maravilhoso - eu recomendo a leitura).

Espero que, com o tempo, as fontes variáveis tenham um suporte mais amplo aos sistemas operacionais. Isso permitirá que você facilite a alteração nos layouts usando a fonte da variável do sistema como backup.

Fonte variável de backup

Imagine o que aconteceria se tivéssemos uma fonte do sistema que suporte a capacidade de controlar sua saturação, largura e tamanho óptico. Isso permitiria modificar as propriedades de uma fonte para ajustá-la às características das fontes especiais que usamos. Se você combinar isso com métodos existentes para definir propriedades comoline-heightoufont-size, isso nos dará a oportunidade de criar transições quase imperceptíveis entre as duas fontes. Isso significa que os usuários experimentarão manifestações menos visíveis do FOUT e que os navegadores, devido a pequenas alterações nos layouts ao alterar a fonte, terão que fazer menos trabalho no redesenho das páginas.

Seria maravilhoso, e espero que seja.

Sumário

O uso de fontes variáveis reduz o tamanho geral dos dados da fonte baixados pelo navegador. O fato de uma fonte variável ser usada em vez da fonte usual na página significa automaticamente que, para preparar a página para saída, você precisará executar menos solicitações.

Mesmo que o tamanho dos arquivos de fontes variáveis possa parecer bastante grande para você - preste atenção ao fato de que, usando essas fontes, você pode aplicar outras técnicas de otimização. Ou seja, estamos falando de formatos avançados de fontes, como WOFF2, sobre a formação de subconjuntos de fontes, sobre o uso da propriedade font-display: swap. Tudo isso sugere que, usando fontes variáveis, podemos obter uma redução nos dados da fonte e um aumento significativo na capacidade de estilizar as páginas.

Se conseguirmos lidar com alguns dos desafios de desempenho existentes, isso nos permitirá prestar mais atenção ao design. Ou seja, você não precisa mais procurar compromissos entre o design e o desempenho da página.

No campo do uso de fontes variáveis, temos a oportunidade de entender como essa tecnologia pode ajudar a criar uma experiência mais positiva do usuário ao trabalhar com nossos projetos. Devido ao fato de que o uso de uma fonte variável significa a possibilidade de usar muitas opções de fonte, podemos criar projetos que podem se adaptar de maneira flexível aos recursos dos dispositivos usados para trabalhar com eles. Isso permite criar texto acessível e legível sem se preocupar com o fato de que arquivos de fonte regulares adicionais afetarão gravemente o tamanho dos dados necessários para garantir que as páginas estejam funcionando.

Queridos leitores! Você usa fontes variáveis em seus projetos?

Sobre o impacto positivo de fontes variáveis ​​no desempenho de projetos da web