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 habilita as opções de otimização de JavaScript e CSS. Essas otimizações podem afetar oaparência do seu site ou certos recursos, é por isso que o plug-in permite ativar essas configurações como uma opção.
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 : 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 oaparência do seu site, então você deve testar seu site completamente 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. migração jQuery. 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.
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, tenha em mente que isso também pode afetar o desempenho ouaparê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ê está lutando para gerenciar vários plug-ins de otimização de velocidade do site? Você está preocupado que eles estejam prejudicando a velocidade de execução do seu site? então, este plugin WordPress será a solução definitiva para todas as suas preocupações.
Este plug-in foi projetado para fornecer a funcionalidade de quase 6 a 8 plug-ins diferentes do WordPress. Você só precisa instalar e configurá-lo para ver uma melhoria significativa no carregamento de suas páginas.
Gostaríamos de salientar que este não é um plugin de cache ou CDN, mas 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. Social Share & Locker Pro
A extensão Social Share & Locker Pro foi projetada para ajudar seu site a ser mais visível nas redes sociais. Com apenas alguns cliques, você pode definir a posição de seus ícones sociais ou bloquear seu conteúdo solicitando o compartilhamento em uma das redes sociais oferecidas 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á exibir o nome completo das redes sociais ou apenas o ícone. Dependerá do seu projeto, do espaço disponível ou dos seus desejos.
Descarregar | Demo | hospedagem na web
3. WordPress PDF Lightbox Imagens
WordPress PDF Lightbox é um Extensão WordPress que permite criar visualizadores de arquivos 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 algumas opções como:
- A imagem da capa: que será adicionada como a primeira página do PDF criado pelo usuário
- Máximo de imagens por visualizador
- Uma imagem de marca d'água: para ser aplicada em páginas PDF
- Envio por e-mail: se este recurso estiver ativado, um formulário de contato será oferecido logo após a galeria de imagens. Por meio desse formulário, os usuários poderão enviar por e-mail o PDF criado para qualquer pessoa.
Descarregar | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- Plugins do WordPress 10 para melhorar o SEO do seu site
- 5 premium WordPress plugins para otimizar suas categorias
- 10 plugins WordPress para converter moedas monetárias
- plugins 10 WordPress para integrar um leitor de áudio em um site
Conclusão
Aqui ! É isso neste 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 sugestões ou comentários, deixe-os em nossa seção Comentários.
...
