Se você ouvir reclamações sobre a velocidade de carregamento do seu site ou gostaria de carregar suas páginas da web mais rapidamente e melhorar sua experiência do usuário, você pode querer considerar a remoção recursos de bloqueio de renderização.
Independentemente do motivo, a rapidez com que um site aparece na frente do visitante pode afetar a experiência do usuário e fazer com que sua empresa perca conexões com o cliente. A experiência do usuário no site depende principalmente do caminho crítico de renderização e do gerenciamento dos scripts que seu site carrega durante o processo de renderização.
O que é renderização?
Todos os sites seguem um caminho para que o usuário veja e interaja com seu conteúdo. O caminho de carregamento do site é chamado de caminho de renderização crítica . Este caminho descreve as etapas de cada site para reunir e construir dados para o visitante e seu navegador. O que os navegadores fazem antes da renderização
Inserindo a URL de um site aciona o seguinte processo :
- A navegação é concluída quando um usuário solicita uma URL específica.
- Uma consulta DNS ocorre, em que um servidor fornece um endereço IP
- O navegador e o servidor do site executam um handshake TCP para fazer uma conexão
- As solicitações de conexão segura obtêm uma negociação TLS ou uma segunda troca de handshake
- O navegador recebe uma resposta e obtém o código do site
- O primeiro pacote de dados é recebido em um TCP Slow Start para regular o tráfego da rede
- O usuário envia respostas (ACKs) ao servidor para estabelecer as limitações de conexão e as taxas de envio.
- O navegador analisa as informações e transforma os dados em CSS Object Model (CSSOM) e Document Object Model (DOM).
- A estrutura DOM é construída (site e estrutura da página)
- Um scanner de pré-carregamento reúne recursos externos, como scripts e imagens.
- O CSSOM é construído (árvore de estilo)
- O JavaScript é compilado enquanto o CSSOM é construído
- O Accessibility Object Model (AOM) foi criado para dispositivos auxiliares para interpretar o conteúdo.
- A renderização ocorre usando as árvores CSSOM e DOM criadas anteriormente.
O que acontece quando você renderiza uma página?
Os sites são renderizados por meio do design de código para completar o layout, estilo e, às vezes, composição em um site. O CSS Object Model (CSSOM) e o Document Object Model (DOM)
Estilo
O DOM e o CSSOM combinam-se em uma árvore de renderização e a construção começa. A árvore de renderização organiza os nós visíveis, conteúdo e estilos computados para o site e cada nó exclusivo.
Layout
O layout é a etapa em que a arquitetura encontra a construção, e uma estrutura é criada para a página para exibir a largura, altura e localização de todos os nós na árvore de renderização. Cada objeto tem tamanho e posição determinados.
Os sites são organizados em uma estrutura de caixa. Essas caixas podem se ajustar a um número ilimitado de tamanhos diferentes de viewport. Quando a estrutura da caixa muda para dimensionamento, isso é chamado de refluxo .
Impressão: Primeira impressão e Primeira impressão com conteúdo (FCP)
No momento em que o navegador de um site faz qualquer renderização de uma página, é chamado de “Primeira impressão”. A primeira impressão pode ter uma cor de fundo sólida dependendo do código da página.
First Contentful Paint (FCP) refere-se ao momento mensurável em que um visitante do site pode visualizar o conteúdo da sua página (texto, imagens, vídeos, etc.). O FCP mede desde o início do carregamento da página até o ponto em que qualquer conteúdo é renderizado.
O First Paint e o FCP não são o mesmo que uma página de carregamento rápido ou desempenho rápido, mas a experiência do usuário torna-se mensuravelmente mais positiva quando os visitantes do site percebem uma página de carregamento rápido. O ajuste fino de suas primeiras impressões, tempo de carregamento e desempenho do site melhora a percepção do usuário sobre o tempo de carregamento.
As páginas da Web usam camadas onde os objetos se sobrepõem para organizar a estrutura. A composição é onde a página calcula a ordem das coisas para renderizá-las corretamente.
Os refluxos acionam uma recomposição, pois o posicionamento do objeto costuma mudar em um refluxo.
O que são recursos de bloqueio de renderização
Scripts, folhas de estilo e importações de HTML que executam lentamente, atrasam ou impedem o navegador de renderizar conteúdo em um site são recursos de bloqueio de renderização. Quando as pessoas se referem a recursos de bloqueio de renderização, geralmente estão se referindo a:
- CSS
- JavaScript na seção <head>
- Fontes carregadas de um servidor ou rede de distribuição de conteúdo
- Importações de HTML (páginas herdadas)
Há muitos CSS e JavaScript que não bloqueiam a renderização e são essenciais para carregar próximo ao topo. Priorize as folhas de estilo para garantir que qualquer visitante do site veja o conteúdo pretendido em vez do conteúdo sem estilo ou nada.
O que é JavaScript e CSS de bloqueio de renderização?
Durante o processo de renderização, seu navegador carrega as informações do site, primeiro executando as informações no <head>, incluindo todos os scripts. Todos os scripts precisam ser executados em ordem e totalmente processados antes que a página fique visível em seu navegador.
Scripts são construídos em uma fila, então a ordem do script no <head> é essencial durante o desenvolvimento. Dependendo do código, isso pode retardar ou impedir que o seu site carregue totalmente, e isso é o que chamamos de CSS e JavaScript de bloqueio de renderização.
Scripts em seu site WordPress podem vir de temas, trabalhos personalizados ou plugins adicionados para várias funcionalidades.
As imagens são recursos de bloco de renderização?
Se você está se perguntando se as imagens são recursos de bloqueio de renderização, não são. O tamanho de uma imagem ainda pode causar problemas de carregamento em sua página, mas não deve bloquear a renderização.
Por que eliminar recursos de bloqueio de renderização?
Os scripts de bloqueio de renderização podem diminuir o tempo de carregamento da página e arruinar a experiência do site para seus visitantes. A percepção de um site lento pode levar à perda de visitantes se a experiência do seu site for ruim. A baixa retenção de visitantes pode afetar os resultados do mecanismo de pesquisa e diminuir a lista de resultados.
Classificações mais baixas de SEO (Search Engine Optimization) significam uma redução no número de visitantes e perda de negócios em potencial. A perda de classificações reduz a contagem de visitantes e um site ruim reduz a retenção de visitantes; recursos de bloqueio de renderização podem ser um grande problema.
Se o seu site tem como objetivo uma pontuação elevada do Google PageSpeed Score , compreender os seus recursos de bloqueio de renderização é a chave para atingir esse objetivo.
Como eliminar recursos de bloqueio de renderização
Levar a sério as classificações de SEO do seu site e a experiência do usuário significa que ele precisa ter recursos de bloqueio de renderização tratados ou removidos. Se você não está construindo seu site do zero, comece a testá-lo para recursos de bloqueio de renderização.
Depois de ter esses recursos de bloqueio de renderização identificados, você escolherá seu método para resolver o problema e melhorar a funcionalidade do seu site.
Teste se o seu site tem recursos de bloqueio de renderização
Métodos para eliminar JavaScript e CSS de bloqueio de renderização
O WordPress permite que você gerencie quaisquer recursos que atrapalhem a renderização do seu site de algumas maneiras diferentes. O WordPress permitirá que você organize seus scripts de bloqueio de renderização e links com código, tags, organização e otimização de arquivos e plugins.
Os desenvolvedores profissionais também podem criar plugins ou temas personalizados que incorporam esses processos ao código.
Remover Javascript de Bloqueio de Renderização com Código
Três métodos para abordar recursos de bloqueio de renderização por meio de código são:
- Mova as tags de <script> e <link> para o final do seu código HTML
- Adicione atributos assíncronos ou deferir à tag para scripts não críticos.
- Remova o código JavaScript não utilizado.
O WordPress carrega um arquivo jQuery Migrate para fornecer compatibilidade com versões antigas do jQuery usadas por plugins e temas. Você pode usar um pedaço de código ou um plugin para parar o WordPress de carregar este arquivo jQuery Migrate se nada em seu site precisa dele para funcionar.
Elimine folhas de estilo com bloqueio de renderização
A natureza das folhas de estilo as torna recursos de bloqueio de renderização por natureza. Você pode resolver isso em seu site das seguintes maneiras:
- Divida o CSS por tipo de mídia (celular, tablet, desktop, etc.)
- Otimize o caminho de renderização crítico
- Combine arquivos CSS
Usando o WordPress e um construtor visual, você pode não controlar como uma página é construída diretamente, mas existem maneiras de contornar qualquer problema.
Bloqueio de renderização de endereços usando um plugin ou extensão do WordPress
Os plugins e extensões do WordPress são usados para organizar os scripts em uma página. Os plugins passarão pelas tags <script> e <link> de sua página e aplicarão os atributos defer ou assíncrono com base em diretrizes específicas.
Melhores práticas para otimizar a renderização
- Agrupe seus recursos de bloqueio de renderização para diminuir o impacto no carregamento da página.
- Reduza o tamanho do recurso, de forma que o número de bytes a carregar seja reduzido.
- Adie o download de recursos de bloqueio não renderizados.
- Não adicione CSS com a regra @import, pois é uma carga externa.
- Use um plugin do WordPress projetado para armazenar seus scripts em cache e otimizar seu JavaScript e CSS.
- Carregue fontes personalizadas localmente.
- Identifique CSS e JavaScript críticos e não críticos.
- Marque o código de bloqueio de renderização não crítico com atributos assíncronos ou defer.
- O código não usado deve ser removido.
Perguntas frequentes
- O que é “eliminar recursos de bloqueio de renderização?”
Os sites usam scripts e links para acessar arquivos e código para construir um site em um navegador. Às vezes, os scripts e links demoram um pouco para carregar e impedem que outras partes do site sejam renderizadas para o visitante do site. Eliminar os recursos de bloqueio de renderização significa lidar com os scripts, links, fontes e arquivos que tornam o carregamento lento ou interrompido do site.
- Como faço para corrigir recursos de bloqueio de renderização?
Existem diferentes maneiras de consertar recursos de bloqueio de renderização, e sua arma de escolha dependerá do que você precisa resolver. Descubra quais scripts e links são essenciais para carregar sua página e adie os outros até que sejam necessários. A priorização de código pode ser feita com código ou usando um plugin.
- Como me livro dos recursos de bloqueio de renderização em meu site?
Se você estiver usando o WordPress, a maneira mais fácil é usar um plugin de alta qualidade que gerencie seus scripts e cargas externas avaliando o que é crítico e o que pode ser adiado posteriormente no processo de renderização. Em vez de avaliar manualmente o código e atribuir tags a cada script para uma organização manual (o que ainda é possível e incentivado), o plugin faz isso automaticamente para você.
- Como corrigir recursos de bloqueio de renderização sem um plugin?
Se você não estiver procurando adicionar outro plugin ao seu site ou se um plugin não for uma opção para você, existem outras maneiras de consertar recursos de bloqueio de renderização. Você pode otimizar manualmente quaisquer scripts e links no código para garantir que sejam carregados em uma ordem eficiente ou para adiar o carregamento desse script até que as funções necessárias sejam concluídas.
0 comentários