Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web

As fontes da web adicionam personalidade ao seu site, mas também adicionam peso.

E se suas fontes demorarem muito para carregar, os usuários ficarão olhando para uma tela em branco. Ainda pior, seu site pode parecer instável à medida que o texto se desloca de forma inesperada.

Isso também prejudica os Core Web Vitals — as métricas que afetam diretamente seu ranking de busca e experiência do usuário.

Aqui, cada milissegundo importa.

Então, como você pode manter sua escolha de fontes da web sem sacrificar o desempenho?

Vamos dividir isso, um passo de cada vez.

Mas antes, o que exatamente são fontes seguras para a web e fontes para a web?

O Que São Fontes Seguras Para Web?

Fontes seguras para a web são as opções testadas e comprovadas que funcionam em todos os lugares. São fontes que a maioria dos dispositivos já possui, o que significa que você pode contar com elas para carregar rapidamente.

Aqui estão as fontes seguras para web que você pode usar:

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Mesmo com escolhas limitadas, um designer habilidoso pode usar essas fontes de maneira criativa.

Mas, as fontes seguras para a web são frequentemente usadas em excesso e dão ao seu site uma sensação de “similaridade” — mesmo quando você investiu muito esforço e dinheiro no design do site.

Então, como você faz isso ficar mais bonito?

Com fontes da web.

O Que São Fontes Web?

As fontes da web permitem que você se afaste das fontes seguras para a web frequentemente usadas em excesso.

Em vez de depender de fontes disponíveis no dispositivo de um usuário, as fontes web podem ser baixadas de uma fonte externa como Google Fonts ou diretamente do seu servidor para o dispositivo do seu usuário (temporariamente).

Isso permite que você use qualquer fonte personalizada que corresponda à sua marca ou necessidades de design.

Nós também selecionamos as melhores fontes do Google para te ajudar a começar.

Quando um usuário visita seu site, a fonte web é temporariamente baixada e aplicada ao texto usando a regra @font-face em CSS.

As fontes da web começam então a comportar-se como fontes locais — Elas se ajustam automaticamente aos tamanhos de tela, mantendo seu site com uma aparência nítida.

As fontes também evoluíram ao longo do tempo para terem formatos de armazenamento mais eficientes. Assim como os formatos de imagem, as fontes possuem TTF, WOFF, WOFF2 e EOT.

• Embedded OpenType (EOT): Compatível com versões antigas do Internet Explorer (abaixo do IE9). Não comprimido por padrão, mas a compressão GZIP pode ser aplicada.
• TrueType (TTF): Suportado por navegadores antigos Android (abaixo da versão 4.4). É descomprimido por padrão, mas pode ser comprimido com GZIP.
• Web Open Font Format (WOFF): Suportado pela maioria dos navegadores modernos e inclui compressão incorporada.
• Web Open Font Format 2 (WOFF2): Compatível com navegadores que o suportam, apresentando algoritmos de compressão personalizados que reduzem o tamanho do arquivo em cerca de 30% em comparação com outros formatos.

Os formatos modernos oferecem compressão para melhor desempenho e ajudam a manter o design do seu site funcional e visualmente distinto.

O Que São Métricas de Core Web Vitals (CWV)?

Aqui está o ponto: o Google deseja que todos os seus usuários tenham uma excelente experiência.

Qualquer site ou aplicativo que ofereça a melhor experiência aos usuários do Google receberá mais “amor” dos algoritmos do Google.

E como é medida essa “experiência”?

Google lançou os Core Web Vitals no início de 2020 justamente para esse propósito.

CWV é um conjunto de três métricas que informam ao Google como seu site ou aplicativo se comporta para os usuários que eles enviam para lá.

Pontuações mais altas nessas métricas podem ajudar-te a obter uma classificação mais alta no Google. Vamos rapidamente revisar essas métricas.

Maior Pintura de Conteúdo (LCP)

LCP mede quanto tempo leva para que o maior elemento visível na sua página seja carregado.

Isso geralmente é uma imagem ou vídeo, mas pode ser um grande bloco de texto ou um vídeo incorporado.

Quanto mais rápido isso acontecer, melhor será o desempenho do seu site aos olhos dos usuários e dos motores de busca.

Uma boa pontuação de LCP significa que os usuários não ficam esperando o conteúdo principal aparecer.

Interação Para a Próxima Pintura (INP)

INP mede o tempo entre a interação do usuário (como clicar ou tocar) e quando a página responde visualmente.

Ele oferece uma visão mais precisa da interatividade do que o FID, pois considera toda a jornada do usuário em vez de apenas a primeira interação.

Uma pontuação baixa de INP significa que seu site parece responsivo, melhorando o engajamento e a satisfação do usuário.

Deslocamento Cumulativo de Layout (CLS)

O CLS mede a estabilidade da sua página enquanto carrega.

Quando elementos se movem de forma inesperada, isso frustra os usuários e faz com que a página pareça pouco confiável.

Uma pontuação CLS baixa significa que sua página carrega de forma suave, sem alterações de layout que interrompam a experiência do usuário.

Como Otimizar Fontes da Web para Melhores Web Vitals Essenciais

Então, qual é toda a confusão sobre o desempenho das fontes web?

Por que não podemos simplesmente adicionar fontes da web e pronto? Bem, você pode.

Mas como já falamos antes, as fontes da web não são locais. Elas são buscadas de um servidor, baixadas e aplicadas ao seu site, e é aí que o problema está.

Leva tempo.

E se demorar muito, isso afeta seus Principais Indicadores da Web e taxa de conversão do website.

Vamos olhar algumas maneiras de otimizar fontes web para melhores vitais essenciais da web.

1. Pré-carregamento de Fontes

Queres que as tuas fontes estejam prontas no momento em que a página começa a carregar.

Então, quando a página estiver pronta para o usuário, a fonte também estará.

Isso é chamado de preloading.

O pré-carregamento indica ao navegador, “Ei, esta fonte é importante. Por favor, carregue-a imediatamente.“

Vamos supor que você está usando a popular fonte do Google, Roboto.

Você precisa adicionar um único atributo ao seu código HTML para pré-carregar a fonte: rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin

Após isso, o navegador sabe priorizar o download de Roboto, então seu texto aparece estilizado com a fonte certa mais rapidamente.

Isso reduz o tempo necessário para renderizar o maior bloco de texto (LCP), permitindo que os usuários vejam a versão final do seu site mais rapidamente.

2. Controle o Comportamento de Carregamento da Fonte com a Propriedade Font-Display

Entretanto, o pré-carregamento pode aumentar um pouco o tempo de carga inicial, pois as fontes são priorizadas.

A propriedade font-display permite que você controle como seu texto se comporta enquanto as fontes personalizadas ainda estão carregando.

Isso pode ajudar a evitar o temido Flash of Invisible Text (FOIT), onde os usuários veem espaços em branco, e o Flash of Unstyled Text (FOUT), onde a página aparece com fontes de reserva por um segundo e imediatamente muda para fontes personalizadas.

A propriedade font-display possui quatro maneiras de gerenciar o comportamento do texto: block, swap, fallback e optional.

Vamos olhar para os dois de que precisarias.

font-display: swap — Esta opção é a aposta mais segura para a maioria dos sites. Garante que o texto apareça imediatamente com uma fonte de reserva e troque para a fonte personalizada assim que estiver pronta.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Aqui, a fonte alternativa (como Arial ou outra fonte do sistema) será carregada instantaneamente, mantendo a página legível.

Quando Roboto é baixado, substitui a fonte de reserva sem deixar um espaço em branco na tela.

Aqui está uma demonstração de como o font-display swap se comporta no mundo real.

font-display: optional — Se você está preocupado com a velocidade, isso indica ao navegador para pular a fonte personalizada se ela não carregar rapidamente o suficiente. Isso funciona quando você não se importa que a fonte de substituição permaneça no lugar.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

Esta opção faz sentido quando o desempenho é mais crítico do que o design, tornando-a perfeita para um site que é totalmente focado em velocidade.

Aqui está um exemplo de como isso parece no mundo real. Você não perceberá a troca aqui, pois a maioria das fontes carrega rapidamente o suficiente.

No entanto, o argumento opcional é excelente caso seu servidor de fontes fique inativo ou lento.

3. Subconjunto de Fontes

A maioria das fontes vem com centenas, até milhares, de caracteres.

É provável que você só precise de uma pequena parte delas. Remover essas partes é chamado de subconjunto de fontes.

Isso mesmo, você pode remover caracteres desnecessários para reduzir o tamanho do arquivo de fonte.

Suppose que o seu site precisa apenas de caracteres em inglês.

Uma ferramenta como FontTools pode ajudar-te a reduzir o teu conjunto de fontes para incluir apenas os caracteres que realmente usarás.

Isso significa que todos os caracteres Unicode que não são necessários no idioma inglês podem ser removidos para economizar o tamanho do arquivo.

Isso reduz o tamanho do arquivo de, digamos, 80 KB para 30 KB.

Arquivos menores significam downloads mais rápidos, melhorando tanto o LCP quanto o CLS, já que a fonte carrega rapidamente e não altera o layout.

Aqui está um exemplo de como você removeria tudo, exceto caracteres em inglês, usando FontTools:

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

Agora, sua fonte Roboto contém apenas os caracteres latinos básicos necessários para o texto em inglês, tornando-a muito mais rápida para carregar.

Se preferires uma abordagem baseada em GUI, também podes experimentar o font-squirrel. Depois de carregares um arquivo de fonte, tens várias opções de personalização para adicionar ou remover

4. Comprimindo Fontes

Formatos de fonte modernos como WOFF2 oferecem compressão que pode reduzir o tamanho da fonte em até 30% em comparação com formatos mais antigos como TTF.

Usar a versão mais comprimida da sua fonte pode reduzir significativamente o impacto dela no tempo de carregamento da página.

Por exemplo, aqui está como você pode garantir que está usando WOFF2:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

Dessa forma, os navegadores que suportam WOFF2 o usarão por padrão, reduzindo os tempos de carregamento enquanto ainda exibem uma fonte nítida e de alta qualidade.

Contudo, se um navegador não puder usar WOFF2, ele retorna ao WOFF.

5. Codificação Base64

Esta é outra prática comumente utilizada para otimizar suas fontes web.

Entretanto, você precisa ser cauteloso sobre quando usar fontes codificadas em Base64.

A codificação Base64 é mais útil para fontes pequenas ou ícones.

Se for usado em excesso, você pode sobrecarregar o CSS, aumentando o tempo de carregamento da página mais do que apenas usando a fonte em si.

Se quiseres usar a codificação Base64 para uma fonte de ícones, primeiro converterias o arquivo da fonte para o formato Base64. Aqui está como poderia parecer:

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Este método funciona bem para pequenas fontes de ícones que você usa frequentemente em todo o site.

O arquivo CSS é carregado com a fonte embutida, eliminando uma requisição HTTP extra.

Entretanto, evite isso para fontes de corpo grande, pois pode retardar a renderização inicial da página.

6. <link> vs. CSS @import para Fontes

<link> e @import possuem uma diferença significativa no desempenho de carregamento.

A tag <link> carrega fontes de forma assíncrona, o que significa que não impede o restante da sua página de ser renderizada, enquanto @import é um pouco mais lento.

Use <link> sempre que possível.

“Para 90%+ dos casos, provavelmente desejas a tag <link>. Como regra geral, deves evitar regras de @import porque elas adiam o carregamento do recurso incluído até que o arquivo seja buscado.” Ilya Grigorik, Engenheiro e Assessor Técnico do CEO na Shopify

Carrega fontes de forma independente, permitindo que o resto da página seja carregado sem esperar pelo arquivo de fonte.

<link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

Este é o método preferido para carregar Google Fonts ou serviços de fontes externas similares.

Colocado na seção <head> do seu HTML, ele garante que a fonte comece a carregar cedo sem bloquear outros recursos.

Evite @import para fontes críticas.

@import espera até que o arquivo CSS esteja totalmente carregado, o que pode aumentar o tempo de carregamento e prejudicar o LCP.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

Utilizar @import para fontes só funciona para fontes secundárias ou menos críticas. Como prática, evite isso para qualquer coisa na primeira tela de conteúdo.

7. Reduza Deslocamentos Visuais/CLS Com Correspondência de Fontes e Ajuste de Tamanho

Deslocamentos visuais — ou mudanças de layout cumulativas (CLS), como o Google os denomina — ocorrem quando o layout muda inesperadamente, muitas vezes devido a trocas de fontes.

Para minimizar esse efeito, escolha fontes de reserva que se assemelhem de perto ao estilo e às dimensões da sua fonte personalizada.

A propriedade CSS size-adjust também permite controlar o tamanho da fonte de substituição, reduzindo deslocamentos visuais quando a fonte personalizada é carregada.

Se sua fonte personalizada for Roboto e uma fonte de contingência, ajuste o tamanho dela para corresponder ao Roboto, tornando a transição quase imperceptível.

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Aqui, o fallback do Roboto (por exemplo, Arial) mantém um tamanho consistente, reduzindo qualquer movimento perceptível quando o Roboto é completamente carregado.

Uma vez que você alinhe o tamanho e o espaçamento da fonte reserva com sua fonte personalizada, você garante que quando Roboto substituir Arial, a mudança seja mínima, mantendo o CLS baixo e melhorando a experiência do usuário.

8. Encontre o Lugar Certo Para Hospedar Fontes da Web

Autohospedar suas fontes não significa sempre um desempenho mais rápido.

Muitas opções de terceiros também funcionam bem—e às vezes, elas podem até carregar mais rápido.

O Web Almanac descobriu que certos sites que utilizam fontes de terceiros renderizam mais rápido do que aqueles com fontes hospedadas pelo próprio site.

Em última análise, o desempenho da fonte depende menos da escolha de hospedagem e mais de três fatores-chave:

• Rede de Entrega de Conteúdo (CDN): Garante uma entrega mais rápida ao servir fontes de múltiplas localizações no mundo todo.
• HTTP/2: Aumenta a velocidade de carregamento ao lidar com múltiplas solicitações em paralelo, reduzindo a latência.
• Política de Cache Web: Armazena fontes de maneira eficiente, para que não seja necessário baixá-las novamente a cada visita.

Em vez de ficar preso no debate sobre hospedagem, concentre-se em configurar esses essenciais para manter suas fontes carregando suavemente, não importa onde elas estejam hospedadas.

Como Simplificar a Otimização de Desempenho Web

Se as técnicas acima parecem muito manuais, um plugin como o Jetpack pode facilitar.

Jetpack, desenvolvido pela Automattic (os criadores do WordPress), é uma solução tudo-em-um criada especificamente para sites WordPress.

Combina funcionalidades essenciais para segurança, desempenho e marketing, todas gerenciadas a partir de uma única plataforma.

Mesmo que você não seja técnico, o Jetpack pode ajudar a melhorar a velocidade do site, fortalecer a segurança e aprimorar a experiência do usuário. (Sem configurações complexas necessárias!)

Crie o Equilíbrio Perfeito Entre Beleza e Desempenho

As fontes da web dão ao seu site uma aparência única e bonita.

No entanto, sem os ajustes certos, eles também podem deixá-lo lento e frustrar os usuários.

Embora tenhamos abordado técnicas essenciais de otimização de fontes, o ajuste fino do desempenho envolve inúmeros detalhes técnicos.

E obter os melhores resultados pode parecer esmagador.

É aí que entram os serviços profissionais de desenvolvimento web da DreamHost.

Nós garantiremos que seu site seja bonito e otimizado para velocidade e experiência do usuário.

Deixe-nos lidar com as questões técnicas enquanto você se concentra em construir um site que realmente se destaque.

---

Esta página contém links de afiliados. Isso significa que podemos ganhar uma comissão se você adquirir serviços através do nosso link, sem nenhum custo extra para você.