Você pode ter visto do PageSpeed Insights "garanta que o texto permaneça visível durante o carregamento da fonte da web" ao testar a velocidade do seu site. Seu site pode estar pronto para ser renderizado pelo navegador mesmo antes que as fontes da web sejam totalmente baixadas. Portanto, os usuários não poderão ver ou acessar seu conteúdo até que a fonte da web seja baixada. Durante esse período, o conteúdo ficará oculto. Isso é conhecido como o Flash de Texto Invisível (FOIT) .
Uma melhor experiência do usuário pode ser alcançada garantindo que o texto permaneça visível durante o processo de carregamento da fonte da web. Isso ajuda a eliminar páginas em branco, bem como alterações indesejadas no layout.
Como o carregamento de fontes da web afeta o desempenho da página?
Isso afeta das seguintes maneiras:
- Impactos na pontuação do PageSpeed Insights
- Afeta a nota de mudança de layout cumulativa
- Classificações de First Contentful Paint e Largest Contentful Paint (Core Web Vitals)
- Experiência do usuário e taxas de conversão
A ausência de texto também impacta a experiência do usuário durante o carregamento de fontes da web: ninguém gosta de acessar um site com uma página em branco. Em poucos segundos, os usuários podem ter uma boa ideia se um site contém ou não as informações que procuram, lendo o título principal e o texto.
É essencial evitar mudanças repentinas de layout causadas por fontes da web para otimizar e melhorar a classificação de Mudança Cumulativa de Layout (CLS). Garantir que o texto permaneça visível durante o carregamento permite evitar movimentos inesperados de conteúdo (sem interação do usuário). As fontes da web podem causar mudanças de layout se o texto invisível piscar durante o download e a renderização.
Como garantir que o texto permaneça visível durante o carregamento de fontes da web
Esse instante específico é conhecido como Flash de Texto Invisível (FOIT, na sigla em inglês). A mensagem de erro “Garantir que o texto permaneça visível durante o carregamento da fonte da Web” aparece devido a esse FOIT, que é o responsável por sua exibição.
Exibição de fonte: trocar
A propriedade `font-display` é um descritor CSS acessível em todos os navegadores modernos. O descritor `font-display` verifica se a fonte foi baixada e a data do download para determinar como ela deve ser exibida. Por exemplo, uma regra que usa `@font-face` utiliza o atributo `font-display`.
Existem muitas variáveis distintas para a forma como as fontes são exibidas, incluindo bloco, troca, fallback e opcional. Use o valor de troca para evitar que o FOIT (Font on Iteration - Sobreposição de Fontes) ocorrae use o valor de troca para garantir que o texto apareça na tela o mais rápido possível.
Use o plugin Swap Google Fonts Display no WordPress para automatizar isso. O Elementor possui um recurso integrado para trocar as fontes do Google. Outros plugins de otimização, como WP Rocket, FlyingPress e Perfmatters, oferecem essa funcionalidade nativamente.
Para um carregamento de fontes mais rápido, use preconnects e preload:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Isso também reduzirá a síndrome de compressão do tronco encefálico (SCE).
Concluindo
Este guia explica como corrigir o problema do "relâmpago de texto invisível" no Page Speed Insights, garantindo que o texto permaneça visível durante o carregamento da fonte da Web.
O tempo de carregamento e a velocidade da página são fatores importantes para proporcionar uma boa experiência ao usuário, e corrigir esse problema pode melhorar significativamente essa experiência. Se uma página não exibir todo o conteúdo, ela não é considerada carregada. Portanto, para evitar timeouts e oferecer aos usuários o equilíbrio, a velocidade e a estabilidade que desejam, é preciso reduzir o tempo de carregamento do conteúdo da página.
Aumente a performance do seu WordPress com nossos serviços de otimização de sites WordPress!
