Como pré-carregar solicitações de chave no WordPress

O uso de fontes da Web, CSS e JavaScript pode tornar seu site mais exclusivo e interativo. Mas aguardar o carregamento desses tipos de arquivo pode ser frustrante para os visitantes do seu site.

É aqui que pré-carregar as principais solicitações no WordPress pode ser útil. Ao informar aos navegadores para baixar esses tipos de arquivo no início da cadeia de solicitação, eles estarão disponíveis quando o navegador estiver pronto para renderizar o conteúdo. Por sua vez, isso pode acelerar o tempo de carregamento percebido da página e fornecer uma melhor experiência geral na web.

No guia de hoje, discutiremos o que significa pré-carregar as principais solicitações, juntamente com os possíveis benefícios de desempenho para o seu site. Em seguida, explicaremos como fazer isso em seu site WordPress com Google Fonts, Font Awesome, CSS e JavaScript.

O que significa “solicitações de chave de pré-carregamento” no WordPress?

Quando alguém visita seu site, o navegador envia várias solicitações HTTP ao servidor do site, solicitando os arquivos que compõem seu conteúdo. O servidor levará um certo tempo para começar a responder a essas solicitações e enviar informações ao navegador, o que é conhecido como Time to First Byte (TTFB).

Em seguida, o navegador começará a baixar o conteúdo (PHP, JavaScript e CSS) dos arquivos do seu site e renderizá-lo para exibir páginas visíveis (HTML) no front-end. Depois que esse processo for concluído, o visitante poderá ver sua página da Web totalmente carregada.

Um navegador usará uma 'cadeia de solicitação' para solicitar e renderizar conteúdo em uma sequência. Isso significa que há várias etapas de solicitações menores dentro das maiores, com o resultado final sendo que um visitante pode visualizar o conteúdo em seu site.

Essencialmente, 'pré-carregamento' significa dizer ao navegador do usuário para baixar os arquivos essenciais primeiro, em vez de esperar até o final do processo de carregamento. Normalmente são fontes (principalmente fontes da web), CSS, JavaScript e, às vezes, imagens.

As solicitações de chave são exclusivas porque seu navegador normalmente não solicitaria esses arquivos até o final do processo de carregamento. Assim, haverá um atraso quando o navegador chegar a esse ponto e descobrir que deve solicitar os arquivos. Ao dizer ao navegador para carregar esses arquivos primeiro, ele os terá à mão quando precisar renderizá-los.

Quais são os benefícios de pré-carregar solicitações de chave?

O principal benefício de pré-carregar as principais solicitações é melhorar o desempenho percebido do seu site. Isso significa que o navegador de um usuário pode renderizar seu conteúdo mais rapidamente e os visitantes sentirão que seu site é mais rápido. Mas, na verdade, seu site está apenas pré-carregando o conteúdo essencial para que pareça dessa forma.

Além disso, as solicitações de pré-carregamento são essenciais para suas pontuações do Core Web Vitals. Essas métricas do Google medem o desempenho de carregamento, a interatividade e a estabilidade visual do seu site, fornecendo uma pontuação que indica a facilidade de uso geral do seu site.

Estes são os três principais sinais vitais da Web:

• Largest Contentful Paint (LCP): quanto tempo leva para o maior elemento da sua página carregar.
• First Input Delay (FID): Quanto tempo leva para o navegador responder à interação do usuário com seu conteúdo.
• Mudança cumulativa de layout (CLS) : quanto os elementos se movem enquanto a página está carregando.

Em particular, o pré-carregamento de solicitações de chave pode ter um impacto significativo em sua pontuação de LCP. Ao pré-carregar imagens, fontes e outros arquivos grandes, você poderá reduzir o tempo de renderização.

Além disso, o pré-carregamento pode afetar sua pontuação do First Contentful Paint (FCP). Essa métrica mede quanto tempo leva para o primeiro elemento HTML em sua página ser exibido. Se você puder pré-carregar esse elemento, o navegador poderá mostrar as partes iniciais do seu conteúdo mais rapidamente.

Além disso, os mecanismos de pesquisa, como o Google, favorecem o carregamento rápido e o conteúdo interativo. Portanto, além de proporcionar uma melhor experiência do usuário, melhorar essas métricas de desempenho pode impulsionar a Otimização para Mecanismos de Busca (SEO) do seu site.

Essencialmente, as melhorias de desempenho podem ajudar a impulsionar as páginas do seu site nas classificações e colocar seu conteúdo na frente de mais usuários. Além disso, o pré-carregamento de solicitações de chave é relativamente fácil. Mais adiante neste post, mostraremos exatamente como fazer isso!

Existem desvantagens em pré-carregar solicitações de chave?

O pré-carregamento de solicitações pode parecer uma ótima ideia do ponto de vista do desempenho. Dito isto, tentar pré-carregar muitos elementos pode funcionar contra você.

Um navegador só pode processar tantas solicitações de uma só vez. Então, se você disser para pré-carregar vários elementos, isso pode criar um 'gargalo' que funciona contra o tempo de carregamento da página do seu site.

Portanto, vale a pena escolher cuidadosamente quais elementos devem ser pré-carregados para obter o maior impacto. Na maioria dos casos, serão fontes da Web, CSS e JavaScript, pois tendem a ser os arquivos mais pesados.

Como verificar se seu site está pré-carregando solicitações de chave

Algumas ferramentas diferentes podem identificar se seu site está pré-carregando solicitações e sugerir elementos que podem se beneficiar dessa técnica de otimização. Por exemplo, o PageSpeed ​​Insights é uma das opções mais populares para identificar problemas de desempenho em seu site.

Para usar esta ferramenta gratuita, basta inserir a URL do seu site e clicar em Analisar . Isso gerará um relatório de desempenho detalhado.

Role para baixo para ver as oportunidades de desempenho, diagnósticos e auditorias aprovadas. Você deve encontrar a sugestão de solicitações de chave de pré-carregamento em uma dessas seções.

Se você preferir não navegar entre seu site e o PageSpeed ​​Insights, considere instalar a extensão Google Lighthouse Chrome. Ele permite que você gere relatórios de dentro do navegador e visualize as métricas de desempenho de uma página.

Da mesma forma, o GTMetrix pode gerar relatórios de desempenho detalhados para qualquer site. Ele permite que você analise páginas de vários locais e acompanhe seu desempenho ao longo do tempo.

Na guia Estrutura do GTMetrix, você poderá ver se o pré-carregamento de solicitações de chave pode ajudar no desempenho do seu site.

Como pré-carregar solicitações de chave no WordPress

Antes de fazer qualquer alteração significativa em seu site WordPress, como adicionar código personalizado, sempre vale a pena fazer um backup completo. Essa precaução de segurança significa que você terá uma versão funcional do seu site em mãos caso cometa algum erro.

É aqui que o Jetpack VaultPress Backup é útil. Este plug-in amigável cria automaticamente backups abrangentes de todos os seus dados, incluindo seus arquivos, tabelas de banco de dados e informações do produto WooCommerce. Esses backups são salvos em tempo real e armazenados com segurança na nuvem. Você pode restaurá-los com apenas alguns cliques — mesmo que esteja em trânsito ou não consiga acessar seu site.

1. Fontes

Às vezes, as fontes podem ficar escondidas em outros arquivos do seu site, incluindo arquivos CSS e JavaScript. Infelizmente, isso pode retardar o processo de renderização da página.

Para pré-carregar solicitações com fontes no WordPress, copie e cole este código na seção <head> da sua página:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

Lembre-se de substituir “Font-Name” pelo nome da sua fonte. Além disso, incluir “origem cruzada” é essencial se sua fonte vier de uma fonte de terceiros, pois informa ao navegador que ele precisa carregar o arquivo de um servidor externo.

2. Fontes do Google

O Google Fonts inclui uma biblioteca de código aberto com quase 1.500 famílias de fontes. Se você estiver procurando por fontes da Web personalizadas para usar em seu site, provavelmente encontrará uma lá.

O uso do Google Fonts pode ajudar a trazer um design exclusivo ao seu site, mas o navegador também deve baixar os arquivos de fonte ao renderizar o conteúdo. Dependendo da sua fonte, isso pode aumentar o tempo de carregamento da página.

Ao pré-carregar o Google Fonts, também é uma boa ideia "pré-conectar" primeiro. Esta etapa informa ao navegador com antecedência que ele precisará se conectar a um site de terceiros (por exemplo, Google Fonts) para recuperar um recurso.

Além disso, após adicionar seu código de pré-carregamento, vale a pena incluir um link para sua folha de estilo. Dessa forma, se o navegador do usuário não conseguir pré-carregar a fonte em questão, ele ainda poderá renderizá-la.

Basta adicionar o seguinte código à seção <head> da sua página:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

Dentro do seu código, você precisará substituir “$fontURL” por um link para sua fonte do Google. Por exemplo, pode ser assim:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Em seguida, certifique-se de salvar suas edições!

3. Fonte incrível

Font Awesome é um ótimo recurso para ícones e fontes personalizados, com opções gratuitas e premium em sua biblioteca. Você pode usar alguns desses ícones para sobrecarregar o design de seus menus, cabeçalhos, rodapés e áreas de conteúdo.

Assim como o Google Fonts, pré-carregar ícones do Font Awesome pode ser uma boa ideia para acelerar o tempo de carregamento percebido da página. Basta adicionar este código à seção <head> da página:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Você precisará trocar o caminho do arquivo pela fonte ou ícone que está usando em seu site. Em seguida, salve suas alterações!

4. CSS

Cascading Style Sheets (CSS) é uma linguagem de design que funciona em conjunto com o HTML para determinar o estilo e a apresentação de uma página da Web. Com CSS personalizado, você pode alterar rapidamente a aparência de diferentes elementos.

Cada página HTML estilizada em seu site terá uma folha de estilo correspondente com todo o seu CSS. Um navegador precisa carregar esse arquivo ao renderizar uma página da Web, portanto, vale a pena informar ao navegador que ele deve pré-carregar esse recurso.

Felizmente, há uma maneira fácil de pré-carregar o CSS. Basta adicionar este código à seção <head> da sua página:

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

Certifique-se de substituir “styles.css” pelo nome da folha de estilo. Além disso, lembre-se de que, embora esse código funcione no Google Chrome, ele não é compatível com todos os navegadores.

5. JavaScript

JavaScript é outra das linguagens de script comuns usadas no WordPress. Ele permite que você crie conteúdo dinâmico como animações, carrosséis de imagens em movimento e feeds de atualização automática.

A renderização do JavaScript geralmente é mais complexa porque seus arquivos são comparativamente pesados, exigindo um processo mais longo para exibir o conteúdo. É por isso que dizer a um navegador para pré-carregar JavaScript pesado pode ser benéfico para acelerar o tempo de carregamento da página.

Assim como no CSS, você só precisará adicionar esta simples linha de código à seção <head> da página:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

Como antes, substitua “ui.js” pelo nome do arquivo JavaScript e salve suas alterações.

Bônus: instale um plug-in gratuito para melhorar o Core Web Vitals

Solicitações de pré-carregamento é apenas uma técnica que você pode usar para melhorar as pontuações do Core Web Vitals do seu site WordPress.

Se você está procurando uma solução mais abrangente (e gratuita!), considere instalar o Jetpack Boost. Esta ferramenta é desenvolvida pela Automattic, a mesma empresa por trás do WordPress.com.

Este plug-in fácil de usar verifica todo o seu site e fornece uma pontuação em computadores e dispositivos móveis. Além disso, o Jetpack Boost não é útil apenas para os três Core Web Vitals. Seus métodos de otimização podem melhorar outras métricas, incluindo Time to Interactive (TTI) e Total Blocking Time (TBT).

Você poderá usar um sistema de alternância simples para otimizar o carregamento de CSS, adiar JavaScript não essencial e imagens de carregamento lento. A versão premium do plug-in também gerará automaticamente CSS crítico sempre que você fizer alterações em seu site.

Como alternativa, o Jetpack Complete pode levar seu site WordPress a um nível totalmente novo. Este plano contém várias ferramentas para desempenho, incluindo acesso à rede de entrega de conteúdo (CDN) de imagem do Jetpack, que pode economizar largura de banda e melhorar o tempo de carregamento da página. Além disso, você obterá ferramentas avançadas de segurança e crescimento do WordPress.

Perguntas frequentes sobre o pré-carregamento de solicitações de chave

Neste ponto, você deve ter um bom entendimento de como pré-carregar as principais solicitações no WordPress. Ainda assim, examinaremos algumas perguntas frequentes apenas para ter certeza!

As solicitações de pré-carregamento melhoram a experiência do usuário?

As solicitações de pré-carregamento podem melhorar a experiência do usuário diminuindo os tempos de carregamento percebidos do seu site. Como os visitantes não terão que esperar tanto tempo para que seu conteúdo seja processado, eles estarão menos propensos a se sentirem frustrados e potencialmente trocarem seu site por outro.

As solicitações de pré-carregamento melhoram o Core Web Vitals?

O pré-carregamento de solicitações importantes no WordPress pode melhorar suas pontuações de Core Web Vitals, principalmente quando se trata de Largest Contentful Paint (LCP). Na verdade, quando você decidir quais elementos pré-carregar, seria sensato incluir seu conteúdo 'maior' ou 'principal', pois é isso que provavelmente se beneficiaria mais com isso.

Pré-carregar solicitações de chave x pré-carregar ativos críticos

Vale a pena observar que pré-carregar solicitações de chave significa o mesmo que pré-carregar ativos críticos. Ambos os termos referem-se a dizer a um navegador para carregar recursos específicos com antecedência para renderizar o conteúdo de uma página mais rapidamente.

Pré-carregamento x pré-conexão x pré-busca

Pré-carregamento, pré-conexão e pré-busca podem parecer conceitos semelhantes, mas na verdade significam coisas ligeiramente diferentes. São todas tags que instruem um navegador em que ordem carregar o conteúdo, mas têm funções distintas.

Primeiro, o pré-carregamento envolve o carregamento do conteúdo necessário para renderizar a página no navegador do usuário. É uma tag de alta prioridade que preparará um recurso em alguns segundos.

Por outro lado, a pré-busca diz respeito aos elementos subsequentes que podem precisar ser carregados. O navegador procurará recursos com antecedência e os armazenará em seu cache. É uma tag de prioridade muito baixa, então você não deve usá-la para recursos urgentes.

Por fim, a pré-conexão é usada quando você deseja instruir um navegador a se conectar a um domínio específico. Se o seu site usa um recurso de um site de terceiros específico (como o Google Fonts), a pré-conexão informa ao navegador que ele precisará se conectar a esse domínio em algum momento do processo de carregamento.

O que mais posso fazer para melhorar o desempenho do meu site?

Várias tarefas podem ajudar a melhorar o desempenho do seu site WordPress, incluindo:

• Usando um CDN para servir seu conteúdo para visitantes em todo o mundo
• Adiando (ou excluindo) CSS não utilizado
• Eliminando recursos de bloqueio de renderização
• Minimizando CSS e outros recursos
• Fazendo menos solicitações HTTP

Também vale a pena escolher um host WordPress de alta qualidade que forneça recursos de otimização de desempenho, como cache dedicado, garantia de tempo de atividade e uma vasta rede de data centers em todo o mundo.

Melhore o desempenho do seu site WordPress pré-carregando as principais solicitações

Os tempos de carregamento da página podem afetar significativamente a experiência do usuário do seu site e as classificações do mecanismo de pesquisa. Então, você vai querer fazer tudo ao seu alcance para acelerar o tempo que leva para um navegador exibir o conteúdo do seu site.

Quando você pré-carrega as principais solicitações em suas páginas, o navegador do visitante terá recursos (como fontes, CSS e JavaScript) prontos. Assim, não haverá demora para carregar seu conteúdo e torná-lo acessível aos usuários.

O pré-carregamento de solicitações importantes é apenas uma etapa para melhorar o desempenho do seu site. Usando o Jetpack Boost, você pode configurar facilmente seu site para carregamento lento de imagens, adiar JavaScript não essencial e muito mais. Melhor ainda, o plugin é gratuito. Confira o Jetpack Boost hoje!