Como corrigir o erro “Garantir que o texto permaneça visível durante o carregamento da fonte da web” no PageSpeed

Você está recebendo o erro “ Garantir que o texto permaneça visível durante o carregamento da Webfont ” ao verificar a percepção de velocidade da página do Google e não sabe como resolver esse problema? Geralmente, eu sei como resolver esse problema em um site personalizado baseado em PHP ou HTML, mas quando se trata de WordPress, também tenho lutado.

Portanto, aqui neste guia, falaremos sobre como podemos resolver esse problema no WordPress (também compartilharei as etapas para corrigir esse problema em sites personalizados baseados em PHP e HTML) e aumentar a pontuação de velocidade da sua página removendo esse erro.

Por que mostra o erro “Garantir que o texto permaneça visível durante o carregamento da Webfont” no PageSpeed

Ao testar seu site no PageSpeed ​​Insight do Google, você pode ter visto um problema do erro “Garantir que o texto permaneça visível durante o carregamento da fonte da Web” e, ao clicar no erro, ele mostrará os URLs completos dos arquivos de fonte.

Como você pode ver na imagem acima, também estou recebendo o erro “garantir que o texto permaneça visível durante o carregamento do Webfont” neste site e, quando clico nele, ele mostrará os URLs completos dos arquivos do Google Font.

Por que mostra um erro?

Quando um site é carregado no navegador e detecta qualquer arquivo de fonte personalizado aplicado a um texto, ele espera até que a fonte seja baixada e, até esse momento, o texto fica invisível. Depois que os arquivos de fonte personalizados são baixados, ele se aplica imediatamente ao site, e isso é conhecido como flash de texto invisível.

Como corrigir Flash de texto invisível?

Corrigir o flash do texto invisível também pode corrigir o erro “garantir que o texto permaneça visível durante o carregamento da Webfont” em seu site, e corrigir esse problema é muito fácil.

Você pode corrigir esse problema facilmente adicionando

 exibição de fonte: swap;

código em seu atual

 @Tipo de letra {

}

propriedade CSS.

Mas o que é @font-face?

Um @font-face é uma regra CSS simples através da qual você pode aplicar uma fonte personalizada a um texto. Tem extensões como woff2, woff, ttf, etc. Por exemplo, um código @font-face ficará assim:

 @Tipo de letra {

família de fontes: Roboto, sem serifa;

exibição de fonte: swap; // ---> Ele irá corrigir este problema.

estilo de fonte: normal;

peso da fonte: 400;

src: url(Roboto.woff2);

}

Agora aplicamos essa fonte em um parágrafo usando;

 p{

família de fontes: Roboto, sem serifa;

tamanho da fonte: 18px;

}

Quando um site é carregado, indica que a tag de parágrafo tem uma fonte “ Roboto ” aplicada e instantaneamente começa a baixar a fonte usada em uma tag de parágrafo. Até baixar a fonte, o texto permanece invisível.

É por isso que ele mostra o erro “ garantir que o texto permaneça visível durante o carregamento da fonte da web” na velocidade da página e na adição de exibição de fonte: swap; em seu CSS @font-face atual pode resolver esse problema.

Como corrigir esse problema no WordPress

Se você estiver usando o WordPress e ele mostrar esse erro no insight de velocidade da página, poderá resolver esse problema facilmente usando etapas simples. Compartilhei as etapas para resolver esse erro em fontes locais e fontes do Google.

Solução para fontes do Google

Inicialmente, o Google Fonts não adicionará a exibição de fonte: swap; regra para sua fonte, mas agora eles suportam um novo parâmetro de consulta para aplicar a exibição de fonte: swap; adicionando o parâmetro &display=swap no final do arquivo de fonte do google.

Aqui como fica;

Se você é um desenvolvedor de temas ou sabe como editar arquivos de temas no WordPress, pode adicionar facilmente o parâmetro &display=swap em seu arquivo de fonte do Google.

Mas se você não estiver confortável em editar os arquivos de tema do WordPress, você ainda pode usar vários plugins como o Asset CleanUp para adicionar este parâmetro e resolver o problema “garantir que o texto permaneça visível durante o carregamento do Webfont”.

Como resolver este problema usando o plug-in “Asset CleanUp”

Para aplicar o parâmetro display=swap em seu arquivo do Google Fonts, você precisa baixar e instalar o plugin Asset CleanUp da biblioteca do WordPress, que está disponível gratuitamente.

Depois de baixar e ativar o plug-in, clique na opção “ Asset CleanUp ” no painel de administração do WordPress> e clique em “ configurações ” em “Asset Cleanup” para abrir a página de otimização.

Quando estiver na página de configurações , clique na opção " Google Fonts ". Quando você clica na opção Google Fonts , ele abre ainda mais as configurações de onde você pode gerenciar facilmente várias configurações para otimizar os arquivos de fontes do Google.

Algumas dessas configurações podem incluir;

Quando estiver nas configurações de arquivos de fonte do Google, nas configurações de “ Aplicar exibição de fonte: valor da propriedade CSS ” e altere de “ Não aplicar (padrão) ” para “ swap (mais usado) ” e ele adicionará o &display= swap para todos os seus arquivos de fonte do Google.

Solução para fontes de temas e plugins

Na maioria das vezes, seu tema ou plugin do WordPress carrega outras fontes, como fontes incríveis ou fontes de ícones, e também mostra o mesmo problema no Google PageSpeed ​​Insight.

Esta também é uma correção fácil, mas requer um pouco de conhecimento de edição do WordPress. Se você não estiver confortável em editar os códigos, você também pode usar a versão premium do plugin “ Asset CleanUp Pro ” para adicionar automaticamente a exibição de fonte: swap; propriedade CSS em seu tema WordPress ou folhas de estilo de plug-ins.

Para resolver esse problema usando o Asset CleanUp Pro, clique na opção “ Asset CleanUp ” no painel de administração do WordPress> e clique em “ configurações ” em “Asset Cleanup” para abrir a página de otimização.

Quando estiver na página “ Asset CleanUp ” > “ Configurações ”, clique na opção “ Local Fonts ” para abrir as configurações de personalização para Local Fonts.

Depois que as configurações de personalização de “ Fontes locais ” forem abertas em seu navegador, selecione “ swap (mais usado) ” na opção de seleção fornecida em “ Aplicar exibição de fonte: valor da propriedade CSS ” para adicionar automaticamente exibição de fonte: troca; em todas as suas folhas de estilo.

Empacotando

Neste guia, tentamos ao máximo explicar como você pode corrigir o problema “garantir que o texto permaneça visível durante o carregamento da fonte da web” ou “flash de texto invisível” no insight de velocidade da página.

O tempo de carregamento da página e a velocidade da página são fatores importantes para oferecer boas experiências ao usuário, e corrigir esse problema pode proporcionar uma experiência do usuário muito melhor. E uma página não deve ser considerada carregada a menos que esteja mostrando tudo sobre ela.

Portanto, você deve reduzir o tempo de carregamento do conteúdo na página para que as páginas não atinjam o tempo limite e os usuários possam obter o equilíbrio, a velocidade e a estabilidade que desejam. Se você também está sofrendo com a velocidade lenta do site, verifique nosso post sobre otimização da velocidade do site para otimizá-lo corretamente.