otimização de fontes do Google no WordPress

O prêmio para a página que mais solicita fontes da web vai para um site que fez 718 solicitações de fontes da web! Almanaque da Web

Sim, alguns designers/desenvolvedores são preguiçosos e adicionam todas as fontes possíveis para deixar o site bonito. Mas e quanto ao desempenho? Assim como qualquer outra otimização, as fontes precisam de alta prioridade, pois o texto é provavelmente a primeira coisa que o usuário vê em um site. Este guia mostrará diferentes métodos para otimizar o Google Fonts, especialmente para WordPress.

Use fontes do sistema

Você notou que as fontes em Médio.comadministrador do WordPress, GitHub carrega tão rápido? Bem, todos eles usam fontes do sistema.

/* System Fonts as used by GitHub */ body    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 

/* System Fonts as used by Medium and WordPress */ body    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 

As fontes do sistema são fontes pré-instaladas em todos os sistemas operacionais. Seu navegador não precisa fazer solicitações HTTP extras para baixar folhas de estilo ou arquivos de fontes. Sim, zero solicitações! O texto abaixo é renderizado na fonte do sistema: Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição tipográfica. Lorem Ipsum tem sido o texto fictício padrão da indústria desde 1500, quando um impressor desconhecido pegou uma prova de tipos e a misturou para fazer um livro de espécimes de tipos. Ela sobreviveu não apenas a cinco séculos, mas também ao salto para a composição tipográfica eletrônica, permanecendo essencialmente inalterada. Foi popularizado na década de 1960 com o lançamento de folhas Letraset contendo passagens de Lorem Ipsum e, mais recentemente, com software de editoração eletrônica como Aldus PageMaker, incluindo versões de Lorem Ipsum. Nada mal, certo? 😏 Você não terá muitas opções de design, mas se quiser o melhor desempenho, vá em frente!

Limitar famílias e pesos de fontes

Existem várias otimizações que mencionei abaixo. Mas limitar as famílias de fontes é o mais importante. Idealmente, você não deve ter mais de 2 (máximo 3) famílias de fontes. Da mesma forma, cada fonte terá pesos diferentes. Começa de 100 a 900. Incluir cada peso resultará em um arquivo de fonte adicional para download. Portanto, limite também o número de espessuras de fonte. Se você estiver incorporando fontes diretamente do Google Fonts, poderá selecionar diferentes pesos como este:

Aqui está um exemplo de escolha de famílias de fontes e pesos em Oxigênio:

Créditos: WPDevDesign

Use fontes variáveis ​​(novo!)

Como mencionei acima, para cada peso de fonte, o navegador precisa baixar arquivos de fontes separados. Portanto, se você incluir 400 e 700, dois arquivos de fontes serão baixados. Mas em fontes variáveis, uma única fonte pode se transformar em qualquer espessura de fonte. Aqui está uma demonstração (tente alterar a espessura da fonte): Leia mais sobre fontes variáveis: https://web.dev/variable-fonts/. Você pode filtrar fontes em Fontes do Google que suportam fontes variáveis:

Para você entender melhor, aqui está a diferença:

Família de fontes, peso(s)	Tamanho de fonte normal	Tamanho de fonte variável
Robô, 400	16KB	20 KB
Robô, 400 + 700	30 KB	35 KB
Robô, 400 + 700 + 900	43 KB	35 KB
Robô, 300 + 400 + 700 + 900	57 KB	35 KB
Robô, 100 + 300 + 400 + 700 + 900	59 KB	35 KB

Aqui está um exemplo de fonte variável com pesos de 100 a 900:

[email protected]" rel="stylesheet"/>

Combine fontes do Google

A combinação do Google Fonts reduzirá as solicitações HTTP. Não terá um grande impacto no desempenho com http/2. Mas ainda assim, uma boa prática a considerar. Antes de combinar:

Depois de combinar:

Se você estiver usando FlyingPress ative “Otimizar Google Fonts” e ele cuidará dessa otimização.

Corrigir flash de texto invisível

Se você analisou seu site usando o Google PageSpeed ​​​​Insights, você pode ter visto este erro “Garantir que o texto permaneça visível durante o carregamento da webfont”

Existe um exibição de fonte Propriedade CSS que informa se deve mostrar uma fonte substituta ao carregar a fonte ou torná-la completamente invisível. Se o usuário estiver em uma conexão lenta e você não tiver habilitado o substituto, o usuário poderá não ver o texto por algum tempo, também chamado de Flash de Texto Invisível (FOIT). No Google Fonts, adicionar “&display=swap” no final do URL corrigirá esse problema. Antes de adicionar troca:

Depois de adicionar troca:

FlyingPress pode corrigir esse problema automaticamente. Também desenvolvi um plugin independente para isso: Trocar exibição de fontes do Google.

Leia também

Carregar fontes do Google de forma assíncrona

O navegador deve esperar até que o CSS e seus arquivos de fontes estejam prontos para renderizar a página? Na minha opinião, o Google Fonts não deveria bloquear a renderização, já que uma fonte substituta pode ser exibida enquanto isso. Vamos carregar o Google Fonts de forma assíncrona. Adicione o seguinte código a :

Isso informa ao navegador para pré-carregar o Google Font em segundo plano (sem bloqueio de renderização) e o disponibiliza como uma folha de estilo quando estiver pronto.

Fontes embutidas do Google

Existem diferentes formatos de arquivo para fontes, como ttf, otf, woff, woff2 etc. O Google Fonts CDN é bastante inteligente para fornecer diferentes arquivos de fontes com base no dispositivo do usuário. Mas se você deseja oferecer suporte apenas a navegadores modernos, em vez de vincular à folha de estilo, incorpore diretamente o conteúdo CSS. O formato de fonte mais recente “woff2” é geralmente suportado (exceto IE e Opera Mini). Ele também terá o menor tamanho de arquivo.

Antes:

Depois (não minificado):

 

Dessa forma, seu navegador pode reduzir uma cadeia HTTP e baixar o arquivo de fonte imediatamente.

Adicionar dicas de recursos

Se você observar atentamente o CSS da fonte do Google, a folha de estilo será baixada de “https://fonts.googleapis.com/”. No entanto, após baixar o arquivo CSS, cada arquivo de fonte é baixado de “https://fonts.gstatic.com”. O navegador precisa fazer outra pesquisa de DNS após baixar a folha de estilo. Isso pode adicionar um pequeno atraso. Ao adicionar dicas de recursos, podemos dizer ao navegador que “vou me conectar a esta URL em breve, então prepare-a 😉”.

Antes de pré-conectar

Depois de pré-conectar

Adicione a seguinte linha a :

Ou usando Dicas de recursos pré-festa plugar:

Fontes do Google auto-hospedadas

Mas por que auto-hospedar? As fontes do Google são entregues a partir de seus CDNs super rápidos e podem já ter sido armazenadas em cache no navegador, certo?!

• O tempo de cache do navegador para folhas de estilo é apenas 24 horas e 1 ano para arquivos de fontes.
• Embora as fontes sejam entregues a partir de seu CDN, são necessárias duas pesquisas DNS adicionais e várias solicitações HTTP encadeadas.
• Os navegadores começaram a implementar o cache de chave dupla. O que significa que se o site A baixar uma fonte e armazená-la em cache, ela não estará disponível para o site B. O Safari já implementou isso. O Chrome está prestes a ser lançado. Você pode ler mais sobre isso aqui.
• A auto-hospedagem pode aproveitar sua conexão existente (http/2).

Portanto, é sempre melhor hospedar o Google Fonts por conta própria!

Antes da auto-hospedagem

Depois da auto-hospedagem

Como auto-hospedar Google Fonts no WordPress?

Meu Deus, meu Deus O plugin pode auto-hospedar Google Fonts. Mas achei difícil de usar. Temos que pesquisar manualmente as fontes ou detectar automaticamente abrindo páginas. Se você estiver usando FlyingPress, ative “Otimizar fontes do Google”. Ela cuidará da auto-hospedagem, combinação e tudo mais para você!

Conclusão

Na web em geral, o Google Fonts domina com o uso de 75%. Eles se esforçaram ao máximo para otimizá-los. Mas isso não significa que não haja mais espaço para otimizar. Muitas das otimizações podem ser feitas facilmente instalando FlyingPress como auto-hospedagem, pré-carregamento, fonte substituta, combinação, carregamento assíncrono, etc. Mas nenhum plugin será capaz de otimizar suas escolhas de design. Adicione as fontes que você realmente precisa, filtre os pesos desnecessários das fontes e, se possível, hospede-as automaticamente. Comente abaixo se você tiver alguma dúvida ou feedback. Eu leio e respondo a cada um deles em 8 horas!

https://w3b.com.br/otimizacao-de-fontes-do-google-no-wordpress/?feed_id=11992&_unique_id=66810ae7076d5