Ir para o conteúdo principal

Como corrigir o bloqueio de renderização de JavaScript e CSS no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Você quer eliminar o bloqueio de renderização de JavaScript e CSS no WordPress?

Se você estiver testando seu site no Google PageSpeed ​​insights, provavelmente verá uma sugestão para remover scripts e blocos de renderização CSS. No entanto, ele não fornece detalhes sobre como fazer isso no seu site WordPress.

Neste artigo, vamos mostrar como corrigir facilmente o bloqueio de renderização de JavaScript e CSS no WordPress para melhorar sua pontuação do Google PageSpeed.

Mas antes, vamos descobrir juntos Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog.

O que é JavaScript e CSS Render-Blocking?

O bloqueio de renderizações de JavaScript e CSS são arquivos que impedem um site de exibir uma página da web antes de carregá-los.

Cada site WordPress tem um tema e plug-ins que adicionam arquivos JavaScript e CSS ao frontend do seu site. Esses scripts podem aumentar o tempo de carregamento da página do seu site e também podem bloquear a renderização da página.

O navegador do usuário precisará carregar esses scripts e CSS antes de carregar o restante do código HTML na página. Isso significa que os usuários em uma conexão mais lenta terão que esperar mais alguns milissegundos para visualizar a página.

Esses scripts e folhas de estilo são chamados de bloqueadores de renderização de JavaScript e CSS.

Os proprietários de sites que tentam atingir uma pontuação do Google PageSpeed ​​de 100 precisam consertar isso para atingir a pontuação perfeita.

O que é o Google PageSpeed ​​Score?

O Google PageSpeed ​​Insights é uma ferramenta de teste de velocidade criada pelo Google para ajudar os proprietários de sites a otimizar e testar seus sites. Esta ferramenta testa seu site com as diretrizes de velocidade do Google e oferece sugestões para melhorar o tempo de carregamento da página do site.

Ele mostra uma pontuação com base no número de regras que seu site passa. A maioria dos sites tem entre 50 e 70. No entanto, alguns proprietários de sites se sentem pressionados a chegar a 100.

Você realmente precisa de uma pontuação de "100" no Google PageSpeed?

O propósito de Google PageSpeed ​​insights é fornecer orientações para melhorar a velocidade e o desempenho do seu site. Você não é obrigado a seguir estritamente essas regras.

Lembre-se de que a velocidade é apenas uma das muitas métricas de SEO que ajudam o Google a determinar como classificar seu site. A razão pela qual a velocidade é tão importante é que ela melhora a experiência do usuário no seu site.

Uma melhor experiência do usuário requer muito mais do que velocidade. Você também deve oferecer informações úteis, melhor interface de usuário e envolva conteúdo com texto, imagens e vídeos.

Seu objetivo deve ser criar um site rápido que ofereça uma ótima experiência ao usuário.

Durante a última reformulação do BlogPasCher, mantivemos o foco na velocidade e também na melhoria da experiência do usuário.

Recomendamos que você use as regras do Google Pagespeed como sugestão e, se puder implementá-las facilmente sem prejudicar a experiência do usuário, ótimo. Do contrário, você deve se esforçar para fazer o máximo que puder e não se preocupar com o resto.

Dito isso, vamos dar uma olhada no que você pode fazer para corrigir o bloqueio de renderização de JavaScript e CSS no WordPress.

Vamos cobrir dois métodos que resolverão esse problema. Você pode escolher aquele que funciona melhor no seu site.

1. Corrigir scripts de bloqueio de renderização e CSS com WP Rocket

Para este método, usaremos o plugin WP Rocket. Isto é o melhor plugin de cache do WordPress no mercado e permite que você melhore rapidamente o desempenho do seu site sem a necessidade de configurar habilidades técnicas ou complexas.

Em primeiro lugar, você precisa instalar e ativar o plugin WP Rocket. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress..

WP Rocket ativa seu cache com configurações otimizadas. Por padrão, ele não ativa as opções de otimização de JavaScript e CSS. Essas otimizações podem afetar potencialmente a aparência do seu site ou certas funcionalidades, e é por isso que o plugin permite que você habilite essas configurações como uma opção.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Para fazer isso você tem que continuar Configurações »Foguete WP, em seguida, mude para o 'Otimização de arquivo '. De lá, role para baixo até a seção Arquivos CSS e marque as caixas Minify CSS, Combine arquivos CSS et Otimize a entrega de CSS.

Observação : WP Rocket tentará minimizar todos os seus arquivos CSS, combiná-los e carregar apenas o CSS necessário para a parte visível do seu site. Isso pode afetar a aparência do seu site, então você deve testá-lo com cuidado em vários dispositivos e tamanhos de tela.

Então você tem que rolar para a seção Arquivos JavaScript. A partir daqui, você pode marcar todas as opções para a melhoria máxima de desempenho.

Você pode reduzir e combinar arquivos JavaScript da mesma forma que fez com os arquivos CSS.

Você também pode impedir que o WordPress envie o arquivo. jQuery Migrate. Este é um script que o WordPress carrega para fornecer compatibilidade para plug-ins e temas usando versões anteriores do jQuery.

A maioria dos sites não precisa desse arquivo, mas é uma boa ideia verificar o seu site para ter certeza de que a remoção não afeta o seu tema ou plug-ins.

Em seguida, role um pouco mais para baixo e verifique as opções 'Carregar JavaScript adiado'e'Modo de segurança para jQuery.

Essas opções atrasam o carregamento de JavaScript não essencial e o modo de segurança do jQuery permite carregar o jQuery para temas que podem usá-lo embutido.

Lembre-se de clicar no botão Salvar alterações para armazenar suas configurações.

Depois disso, você também pode limpar o cache no WP Rocket antes de testar seu site novamente com o Google Page Speed ​​Insights.

Em nosso site de teste, conseguimos atingir uma pontuação de 100% em desktops e o problema de bloqueio de renderização foi resolvido nas pontuações de desktop e mobile.

2. Corrija o bloqueio de renderização de JavaScript e CSS com a otimização automática

Para este método, usaremos um plugin diferente feito especificamente para melhorar a entrega dos arquivos CSS e JS do seu site. Embora este plugin faça o trabalho, ele não possui os outros recursos poderosos que o WP Rocket oferece.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Autoptimize. Para mais detalhes, consulte o nosso guia passo a passo sobre como instalar um plugin do WordPress.

Ao ativar, você deve visitar a página Configuração »Otimização automática para definir as configurações do plug-in.

Em primeiro lugar, você precisa marcar a opção 'Otimize o código JavaScript'sob o bloco JavaScript Opções. Certifique-se de que a opção 'Agregar todos os arquivos JS vinculados' não esteja marcada.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Em seguida, role para baixo até a área Opções CSS e marque a opção ' Otimizar o código CSS?'. Certifique-se de que a opção 'Agregar todos os arquivos CSS vinculados'não está marcada.

Agora você pode clicar no botão 'Salvar alterações e limpar cache' para armazenar suas configurações.

Vá em frente e teste seu site com o Page Speed ​​Insights. Em nosso site de demonstração, conseguimos resolver o problema de bloqueio de renderização com essas configurações básicas.

Se ainda houver scripts de bloqueio de renderização, você precisará voltar à página de configurações do plug-in e examinar as opções de JavaScript e CSS.

Por exemplo, você pode permitir que o plug-in inclua o JS Inline e remova scripts que são excluídos por padrão, como seal.js ou jquery.js.

Clique no botão 'Salvar alterações e limpar cache' para salvar suas alterações e limpar o cache do plugin.

Quando terminar, vá em frente e verifique seu site novamente com a ferramenta Page Speed ​​Insights.

Como isso funciona?

A otimização automática agrupa todos os arquivos JavaScript e CSS. Depois disso, ele cria arquivos CSS e JavaScripts minimizados e fornece cópias em cache do seu site em uma base sincronizada ou diferida.

Isso permite que você resolva o problema de bloqueio renderizações scripts e estilos de bloqueio. No entanto, lembre-se de que isso também pode afetar o desempenho ou a aparência do seu site.

ajudar

Dependendo de como os plug-ins e seu tema WordPress usam JavaScript e CSS, pode ser muito difícil resolver completamente todos os problemas com bloqueando do Renderizações de JavaScript e CSS.

Embora as ferramentas acima possam ajudar, seus plug-ins podem precisar de certos scripts em um nível de prioridade diferente para funcionar corretamente. Nesse caso, as soluções acima podem interromper a funcionalidade desses plug-ins ou eles podem se comportar de maneira inesperada.

O Google ainda pode mostrar alguns problemas, como otimização de entrega de CSS. WP Rocket permite corrigir isso adicionando manualmente o CSS crítico necessário para exibir perfeitamente o seu tema WordPress.

No entanto, pode ser muito difícil saber qual código CSS você precisará exibir.

Descubra também alguns temas e plugins premium do WordPress

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Plugin de otimização de velocidade do WordPress

Você tem problemas para gerenciar vários plug-ins de otimização de velocidade no seu site? Você está preocupado que eles atrapalhem a velocidade de execução do seu site? então, este plugin do WordPress será a solução definitiva para todas as suas preocupações.

Este plug-in foi projetado para oferecer os recursos de quase plugins WordPress diferentes do 6 a 8. Basta instalar e configurá-lo para ver uma melhoria clara no carregamento de suas páginas.

Queremos deixar claro que este não é um plugin de cache ou CDNmas o resultado que oferece é impressionante. Não hesite em experimentar este plugin do WordPress para ver do que ele é capaz.

Descarregar | Demo | hospedagem na web

2. Compartilhar Social e Locker Pro

A extensão Social Share & Locker Pro foi projetada para ajudar seu site a ficar mais visível nas redes sociais. Em apenas alguns cliques, você pode definir a posição dos seus ícones sociais ou bloquear seu conteúdo exigindo o compartilhamento em uma das redes sociais propostas por você.

Você tem temas predefinidos do 10 e isso deve cobrir os desejos mais comuns. Todos os seus temas são Retina e fazem maravilhas.

Além disso, com o Social Share & Locker Pro, você poderá visualizar o nome completo das redes sociais ou apenas o ícone. Depende do seu design, espaço disponível ou dos seus desejos.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Descarregar | Demo | hospedagem na web

3. WordPress PDF Lightbox Imagens

WordPress PDF Lightbox é uma extensão do WordPress que permite criar visualizadores de PDF. Um visualizador de PDF é uma coleção de fotos que podem ser salvas como PDFs.

Com esta extensão, você pode criar quantos visualizadores de PDF desejar. Para cada visualizador, o administrador pode definir certas opções, como:

  • A imagem da capa: que será adicionada como a primeira página do PDF criado pelo usuário
  • Os quadros máximos por espectador
  • Uma imagem de marca d'água: para ser aplicada em páginas PDF
  • Envio por email: se esse recurso estiver ativado, um formulário de contato será proposto logo após a galeria de imagens. Com este formulário, os usuários poderão enviar o PDF criado por email para qualquer pessoa.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados que o acompanharão na criação e gerenciamento de seu site.

Conclusão

Aqui ! É isso para este tutorial. Esperamos que este artigo tenha ajudado você a aprender como corrigir o bloqueio de renderização de JavaScript e CSS no WordPress. Você também pode ver nosso guia definitivo sobre como acelerar o desempenho do WordPress para iniciantes.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Não hesite em compartilhe com seus amigos em suas redes sociais favoritas. E se você tiver alguma sugestão ou comentário, deixe-o em nossa seção Comentários.

...

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
0 ações
ação
chilrear
Enregistrer