Ultimas do CanalQb

Home / Tecnologia e Programação: / Blogger - Lighthouse - Script para pré-carregamento de fonte

Blogger - Lighthouse - Script para pré-carregamento de fonte

julho 31, 2023
@CanalQb

Blogger - Lighthouse - Script para pré-carregamento de fonte


Introdução:
A otimização de SEO (Search Engine Optimization) é fundamental para aumentar a visibilidade e a relevância de um blog no mundo digital. Entre as várias estratégias de SEO, o precarregamento de fontes se destaca como uma técnica valiosa para melhorar o desempenho do site e a experiência do usuário. Neste post, vamos explorar o que é o precarregamento de fontes, por que é importante para o SEO e como implementá-lo em seu blog no Blogger.

O que é o Precarregamento de Fontes?
O precarregamento de fontes, também conhecido como pré-busca de fontes (font preloading), é uma técnica que permite ao navegador baixar as fontes necessárias para uma página da web antes de elas serem realmente solicitadas. Ao fazer isso, o navegador pode exibir o conteúdo do site mais rapidamente, melhorando a velocidade de carregamento da página.

Por que o Precarregamento de Fontes é Importante para o SEO?
A velocidade de carregamento do site é um fator crucial para o SEO. Mecanismos de busca, como o Google, levam em consideração a experiência do usuário, e sites mais rápidos tendem a ser classificados mais alto nos resultados de pesquisa. Além disso, o tempo de carregamento influencia diretamente a taxa de rejeição (bounce rate) de um site. Se o seu blog demorar muito para carregar, os visitantes têm mais chances de abandoná-lo antes mesmo de visualizar o conteúdo, o que afeta negativamente o desempenho geral do site nos rankings dos mecanismos de busca.

O precarregamento de fontes ajuda a reduzir o tempo de carregamento da página, especialmente em dispositivos móveis e conexões de internet mais lentas. Isso cria uma experiência positiva para os usuários e aumenta a probabilidade deles permanecerem mais tempo no seu blog.

Como Implementar o Precarregamento de Fontes no Blogger:
Para implementar o precarregamento de fontes no seu blog no Blogger, você pode seguir os seguintes passos:

Identifique as Fontes: Verifique quais fontes são utilizadas no seu blog e quais delas precisam ser precarregadas. Geralmente, as fontes personalizadas que não são nativas do sistema precisam ser precarregadas.

Acesse o Painel do Blogger: Faça login na sua conta do Blogger e acesse o painel de controle do seu blog.

Edite o Modelo: No painel de controle, vá para "Tema" ou "Layout" (dependendo da versão do Blogger) e clique em "Editar HTML".

Localize a seção <head>: No código HTML do modelo, procure pelo elemento <head>. Normalmente, ele está localizado próximo ao início do código.

Adicione o Código de Precarregamento: Dentro do elemento <head>, adicione o seguinte código para precarregar as fontes:
<!-- Pré-carregamento da fonte -->
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<style>
  /* Coloque a regra de fonte aqui */
  @font-face {
    font-family: &#39;Open Sans&#39;;
    src: url(&#39;https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0e.ttf&#39;) format(&#39;truetype&#39;);
    font-weight: normal;
    font-style: normal;
  }

  /* Aplicar a fonte ao corpo do documento */
  body {
    font-family: &#39;Open Sans&#39;, sans-serif;
  }
</style>    

<!-- Pré-carregamento assíncrono da fonte "Open Sans" usando CDATA -->
<script>
// <![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  var link = document.createElement('link');
  link.rel = 'preload';
  link.href = 'https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0e.ttf';
  link.as = 'font';
  link.crossOrigin = 'anonymous';
  document.head.appendChild(link);
});
// ]]>
</script>
Salve as Alterações: Após adicionar o código de precarregamento, clique em "Salvar" para aplicar as alterações ao seu modelo.

Conclusão:
O precarregamento de fontes é uma estratégia essencial para otimizar a velocidade de carregamento do seu blog no Blogger. Ao implementar essa técnica, você melhora a experiência do usuário, aumenta a classificação do seu site nos resultados de pesquisa e, consequentemente, atrai mais visitantes. Com a concorrência cada vez mais acirrada na blogosfera, cuidar do desempenho e da otimização de SEO é fundamental para se destacar. Portanto, não deixe de aplicar o precarregamento de fontes em seu blog e colher os benefícios de um site mais rápido e bem classificado nos mecanismos de busca.

Teste outras fontes exemplo: https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2

Segue a demonstração onde está localizado o problema:

CanalQb


Nenhum comentário

Comente só assim vamos crescer juntos!

Observação: somente um membro deste blog pode postar um comentário.

Assinar: Postar comentários ( Atom )