espera aí...

2 de abril de 2019
Carregue as fontes do Google 5 vezes mais rápido no WordPress
Carregue as fontes do Google 5 vezes mais rápido no WordPress

Você deve ter notado que, depois de adicionar as fontes do Google , o tempo de carregamento do seu site aumenta em cerca de 500 ms.

Se você estiver lendo este post, acho que já analisou seu site por meio do Google PageSpeed ​​Insights e recebeu o erro “Garantir que o texto permaneça visível durante carregamento da fonte da Web 

Carregue as fontes do Google 5 vezes mais rápido no WordPress

Mas por que as fontes do Google são lentas?

O Google tem vários centros de dados em todo o mundo e essas fontes são carregadas de sua CDN super rápida, próxima à sua localização. Mas o Google Fonts tem dois grandes problemas

Problema 1: para cada fonte, seu navegador faz 2 solicitações HTTP

Incorporar uma única fonte pode se parecer com isso

<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">

O que diz ao navegador é baixar um arquivo css que se parece com isso

/ * latin * /
@ font-face {
font-family : ‘ Open Sans ‘ ;
estilo de fonte : normal ;
font-weight : 400 ;
src : local (formato ‘ Open Sans Regular ‘ ), local ( ‘ OpenSans-Regular ‘ ), url ( https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2 ) format ( ‘ woff2 ‘ ) ;
intervalo de unicode : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ;
}

ver ogoogle-font.css cru hospedado com ❤ pelo GitHub

Agora o navegador inicia o download do novo arquivo de fonte (arquivo woff2)

Se você observar de perto os URLs, um é fonts.googleapis.com e outro é fonts.gstatic.com . Ambos são domínios separados, o que significa que o navegador precisa fazer duas pesquisas de DNS (uma causa raiz)

Então, se o seu site tem 2 fontes diferentes, o seu navegador precisa fazer 4 solicitações de HTTP para 2 domínios! Observe também que essas solicitações não estão em paralelo

Problema 2: o texto permanece oculto até que as fontes do Google sejam carregadas

Como vimos acima, em vez de baixar diretamente arquivos de fontes, o Google faz o download de arquivos CSS. Portanto, não temos controle sobre o texto flash-of-invisible (FOIT) e o flash-of-unstyled-text (FOUT). Confira o vídeo abaixo

É por esse motivo que recebemos erros no Google PageSpeed ​​Insights que diziam “Garantir que o texto permaneça visível durante o carregamento das fontes da web. Aproveite o recurso CSS de exibição de fonte para garantir que o texto seja visível para o usuário enquanto as fontes da Web estão sendo carregadas ”.

É apenas uma linha de código. Mas, por padrão, a fonte do Google não nos permite editá-lo

Como corrigi-lo? Carregue as fontes do Google mais rapidamente no WordPress

A solução é usar um script personalizado que injete o Google Fonts de forma assíncrona. Siga esses passos

  1. Encontre as fontes do Google existentes abrindo o site -> clique com o botão direito do mouse -> “Exibir a origem da página” e pesquise “fonts.googleapis.com”. Copie o URL completo. Será algo parecidohttps://fonts.googleapis.com/css?family=Patua+One%3A400&subset=latin&ver=2.1.3
  2. Cole o URL acima em https://googlefonts.3perf.com/ e copie o código gerado
  3. Adicione o código gerado ao seu WordPress <head>, editando header.phpou usando qualquer plugin como Simple Custom CSS e JS
  4. Remova as fontes do Google existentes. Caso contrário, não haverá efeito!

Se você estiver usando o plug- in de otimização automática, vá para Configurações, “Extra”, selecione “Remover fontes do Google”.

Carregue as fontes do Google 5 vezes mais rápido no WordPress

Ou você pode usar plugins como Desativar o Google Fonts

Agora, verifique novamente seu Google PageSpeed ​​Insights !

Comente abaixo se isso ajudou você ou se está enfrentando algum problema

Posted in Blog
Write a comment