Corrigir o Google PageSpeed ​​Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

Resolver bloqueio de renderização Javascript e CSS

O teste do Google PageSpeed ​​[1] Eliminar o JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra propõe que você entregue os arquivos JS e CSS do seu site depois que o HTML estiver totalmente carregado - e, portanto, não pause seu carregamento de HTML para baixá-los.

Definição de script de bloqueio de renderização: Scripts que são carregados antes que o HTML DOM completo tenha sido analisado. Por exemplo, scripts incluídos no cabeçalho ou no conteúdo, sem nenhuma instrução específica para os navegadores atrasarem o carregamento do script até depois da pintura do HTML.

Elimine JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra: mostre como corrigi-lo

1. Tenha um sistema externo para otimizar seu site para você
   
2. Use um CDN que realizará todas as otimizações possíveis em seu nome, incluindo as três seguintes otimizações necessárias para corrigir e eliminar os recursos de bloqueio de renderização:
   
3. Adiar carregamento de arquivos Javascript
   
4. Carregar CSS após carregar HTML
   
5. Use um plugin do WordPress
   

Há muitas otimizações necessárias para corrigir, eliminar recursos de bloqueio de renderização e pode ser tedioso implementá-las sozinho - além disso, você terá que procurar constantemente novos testes incluídos no Chrome LightHouse e Google PageSpeed ​​entre outros testes de velocidade de página.

Não existe uma solução para eliminar recursos de bloqueio de renderização no código htaccess, pois o problema está relacionado ao DOM, ou seja, o conteúdo do site e a ordem em que os recursos incluídos são carregados, como Javascript e CSS, mas não apenas. Eles não podem ser acionados no Htaccess, mas apenas no conteúdo HTML DOM.

Se você resolver esses problemas para desktop, ao mesmo tempo eliminará recursos de bloqueio de renderização para celular, pois ambos são exatamente os mesmos!

Did you know that you can even have all these steps executed automatically for you by using an external  Acelerador de velocidade do site   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Adiar carregamento de arquivos Javascript

Para adiar o carregamento de seus arquivos JS [2], você pode adicionar a instrução assíncrona ou adiar aos seus links de scripts. O Async não garante que eles sejam carregados na mesma sequência - portanto, se você tiver vários scripts que devem ser executados um após o outro, o adiamento é preferível para garantir a sequência:

Carregar CSS após o carregamento do HTML

Para que o CSS seja carregado depois que o HTML completo for transmitido, o Google propõe [3] esse trecho de código para adicionar no final do seu HTML, por exemplo, após a tag de fechamento do rodapé e antes da tag de fechamento do corpo:

Para otimizar seu site, também é uma boa ideia remover o código CSS não utilizado, uma operação que pode ser tediosa se você não tiver conhecimento em web design. Se você não criou o seu site do seu site, pode ser mais sábio usar um sistema externo para remover o código CSS não utilizado em suas páginas em seu nome, como o salto ezoico, por exemplo, a nova versão (e totalmente gratuita) de seu site incrível Acelerador de velocidade.

Passe no teste de velocidade do site do Google!

Isso permitiu que eu passasse no teste Google PageSpeed ​​[1] Elimine JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra (juntamente com o Leverage browser caching [4]) em um site, aumentando de 51 no celular ( Fig. 1) a 72 (Fig. 2) e acima de 59 (Fig. 3) a 79 na área de trabalho (Fig. 4).

Como eliminar recursos de bloqueio de renderização no WordPress

Para eliminar recursos de bloqueio de renderização no WordPress, é necessário instalar um plugin como o JetPack.

Em seguida, vá para as opções para as quais você deve ser um administrador e vá para as opções do JetPack> Gravação> Desempenho e velocidade> marque Ativar acelerador de site, acelerar os tempos de carregamento da imagem, acelerar os tempos de carregamento de arquivos estáticos e ativar o carregamento lento imagens.

Criação do site mestre: inscreva -se agora!

Transforme sua presença digital com nosso curso abrangente de criação de sites - comece sua jornada para se tornar um especialista na web hoje!

Inscreva -se aqui

Isso eliminará os recursos de bloqueio de renderização no WordPress e carregará as páginas mais rapidamente, permitindo que o JetPack otimize suas imagens e sirva suas imagens e arquivos estáticos (como CSS e JavaScript) de sua rede global de servidores.

Além disso, não se esqueça de adiar as imagens de carregamento na tela usando uma função de carga preguiçosa. Enquanto costumava ser difícil e exigir uma biblioteca externa para adiar imagens de carregamento da tela, agora é possível nativamente em HTML5!

Para implementar o carregamento preguiçoso de imagens em seus sites, basta adicionar os valores preguiçosos aos atributos Carregando de imagens do seu site, e os navegadores recentes entenderão que essas imagens só devem ser solicitadas e carregadas se estiverem sendo exibidas, o que significa que o usuário rolar para baixo para os espaços reservados de imagem.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Além disso, o carregamento lento também funciona com iframes e é uma implementação importante para eliminar os recursos de bloqueio de renderização de suas páginas da Web.

Depois que os recursos de bloqueio de renderização terão instruções para carregar após o conteúdo principal, o que significa que o HTML DOM, você já ganhará muitos pontos no teste do Google Lighthouse, o teste de velocidade de velocidade do Google.

Tenha um sistema externo para otimizar seu site para você

Você sabia que poderia resolver todos os problemas do Google PageSpeed ​​em seu nome, sem muito esforço do seu site - exceto se registrar para uma avaliação gratuita e alterar seu DNS?

Usando a tecnologia Site Speed ​​Accelerator da plataforma Ezoic, todos os problemas usuais do Google PageSpeed ​​serão resolvidos pelo sistema, que será o intermediário entre o site e os visitantes. Eles otimizarão a página da Web para você antes de exibi-la ao seu visitante.

Torne-se verde simplesmente registrando-se para uma avaliação gratuita na plataforma Ezoic e tente você mesmo - eles farão com que seu site alcance os mais altos padrões de otimização de velocidade da página dentro de alguns dias: renderize imagens da próxima geração de webp, otimize CSS e JavaScript removendo CSS não utilizado e JS, carregar preguiçosamente imagens, redimensionar imagens, armazenar em cache as páginas do site, otimizar fontes, pré-conectar-se a todos os sites incluídos e muito mais.

Não é necessário cartão de crédito - tudo o que você precisa fazer é se cadastrar gratuitamente e experimentá-lo. Além disso, se seu site está lucrando com anúncios gráficos, além de torná-lo muito mais rápido, eles também podem fazer com que você ganhe várias vezes mais dinheiro do que com o Google AdSense, otimizando seus anúncios com aprendizado de máquina e inteligência artificial avançada.

Perguntas Frequentes

Como eliminar o JavaScript e o CSS de renderização em conteúdo acima da dobra?

Para eliminar o JavaScript e o CSS para renderizar para conteúdo acima das dobras, você deve garantir que os arquivos JS e CSS do seu site sejam carregados após o carregamento do HTML. Isso significa não fazer uma pausa no processo de carregamento HTML para baixar esses arquivos. Você pode adiar os arquivos JavaScript com o atributo assíncrono ou adiar e, para CSS, você pode usar código específico para carregá -lo após o HTML. Um sistema de otimização externo como * ezoico * também pode lidar com isso automaticamente.

Como os desenvolvedores da Web podem abordar a recomendação do Google PageSpeed ​​para eliminar o JavaScript e o CSS de renderização?

Os desenvolvedores da Web podem otimizar seu site minimizando os arquivos JavaScript e CSS, usando o carregamento assíncrono para JavaScript, ininando CSS crítico diretamente no HTML e adiando o carregamento de arquivos CSS e Javascript não críticos. A implementação dessas estratégias pode melhorar significativamente os tempos de carregamento e as pontuações do PageSpeed.

Pontuação perfeita do farol do cromo: O que acontece?