Como acelerar o Google Fonts no WordPress

Publicados: 2020-04-10

Hoje, vou abordar alguns métodos para otimizar e acelerar o Google Fonts no WordPress. As imagens, é claro, são e sempre serão a parte mais pesada de uma página da web, mas de acordo com o HTTP Archive, em outubro de 2016, as fontes da web são pouco mais de 3% do peso geral de uma página média.

Embora o peso das fontes da Web represente apenas uma pequena parte da página geral da Web, cada otimização que você faz ajuda a contribuir para tempos de carregamento mais rápidos. Confira abaixo algumas maneiras de acelerar essas fontes!

O que são fontes do Google?

Primeiro, para aqueles que talvez não saibam, o Google Fonts é um diretório de código aberto (gratuito) de mais de 800 famílias de fontes da Web que você pode usar em seu site. Eles também estão disponíveis para download localmente para impressão e outros usos. Milhões de sites WordPress utilizam o Google Fonts, pois é uma ótima maneira gratuita de melhorar a aparência e a usabilidade do seu site.

Se você está buscando desempenho puro, as fontes do sistema sempre vencerão, mas não há nada como o profissionalismo e a estética de uma boa fonte da web. E, de fato, a tipografia demonstrou afetar as conversões de maneira positiva. Mas tudo tem seu custo. Por isso, é importante entender como adicionar o Google Fonts ao seu site WordPress afeta a velocidade e o desempenho.

Como usar fontes do Google no WordPress

Existem algumas maneiras de adicionar o Google Fonts ao seu site WordPress. A primeira e padrão é pegá-los diretamente do Google. Esse método usa sua CDN global para entregar as fontes rapidamente de diferentes servidores de todo o mundo.

Ao adicioná-los ao seu site, haverá uma solicitação externa para fonts.googleapis.com .

googleapis

Também são solicitações externas para fonts.gstatic.com para as versões WOFF ou WOFF2, dependendo do suporte do navegador.

gstático

Plug-in do WordPress

Se você é iniciante no WordPress, a maneira mais fácil de adicionar o Google Fonts ao seu site é provavelmente com um plugin gratuito. O plugin Easy Google Fonts é um bom exemplo popular. Até o momento, ele possui mais de 300.000 instalações ativas com uma classificação de 4,9 de 5 estrelas.

fontes fáceis do google wordpress

Adicionar código de incorporação do Google Fonts

É importante notar que a maioria dos plugins do WordPress adiciona uma pequena sobrecarga e, portanto, prefiro adicionar o Google Fonts com seu código de incorporação muito mais simples de usar. Então, vá até o Google Fonts e escolha a fonte desejada. Para este exemplo, estou usando Roboto.

Clique na opção “ Personalizar ”. Este é um passo importante, pois cada família de fontes tem pesos de fonte diferentes. Normalmente você vai querer regular, médio e negrito.

Observação: cada peso de fonte incluído aumenta o tempo de carregamento geral de suas fontes, portanto, não selecione apenas todas elas. Quanto menos, melhor.

4 fontes roboto google

Em seguida, clique na opção “ Incorporar ”. É aqui que você deseja copiar o código de incorporação fornecido.

fontes do google incorporar

Pegue esse código e coloque-o na seção <head> do seu site WordPress. Existem diferentes maneiras de fazer isso, algumas podem preferir enfileirar as fontes, mas para este exemplo eu simplesmente adicionei o código ao arquivo header.php . Nota: Isso pode variar um pouco dependendo do tema que você está usando.

fonte de cabeçalho incorporar

Então, para realmente fazer seu tema WordPress usar o Google Fonts, você precisa adicionar alguns estilos CSS. Abaixo está um exemplo do que estou usando. Se o painel de administração do seu tema não tiver um editor CSS personalizado, você sempre poderá usar um plug-in gratuito como CSS personalizado e JS.

 body {font-family:roboto; font-size:18px;} h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;} h1 {font-size:28px;} h2 {font-size:26px;} h3 {font-size:24px;} h4 {font-size:20px;} h5 {font-size:18px;} h6 {font-size:16px;}

Agora que você conhece alguns métodos rápidos para adicionar Google Fonts ao seu site WordPress, agora vou fazer alguns testes rápidos para ver formas alternativas de acelerá-los. Fiz alguns testes primeiro com a configuração acima e a velocidade média saiu em 418ms. Nota: Cada teste foi executado cinco vezes e o resultado médio foi obtido.

teste de velocidade de cdn de fontes do google

Hospede o Google Fonts localmente

Outra maneira de entregar Google Fonts em seu site WordPress é hospedá-los localmente em seu servidor web. Se o seu público estiver em uma determinada localização geográfica e próximo ao seu servidor, pode ser mais rápido hospedá-lo localmente do que usar o Google Fonts. O CDN do Google Fonts é ótimo, mas adicionar essas solicitações externas adicionais e pesquisas de DNS pode causar atrasos.

Esse método normalmente só funcionará se você estiver usando hospedagem rápida. No exemplo, estou usando a hospedagem gerenciada do WordPress da Kinsta, que ironicamente é alimentada pelo Google Cloud Platform.

Para hospedar localmente, usei uma ferramenta gratuita chamada google-webfonts-helper. Isso permite que você baixe as fontes do Google localmente com mais facilidade e fornece todo o CSS. Abaixo está um exemplo do que vamos terminar com. Você precisará fazer o upload das fontes que você baixou para o seu servidor web. Nesse caso, eu os coloco em uma pasta chamada “fontes”.

 /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

Em seguida, precisamos remover o código de incorporação do Google Fonts no cabeçalho para que você não tenha mais essas chamadas externas. Fiz novamente alguns testes com a configuração acima e a velocidade média chegou a 386ms.

teste de velocidade de fontes locais do google

Nota: O servidor web está localizado em Iowa, e o teste de velocidade do Pingdom foi executado em Dallas, TX. Então, como você pode ver, mesmo que o servidor esteja localizado em outro lugar nos Estados Unidos, ainda é um pouco mais rápido carregar o Google Fonts localmente no servidor. Claro, você vai querer testar vários locais com base em seu próprio público.

Hospede o Google Fonts em seu próprio CDN

Agora para um terceiro cenário. No site acima, já estou usando um provedor de CDN de terceiros (KeyCDN) para hospedar todos os outros ativos (imagens, CSS, Javascript etc.). O que acontece se agora lançarmos nossas fontes no mesmo CDN, em vez do CDN do Google?

Estou usando o plug-in gratuito CDN Enabler WordPress. Na verdade, isso copia as fontes da pasta “fontes” no servidor web para o KeyCDN automaticamente. Em seguida, temos que ajustar um pouco o código para que o caminho para as fontes agora aponte para o CDN (como cdn.domain.com).

 /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

Fiz novamente alguns testes com a configuração acima e a velocidade média chegou a 384ms.

Como você pode ver, usar um CDN é mais uma vez um pouco mais rápido. Não muito, mas se você comparar com o CDN do Google, teste, com certeza é mais rápido. Parte disso é porque ele pode utilizar a mesma conexão HTTP/2 e ainda reduz a chamada externa e a pesquisa de DNS, assim como a hospedagem local. E, claro, uma vantagem desse método é que ele será globalmente mais rápido.

Resumo

Como você pode ver nos testes acima, o CDN do Google Fonts é ótimo, mas nem sempre é o mais rápido. É claro que sempre dependerá do seu próprio ambiente e de onde você está atendendo o tráfego, seja para um público local ou global.

Eu recomendo testar cada método acima por si mesmo e ver qual é o mais rápido e funciona melhor para o seu site WordPress. E lembre-se, carregue apenas os pesos de fonte que você realmente precisa!