aguarde...

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 www.route.nl download app.

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 icloud datenen?

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

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 ” die 15 beliebtesten kartenspiele kostenlos downloaden.

É 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 , 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 how to download insta videos!

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

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  linkedin logo herunterladen!

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

Posted in Blog
Write a comment