Como eliminar recursos de bloqueio de renderização | Bônus de WP

Se você ouvir reclamações sobre a velocidade de carregamento do seu site ou quiser carregar suas páginas da Web mais rapidamente e melhorar a experiência do usuário, considere como eliminar 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 as conexões do 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 crítico de renderização. Este caminho descreve as etapas de cada site para coletar e criar dados para o visitante e seu navegador.

O que os navegadores fazem antes de renderizar

A inserção de um URL de site aciona o seguinte processo:

1. A navegação é concluída quando um usuário solicita uma URL específica.
   1. Ocorre uma pesquisa de DNS, na qual um servidor fornece um endereço IP
   2. O navegador e o servidor do site executam um handshake TCP para fazer uma conexão
   3. As solicitações de conexão segura obtêm uma negociação TLS ou troca de segundo handshake
2. O navegador recebe uma resposta e obtém o código do site
   1. O primeiro pacote de dados é recebido em um TCP Slow Start para regular o tráfego de rede
   2. O usuário envia confirmações (ACKs) ao servidor para estabelecer as limitações de conexão e taxas de envio.
3. O navegador analisa as informações e transforma os dados em CSS Object Model (CSSOM) e Document Object Model (DOM).
   1. A árvore DOM é construída (estrutura do site e da página)
   2. Um scanner de pré-carregamento reúne recursos externos, como scripts e imagens.
   3. O CSSOM é construído (árvore de estilo)
   4. JavaScript é compilado enquanto o CSSOM é compilado
   5. O Accessibility Object Model (AOM) é construído para dispositivos assistivos para interpretar o conteúdo.
4. 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 de design de código para completar o layout, estilo, pintura 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 se combinam em uma árvore de renderização e a construção é iniciada. A árvore de renderização organiza os nós visíveis, o conteúdo e os estilos computados para o site e cada nó exclusivo.

Esquema

O layout é a etapa em que a arquitetura encontra a construção e uma estrutura é criada para a página exibir a largura, a altura e a localização de todos os nós na árvore de renderização. Cada objeto tem tamanho e posição determinados.

Os sites são dispostos em uma estrutura de caixa. Essas caixas podem se ajustar a um número ilimitado de diferentes tamanhos de janela de visualização. Quando a estrutura da caixa muda para dimensionamento, isso é chamado de refluxo .

Pintura: primeira pintura e primeira pintura de conteúdo (FCP)

O momento em que um navegador de site faz qualquer renderização de uma página é chamado de “Primeira Pintura”. A primeira pintura pode ser uma cor de fundo sólida apenas 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 se torna mensuravelmente mais positiva quando os visitantes do site percebem uma página de carregamento rápido. Ajustar suas primeiras pinturas, o tempo de carregamento e o desempenho do site melhoram a percepção do usuário sobre o tempo de carregamento.

Composição

As páginas da Web usam camadas onde os objetos se sobrepõem para organizar a estrutura. 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 geralmente muda em um refluxo.

O que são recursos de bloqueio de renderização

Scripts, folhas de estilo e importações de HTML que retardam, 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 entrega de conteúdo
• Importações HTML (páginas legadas)

Há muitos CSS e JavaScript que não bloqueiam a renderização e são essenciais para carregar perto do topo. Priorize as folhas de estilo para garantir que qualquer visitante do site veja o conteúdo pretendido em vez de 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 executando primeiro 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.

Os scripts são construídos em uma fila, portanto, a ordem do script no <head> é essencial durante o desenvolvimento. Dependendo do código, pode retardar ou impedir o carregamento completo do seu site, e isso é o que chamamos de CSS e JavaScript de bloqueio de renderização.

Os 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, elas 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 a uma perda de visitantes se a experiência do seu site for ruim. A baixa retenção de visitantes pode afetar os resultados do seu mecanismo de pesquisa e diminuir sua lista de resultados.

Rankings mais baixos de Search Engine Optimization (SEO) significam uma redução nos visitantes e perda de negócios em potencial. Perder rankings 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 meta uma alta pontuação do Google PageSpeed, entender seus recursos de bloqueio de renderização é fundamental para atingir essa meta.

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 seu site precisa ter recursos de bloqueio de renderização tratados ou removidos. Se você não estiver criando seu site do zero, comece a testar seu site para recursos de bloqueio de renderização.

Depois de identificar esses recursos de bloqueio de renderização, você escolherá seu método para resolver o problema e melhorar a funcionalidade do seu site.

Teste se seu site tem recursos de bloqueio de renderização

Nunca é demais fazer uma avaliação em seu site para descobrir quaisquer recursos de bloqueio de renderização (experimente o Google PageSpeed ​​Insights). Se você otimizou ao máximo, está seguindo as práticas recomendadas e ainda está com problemas ou não sabe por onde começar, os avaliadores de página podem ser guias úteis.

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 e links de bloqueio de renderização com código, tags, organização e otimização de arquivos e plugins.

Desenvolvedores profissionais também podem criar plugins ou temas personalizados que integram esses processos no 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:

1. Mova as tags de <script> e <link> para a parte inferior do seu código HTML
2. Adicione atributos assíncronos ou adiados à tag para scripts não críticos.
3. 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 impedir que o WordPress carregue este arquivo jQuery Migrate se nada em seu site precisar dele para funcionar.

Elimine as folhas de estilo de 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:

1. Divida o CSS por tipo de mídia (celular, tablet, desktop, etc.)
2. Otimize o caminho crítico de renderização
3. Combinar 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ço usando um plug-in ou extensão do WordPress

Os plugins e extensões do WordPress são usados ​​para organizar os scripts em uma página. Os plug-ins passarão pelas tags <script> e <link> da sua página e aplicarão os atributos defer ou assíncrono com base em diretrizes específicas.

Passamos e testamos uma variedade de plugins para WordPress e continuamos a compartilhar coisas úteis como nossos plugins favoritos para otimização de velocidade no blog.

Tenha um WordPress Professional Elimine recursos de bloqueio de renderização para você

Alguns plugins exigem personalização e, embora pareçam simples, podem acabar não funcionando se configurados incorretamente. Não há vergonha em pedir ajuda a um profissional do WordPress e o WP Buffs tem vários especialistas que podem otimizar seu site.

Práticas recomendadas para otimizar a renderização

1. Agrupe seus recursos de bloqueio de renderização para diminuir seu impacto no carregamento da página.
2. Reduza o tamanho do recurso, para que o número de bytes a serem carregados seja reduzido.
3. Adie o download de recursos de bloqueio sem renderização.
4. Não adicione CSS com a regra @import, pois é um carregamento externo.
5. Use um plug-in do WordPress projetado para armazenar em cache seus scripts e otimizar seu JavaScript e CSS.
6. Carregue fontes personalizadas localmente.
7. Identificar CSS e JavaScript Críticos e Não Críticos.
8. Marque o código de bloqueio de renderização não crítico com atributos assíncronos ou adiados.
9. O código não utilizado deve ser removido.

Elimine a dor de cabeça e deixe um profissional do WordPress ajudar

Os WP Buffs são habilidosos em otimizar sites WordPress e melhorar o desempenho da página. Entendemos por que o desempenho é importante para o seu negócio e em quais áreas se concentrar para causar o impacto mais significativo.

Melhorar o desempenho do seu site e a experiência do visitante pode ser mais do que apenas recursos de bloqueio de renderização. WP Buffs pode dar uma olhada no seu site e endereço:

• Tamanhos de imagem
• Qualidade de imagem e formato de entrega
• Comprimento da página e porcentagem de conteúdo dinâmico
• Temas mal construídos
• Scripts desnecessários que causam atrasos
• Plugins mal construídos
• Scripts externos não usados
• Software desatualizado
• Plano limitado de hospedagem na web incapaz de atender suficientemente às necessidades do site

O WordPress pode ser uma plataforma razoavelmente fácil para construir um site, mas maximizar a experiência do usuário pode exigir um profissional treinado ou, muitas vezes, um ótimo provedor de serviços.

perguntas frequentes