Cada tipo de letra que o site usa é um ficheiro a descarregar, e cada variante (normal, negrito, itálico) é mais um. Se o navegador espera por eles para mostrar o texto, a página parece vazia; se mostra o texto numa letra e troca depois, a página salta. Tem três alavancas: pedir menos, dizer ao navegador o que fazer enquanto espera (font-display) e servir as fontes do seu próprio site.
1. Pedir menos
| O que fazer |
Porquê |
| Usar duas ou três variantes, não oito |
Cada peso e cada estilo é um ficheiro. Um tema com seis tipos de letra e cinco pesos cada é um problema sozinho. |
| Preferir o formato woff2 |
É o formato comprimido que os navegadores actuais aceitam. |
| Escolher só o subconjunto de que precisa |
O subconjunto “latin” inclui os acentos do português. Não é preciso descarregar alfabetos que o site não usa. |
| Considerar uma fonte variável |
Um único ficheiro pode cobrir vários pesos. |
| Ou usar as fontes do sistema |
Custo zero: não há nada para descarregar. Perde-se o desenho próprio da marca. |
2. Dizer ao navegador o que fazer enquanto espera
A regra CSS font-display define o comportamento. Os valores mais usados:
| Valor |
O que faz |
Efeito |
| swap |
Mostra já o texto numa letra do sistema e troca quando a certa chega. |
Texto sempre legível; pode haver um pequeno salto. Veja como corrigir o CLS. |
| optional |
Dá à fonte um tempo muito curto; se não chegar, fica a do sistema nessa visita. |
Sem saltos. Na primeira visita, pode não aparecer a letra da marca. |
| block |
Esconde o texto até a fonte chegar (por um tempo limitado). |
Texto invisível: evite em corpo de texto. |
Em ficheiros próprios, a linha vai dentro do @font-face. Quando as fontes vêm do Google Fonts, o endereço leva o parâmetro display=swap. O LiteSpeed Cache tem opções para tratar disto; os nomes mudam de versão em versão.
3. Servir as fontes do seu próprio site
| 1 |
Descarregue os ficheiros da fonte (em woff2) e envie-os para o site, ou use um plugin que as descarrega e as serve a partir do seu próprio site.
|
|
| 2 |
Aponte o CSS para esses ficheiros no @font-face.
|
|
| 3 |
Pré-carregue a fonte principal, só ela, com <link rel="preload" as="font" type="font/woff2" href="..." crossorigin>. O atributo crossorigin é necessário mesmo em fontes do mesmo site.
|
|
| 4 |
Confirme: F12, separador Network, filtro “Font”. As fontes devem vir do seu endereço e ter cache-control com prazo longo.
|
|
As vantagens: uma ligação a menos a outro endereço; as fontes entram na mesma cache e na mesma compressão do resto; e o endereço IP do visitante não vai para um terceiro só por carregar uma letra, o que interessa a quem cuida da privacidade do site. Os navegadores actuais separam a cache por site, por isso já não existe a vantagem antiga de “o visitante já tinha a mesma fonte de outro site”.
|
Cuidado com os tipos de letra de ícones. Um ficheiro de ícones completo pode pesar mais do que todas as letras do site juntas. Se só usa quatro ícones, use SVG ou um conjunto reduzido.
|
|
Meça antes e depois. Se o separador Network mostra as fontes entre os ficheiros mais pesados ou mais tardios, vale a pena. Se não, deixe como está e olhe para outro lado. Veja os avisos do PageSpeed Insights.
|
PRODUTO RECOMENDADO Alojamento de sites com cPanel Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde 5.940,00 Kz/mês (plano de 3 anos, com cupão) Ver planos |
Português
English
