Quando se trata de melhorar o desempenho do site, cada milissegundo é importante. Uma das maneiras mais eficazes de reduzir o tempo de carregamento de recursos críticos é usar o atributo rel="preload" do link HTML. Nesta postagem, veremos como funciona o pré-carregamento, quando usá-lo e como ele pode melhorar drasticamente a experiência do usuário em seu site.

O que é rel="pré-carregamento"?

O atributo rel="preload" permite que você diga ao navegador para iniciar o download de determinados recursos antes que eles sejam necessários durante a renderização da página. Ao fazer isso, você pode garantir que os principais ativos, como fontes, folhas de estilo ou scripts, sejam obtidos mais rapidamente, reduzindo o tempo que leva para a página ser totalmente renderizada.

Em termos mais simples, você está informando ao navegador quais arquivos são importantes para uma experiência tranquila.

Por que você deve usar o pré-carregamento?

A maioria das otimizações de desempenho da web se concentra na redução do tempo necessário para carregar recursos. O pré-carregamento é especialmente útil quando há ativos críticos, como fontes, CSS ou arquivos JavaScript, que afetam diretamente a rapidez com que sua página é exibida e funciona.

Veja como o pré-carregamento pode ajudar:

• Reduza o bloqueio de renderização: Ao pré-carregar CSS ou fontes críticas, você evita problemas de bloqueio de renderização em que a página espera para carregar esses recursos antes de exibir o conteúdo.
• Melhorar o First Contentful Paint (FCP): O pré-carregamento garante que recursos importantes sejam baixados mais rapidamente, melhorando a velocidade com que o primeiro conteúdo visual aparece para os usuários.
• Melhor experiência do usuário: Uma página de carregamento mais rápido parece mais responsiva e melhora a experiência geral do usuário, especialmente para ativos com muitos recursos, como fontes ou imagens principais.

Sintaxe e uso

Vamos começar com um exemplo básico de como usar rel="preload". Abaixo está um snippet HTML simples que demonstra o pré-carregamento de uma fonte personalizada:

Neste exemplo:

• hrefespecifica o URL do recurso.
• as indica o tipo de recurso (por exemplo, fonte, imagem, script).
• type ajuda o navegador a entender o formato exato do arquivo (útil para fontes).
• crossorigin é necessário ao carregar recursos de um domínio diferente. O navegador vê essa tag e sabe que deve baixar a fonte antecipadamente, mesmo que o CSS que usa a fonte ainda não tenha sido aplicado.

Pré-carregando diferentes tipos de recursos
Você pode pré-carregar vários tipos de recursos essenciais para renderizar sua página. Vamos dar uma olhada em alguns exemplos comuns:

1. Pré-carregar fontes
As fontes costumam ser uma das principais causas de lentidão no carregamento inicial da página. Pré-carregá-los garante que o texto seja estilizado corretamente assim que o conteúdo for renderizado, evitando Flash de texto sem estilo (FOUT) ou Flash de texto invisível (FOIT).

2. Pré-carregar folhas de estilo
Folhas de estilo críticas que controlam o layout da sua página devem ser pré-carregadas para garantir que o navegador renderize a página o mais rápido possível.

3. Pré-carregar scripts
Se você tiver JavaScript necessário imediatamente para a interação do usuário, pré-carregá-lo pode ajudar a reduzir o atraso na execução do script.

4. Pré-carregar imagens
Imagens grandes, especialmente aquelas usadas acima da dobra, devem ser pré-carregadas para garantir que os usuários não vejam espaços em branco ou espaços reservados para imagens enquanto a imagem está sendo buscada.

Melhores práticas para usar rel="preload"

Embora o pré-carregamento seja uma ferramenta poderosa, você deve usá-la com cuidado. Aqui estão algumas práticas recomendadas:

1. Pré-carregar apenas recursos críticos: Pré-carregar tudo pode tornar seu site mais lento. Atenha-se aos recursos essenciais para a renderização inicial da página.

2. Use crossorigin para recursos externos: ao pré-carregar recursos de um domínio diferente, certifique-se de incluir o atributo crossorigin. Isso garante que seu recurso possa ser obtido corretamente sem problemas de CORS.

3. Garantir o tratamento adequado do cache: os recursos pré-carregados devem ser armazenáveis ​​em cache para evitar solicitações de rede redundantes. Isso reduz a carga no servidor e no navegador do usuário.

4. Não pré-carregar tudo: o pré-carregamento excessivo pode causar tensão desnecessária no navegador, levando à degradação do desempenho. Pré-carregue apenas ativos essenciais para o caminho crítico de renderização.

Exemplo de uso de rel="preload" em seu site
Aqui está um exemplo completo de como você pode integrar rel="preload" em uma página da web típica:

    
Preload Example
        

Neste exemplo, pré-carregamos os recursos essenciais que afetarão imediatamente a velocidade de renderização da página, como fontes, folhas de estilo e imagens.

Quando não usar rel="preload"

Embora o pré-carregamento seja poderoso, não é uma solução mágica para todos os recursos. Aqui estão alguns casos em que você pode querer evitar usá-lo:

Recursos não críticos: não pré-carregue ativos que não sejam essenciais para a renderização inicial da sua página.

Recursos imprevisíveis: se determinados ativos forem condicionais ou dependerem da interação do usuário (como imagens abaixo da dobra ou JavaScript adiado), é melhor deixar o navegador buscá-los quando necessário.

Conclusão
Usar rel="preload" é ​​uma maneira simples, mas eficaz de acelerar o seu site, informando ao navegador para buscar recursos críticos o mais rápido possível. Ao se concentrar no pré-carregamento de recursos essenciais, como fontes, folhas de estilo e imagens, você pode reduzir o tempo de carregamento e aprimorar a experiência do usuário.

A principal conclusão: pré-carregue apenas o que é crítico e o desempenho do seu site melhorará significativamente. Experimente em seu próximo projeto e veja a diferença que faz!