dicas de otimização para google fonts com WordPress

5 dicas para otimizar o uso de Google Fonts com WordPress

Recentemente analisando um site WordPress deparei-me com um site carregando 33 fontes, e isso tem um impacto no desempenho de um site WordPress significante, e inspirado nesse caso compartilharei 5 dicas para otimizar o desempenho de um site ao usar Google Fonts com WordPress. As dicas são focadas no WordPress, mas podem ser utilizadas em outras plataformas.

Uma ótima tipografia num site pode ter um impacto positivo nas conversões. Escolher as fontes certas e otimizá-las é crucial. O Google Fonts é o serviço mais popular de fontes na web, mas seu uso demasiado pode prejudicar a performance do seu site. Neste artigo, veremos 5 dicas para otimizar o desempenho ao usar o Google Fonts com WordPress.

O que são Google fonts?

Antes de compartilhar as dicas precisamos entender o que é o Google Fonts e como ele funciona. É um serviço da Google que oferece fontes de alta qualidade para serem usadas em sites e documentos. Ele foi criado para facilitar o acesso às fontes e permitir que os usuários escolham as fontes que melhor se adequam ao seu site ou documento. O Google Fonts é gratuito e fácil de usar.

Benefícios de usar Google Fonts com WordPress

Quando se trata de fontes para o seu site, o Google Fonts é uma ótima opção. Ele oferece uma grande variedade de fontes para escolher, e elas são todas gratuitas. Além disso, o Google Fonts é extremamente fácil de usar. Basta adicionar o código fornecido pelo Google à sua página, HTML e você estará pronto para começar a usar as fontes.

Uma das principais vantagens de usar o Google Fonts é que ele torna muito mais fácil personalizar o visual do seu site. Você pode escolher qualquer fonte e não precisa se preocupar em baixá-la ou instalá-la no seu computador. Além disso, as fontes do Google são compatíveis com a maioria dos navegadores. Outra vantagem é que as fontes do Google são extremamente leves, o que significa que elas não irão afetar negativamente o desempenho do seu site se usadas com moderação.

Como adicionar Google fonts com WordPress

Existem dois métodos clássicos para adicionar Google Fonts com WordPress. Primeiro é através de plugins existem vários do mercado que permitem adicionar google fontes sem código. A segunda opção é com a função wp_enqueue_style adicionada via functions.php ou um mini-plugin:

<?php
// como carregar google fonts com WordPress
function add_google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );Code language: HTML, XML (xml)

Para isso precisamos saber o caminho da fonte através do site do google fonts. Mas depois dessa breve introdução vamos às dicas para melhor a performance usando Google fonts com WordPress.

1 – Controle a quantidade de fontes

Primeiro item da lista é controle a quantidade de fontes do seu site. Basicamente antes de procurar remédio para ressaca o melhor remédio é não beber demais. Caso queira utilizar fontes personalizadas, tente se limitar de 4 a 6 variações de fontes. Assim criando um layout consistente e uma melhor performance.

2 – Escolha a troca de fonte apropriada

Quando definimos o carregamento de uma fonte, podemos definir como ela será renderizada. Através da propriedade css font-display informa ao navegador como ele deve proceder com a renderização do texto quando a fonte da web associada não foi carregada como no exemplo a seguir:

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}Code language: CSS (css)

Opções disponíveis para font-display:

ValorPeríodo de BloqueiPeríodo de Troca
AutoVaria de acordo com o navegadorVaria de acordo com o navegador
Block3 segundosInfinito
Swap0msInfinito
Fallback100ms3 segundos
Optional100msNone
Google fonts com WordPress

Período de bloqueio: O período de bloqueio começa quando o navegador solicita uma fonte da web. Durante o período de bloqueio, se a fonte da web não estiver disponível, a fonte será renderizada numa fonte de fallback invisível e, portanto, o texto não ficará visível para o usuário. Se a fonte não estiver disponível no final do período de bloqueio, ela será renderizada na fonte de fallback.

Período de troca: O período de troca vem após o período de bloqueio. Se a fonte da web ficar disponível durante o período de troca, ela será “trocada”.

Estratégias de exibição de fontes refletem diferentes pontos de vista sobre a troca entre desempenho e estética. Para a maioria dos sites, estas são as duas estratégias que serão mais aplicáveis:

Se o desempenho for uma prioridade máxima: use exibição de fonte: opcional. Ela tem uma melhor abordagem de performance: a renderização do texto é atrasada por não mais de 100ms e há garantia de que não haverá mudanças de layout relacionadas à troca de fonte.

Se a exibição de texto numa fonte da Web for uma prioridade máxima: use exibição de fonte: troque, mas certifique-se de entregar a fonte com antecedência suficiente para não causar uma mudança de layout.

3 – Otimize as fontes

Utilizando Google Fonts com WordPress podemos definir uma variação das nossas fontes para reduzir o tamanho total do arquivo de fontes. Exemplo:

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}Code language: CSS (css)

Um arquivo de fonte será baixado se a página contiver um ou mais caracteres que correspondam ao intervalo unicode. unicode-range é comumente usado para servir diferentes arquivos de fonte dependendo do idioma usado pelo conteúdo da página.

unicode-range é frequentemente usado em conjunto com a técnica de subconjunto. Uma fonte de subconjunto inclui uma parte menor dos glifos (ou seja, caracteres) contidos no arquivo de fonte original.

Glifos possíveis do Google fonts - dicas para uso de google fonts com WordPress
Glifos possíveis do Google fonts – dicas para uso de Google fonts com WordPress

Como podemos ver na imagem acima uma série de caracteres Com Google Fonts API podemos escolher um subset específico para uma fonte, utilizado a propriedade subset que aceita os seguintes valores.

  • latin
  • greek
  • cyrillic

Para definir o subset do Google Fonts com WordPress realizamos da seguinte forma, neste caso você estará forçando o subset latim por exemplo:

<?php
// como carregar um subset do google fonts com WordPress
function add_google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap&subset=latin', false );
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );Code language: HTML, XML (xml)

O número de glifos por fonte varia muito: as fontes latinas geralmente estão na magnitude de 100 a 1.000 glifos por fonte; as fontes CJK podem ter mais de 10.000 caracteres. A remoção de glifos não utilizados pode reduzir significativamente o tamanho do arquivo de uma fonte.

4 – Faça o pre-conexão das fontes críticas

Se o seu site carregar fontes de um site de terceiros, é altamente recomendável que você use a dica de recurso de pré-conexão para estabelecer conexões antecipadas com a origem de terceiros. As dicas de recursos devem ser colocadas no do documento. A dica de recurso abaixo configura uma conexão para carregar a folha de estilo da fonte.

Para pré-conectar a conexão usada para baixar o arquivo de fonte, adicione uma dica de recurso de pré-conexão separada que usa o atributo crossorigin. Ao contrário das folhas de estilo, os arquivos de fonte devem ser enviados por uma conexão CORS.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">Code language: HTML, XML (xml)

Evite realizar o preload de fontes

De modo geral, o uso da dica de recurso de preload para carregar Google fonts com WordPress deve ser evitado. Embora o pré-carregamento seja altamente eficaz em tornar as fontes detectáveis no início do processo de carregamento da página, isso tem o custo de retirar recursos do navegador do carregamento de outros recursos.

Na maioria dos cenários, inserir declarações de fonte e ajustar folhas de estilo é uma abordagem mais eficaz. Esses ajustes aproximam-se de abordar a causa raiz das fontes descobertas tardiamente – em vez de apenas fornecer uma solução alternativa.

Além disso, usar o preload como uma estratégia de carregamento de fonte também deve ser usado com cuidado, pois ignora algumas das estratégias de negociação de conteúdo internas do navegador. Por exemplo, o pré-carregamento ignora unicode-range e, se usado com prudência, deve ser usado apenas para carregar um único formato de fonte.

5 – Use fontes hospedadas no seu servidor

No papel, usar uma fonte auto-hospedada deve oferecer melhor desempenho, pois elimina uma configuração de conexão de terceiros. No entanto, na prática, as diferenças de desempenho entre essas duas opções são menos claras: por exemplo, o Web Almanac descobriu que sites que usam fontes de terceiros têm uma renderização mais rápida do que fontes que usam fontes originais.

Utilize Formatos modernos

Essa é uma dica que pode parecer bem antiga, mas ainda tem gente carregando fontes para desktop em sites web, formatos como .oft e .fft por conta da quantidade de variações que a fonte pode ser aplicada o tamanho da fonte é muito maior que um formato web.

Woff e woff2 são formatos otimizados na web você pode fazer uso dessas fontes no seu servidor ou através de um serviço online de fontes. Woff2 é a versão mais recente com uma otimização de 30% comparada a versão woff.

@font-face {
  font-family: Lato;
  src: url('path-to-lato.woff2') format('woff2'),
       url('path-to-lato.woff') format('woff');
}Code language: CSS (css)

Mais conteúdo relacionado

Se você gostou deste artigo sobre dicas para o uso de Google Fonts com WordPress, veja o conteúdo que usei como referência sobre boas práticas para fontes e confira mais conteúdo relacionado:


Publicado

em

por

Tags:

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *