Melhorando o desempenho das fontes da Web em seus temas WordPress

Webfonts são uma bênção para desenvolvedores de temas. Eles abrem um vasto cenário de fontes potenciais – muito longe dos velhos tempos, quando havia apenas um punhado de fontes seguras na web para escolher. Mas as webfonts têm desvantagens: mais significativamente, a inflação do peso da página. Para muitos temas, as fontes ficam atrás apenas do tamanho das imagens. Além disso, como as fontes do Google Fonts, Typekit e outros serviços de fontes da web são carregadas por um snippet Javascript, elas podem bloquear a renderização da página por um período de tempo indeterminado.

É possível minimizar o impacto do carregamento de fontes da web com alguma otimização criteriosa.

Carregamento assíncrono

Antes de discutirmos quaisquer otimizações, apresentarei uma pequena ferramenta útil chamada Carregador de fontes da Web. É um utilitário Javascript desenvolvido principalmente pela Adobe e vários outros fornecedores de fontes e inclui vários recursos úteis de otimização de fontes. Iremos usá-lo para algumas de nossas otimizações.

Quando as fontes da web são carregadas, elas bloqueiam a renderização do restante da página – se a fonte demorar alguns segundos para carregar, o resultado será um atraso indesejável antes que o usuário veja algo útil.

Uma alternativa para esse comportamento de bloqueio é o carregamento assíncrono. Ao carregar um arquivo de forma assíncrona, a renderização não é bloqueada e a fonte será carregada sempre que estiver disponível. Uma desvantagem do carregamento assíncrono é o Flash Of Unstyled Text que os visitantes podem ver enquanto a fonte carrega, mas existem maneiras de minimizar o impacto do FOUT.

Ler:  Buffer ganha primeiro lugar em 13 prêmios G2

Os usuários do Typekit não precisam fazer nada para obter fontes assíncronas, a não ser garantir que estão usando a versão mais recente do código incorporado do Typekit. Fontes TypeScript agora carregam de forma assíncrona por padrão.

O Google Fonts pode ser carregado de forma assíncrona com o Web Font Loader. Para carregar o Google Fonts de forma assíncrona, inclua o seguinte na seção principal do seu tema, com as alterações apropriadas para sua pilha de fontes.



WebFont.load({
Google: {
famílias: [‘Source Sans Pro:400’]
}
});

Você pode encontrar uma discussão mais aprofundada sobre este tópico em Blog do Lockdown Design.

Subconjunto

Subconjunto é o processo de carregar apenas as fontes necessárias. Por exemplo, se você precisar apenas de caracteres ocidentais, não há necessidade de baixar arquivos de fontes para idiomas não ocidentais. O mesmo vale para diferentes espessuras de fonte. Se você não precisa da versão condensada de uma fonte, não a inclua no download. É possível reduzir significativamente o tempo de download se você tomar cuidado com o que baixa.

Se você usar fontes Typekit em seu tema WordPress, poderá criar subconjuntos ao criar o kit – desmarque qualquer fonte desnecessária.

Para o Google Fonts, o Web Font Loader vem ao resgate mais uma vez. Para criar subconjuntos de uma fonte usando o Web Font Loader, você modificaria o código incorporado da seguinte forma.

Ler:  Como fazer um pré-carregador WordPress para qualquer tipo de site

WebFont.load({
Google: {
famílias: [‘Source Sans Pro:400:latin’]
}
});

Cache no armazenamento local

Idealmente, os usuários teriam que baixar os tipos de letra apenas uma vez, porque nas visitas subsequentes eles seriam carregados do cache do navegador. Na prática, o cache do navegador é um sucesso e um fracasso, especialmente em dispositivos móveis.

A Smashing Magazine desenvolveu um método para alavancar armazenamento local para armazenar fontes em cache. Existem algumas ressalvas nessa abordagem, a mais importante delas é a exigência de que os arquivos de fontes existam em seu servidor, o que pode ser uma proposta cara.

Se você estiver interessado em seguir esse método de otimização, a Smashing Magazine publicou um descrição detalhada do processo.

Novas publicações:

Recomendação