Acelere seu site em alguns minutos, ativando a troca de exibição de fontes da Web

A otimização de sites é de importância crucial para uma boa classificação no Google e em outros mecanismos de pesquisa, e quando você está competindo com o resto do mundo, cada milissegundo conta. Adiar o carregamento das fontes do seu site pode lhe dar um pequeno impulso.

As fontes da Web estão bloqueando a renderização

Se um recurso estiver bloqueando a renderização, ele deverá ser carregado antes que o site atinja sua primeira pintura com conteúdo. Os recursos de bloqueio de renderização devem ser mantidos no mínimo absoluto para qualquer site otimizado.

A desvantagem aqui é óbvia: se um cliente precisar carregar recursos adicionais antes do carregamento do site, precisará estabelecer uma conexão extra segura e um handshake TCP antes mesmo de começar a baixar o recurso de bloqueio de renderização, que pode adicionar centenas de milissegundos aos tempos de carregamento no celular. Se você está carregando grandes recursos de bloqueio, também está colocando seus tempos de carregamento à mercê do outro host.

A solução é alterar a maneira como as fontes são tratadas. Por padrão, as fontes não são opcionais e todo o texto é bloqueado até que possa ser renderizado com a fonte correta. Mas todos os usuários têm fontes padrão instaladas, como Arial e Times New Roman, por isso é possível exibir essas fontes primeiro e depois trocar para a fonte da Web depois de carregada.

Você pode especificar esse comportamento na sua diretiva @ font-face usando o parâmetro font-display:

 @ font-face {fonte-display: swap; }[/PRÉ]
 Se você estiver usando o Google Fonts, no entanto, a diretiva font-face será definida no arquivo CSS fornecido para adicionar a fonte. Portanto, você não pode editá-lo diretamente, mas, felizmente, o Google recentemente adicionou suporte à exibição de fonte: troca na API. Ele deve ser definido por padrão se você estiver adicionando uma nova fonte, mas se você a adicionou há um tempo atrás, é possível atualizá-la adicionando o parâmetro & display = swap URL no final: 
 
 https://fonts. googleapis. com/css?family=Lobster&display=swap 
 Isso é tudo que você precisa fazer. Depois que a fonte estiver configurada para trocar, ela interromperá o bloqueio de renderização. Você pode observar o carregamento do site na fonte padrão antes de piscar rapidamente para a atualizada; Para minimizar esse problema, localize uma fonte padrão que melhor corresponda à sua fonte web principal. A maioria dos usuários de desktop provavelmente não notará isso ao longo do restante do carregamento da página, embora se o usuário estiver em uma conexão móvel lenta, ele poderá notar a fonte surgindo um segundo depois. 
 Se você não está tentando reduzir cada milissegundo de desempenho, pode usar uma opção diferente: A opção font-display: fallback renderizará o bloco por um curto período de tempo (não mais do que 100ms na maioria dos navegadores ), volte a trocar sempre que a fonte decidir carregar. Isso elimina o problema de piscar para a maioria dos usuários de desktops com boas conexões, mas adiciona o pior dos casos ~ 100ms (dependendo do navegador) de tempo de carregamento se a fonte não carregar a tempo. 
 Pré-conectar fontes. gstatic. com 
 Esta dica não afeta o aspecto de bloqueio de renderização das fontes da web, mas acelera o Google Fonts em particular. 
 Quando um cliente precisa buscar um recurso de outra origem, ele deve executar um handshake TCP e (se o site foi criado a qualquer momento nesta década) estabelecer uma conexão HTTPS segura. Como isso leva tempo, a realização de viagens de ida e volta desnecessárias atrasará os downloads. 
 É exatamente isso que o Google Fonts faz. Primeiro, a folha de estilo CSS de fonts. googleapis. com é carregada com todas as informações sobre as fontes. O parâmetro src da face da fonte é então lido e o cliente se conecta a fonts. gstatic. com para fazer o download da fonte. O problema aqui é que o arquivo de fonte que queremos é fechado atrás da folha de estilo CSS em outra origem. 
 Para resolver esse problema, você pode preconnectfonts. gstatic. com. A pré-conexão é uma opção de link especial que informa ao navegador para executar o handshake HTTPS antes de receber um link para abrir. Reduz consideravelmente a latência de realizar duas viagens de ida e volta como esta. 
 Você pode pré-conectar-se com a seguinte tag de link: 
 
 < link rel = "pré-conexão" href = "https://fonts. gstatic. com/" crossorigin > 
 O parâmetro crossorigin informa ao navegador para executar um handshake HTTPS, em vez de uma simples pesquisa de DNS (o comportamento padrão). 
 Se você estiver servindo fontes por conta própria, precisará garantir que os cabeçalhos de controle de cache estejam configurados corretamente, para que suas fontes sejam carregadas do cache quando um usuário visitar novamente. Você também pode considerar usar uma CDN se quiser hospedar fontes, pois reduzirá a latência nas solicitações de objetos estáticos. 
Via: How to Geek