Embora a estética de um site seja importante, seu conteúdo e velocidade de carregamento fazem com que as pessoas voltem. O WordPress fornece aos usuários uma sofisticada caixa de ferramentas de plugins e temas para criar seus próprios sites personalizados rapidamente.
No entanto, esses temas e plugins requerem JavaScript (JS) e Cascading Style Sheets (CSS) para funcionar. O WordPress os cria automaticamente na forma de arquivos de script. Eles geralmente são mal otimizados. Como tal, eles podem diminuir consideravelmente o seu site.
Isso pode ser frustrante para os leitores. Assim, neste guia, exploraremos como encontrar e remover esses scripts de bloqueio de renderização e mostraremos como aumentar as velocidades de carregamento do seu site WordPress.
O que são scripts JS e CSS de bloqueio de renderização e por que eles são ruins?
A maioria das páginas da web na internet é composta por três componentes principais: JavaScript, CSS e linguagens de marcação de hipertexto. HTML serve como base , enquanto JavaScript e CSS são incorporados nele. No entanto, hoje em dia, é mais convencional embutir chamadas para scripts externos no documento HTML.
Esses scripts são mantidos em uma fila que seu navegador da Web usa para renderizar a página da Web. A maneira mais fácil de ver quais scripts uma página da Web usa sem olhar o código-fonte é baixá-lo do seu navegador da Web (Ctrl + S). O navegador da web fará o download do documento HTML junto com uma pasta com todos (ou a maioria) dos scripts, imagens e outros arquivos que a página da web usa.
Quanto mais scripts complexos sua página da Web precisar chamar da fila, mais tempo levará para renderizar. Muitas vezes, os navegadores da Web baixam recursos de páginas da Web, como scripts e imagens, em um cache local para carregar páginas da Web mais rapidamente. Embora os usuários do lado do cliente possam acelerar os tempos de renderização de páginas da Web desabilitando o JavaScript , aumentando o tamanho do cache e usando AdBlockers, essa não é a solução ideal. O ônus deve ser do desenvolvedor web.
Se você receber reclamações ou notou que seu site tem problemas para renderizar seu conteúdo, não é tarde demais para corrigi-lo.
Como otimizar seu site encontrando e corrigindo scripts de bloqueio de renderização
Antes de decidir quais scripts encerrar ou otimizar, você deve avaliar a velocidade do seu site ou página da web. Você pode usar uma plataforma online como GTmetrix ou PageSpeed
Eles também sugerirão auditorias que você pode usar para tornar seu site mais rápido. Por exemplo, eles proporão que você use menos elementos em sua página da Web ou reduza CSS e JavaScript não utilizados. GTmetrix irá até mostrar quais scripts precisam ser otimizados.
Como alternativa, você pode usar a guia Cobertura do Chrome DevTools para mostrar os dados de utilização de seus scripts. Depois de identificar quais scripts estão abaixo do ideal, você pode fazer algumas coisas para corrigi-los. No entanto, essas etapas exigirão um pouco de habilidade de codificação para implementá-las com sucesso. Você precisará pelo menos de uma compreensão básica da programação JavaScript funcional.
Participar de um curso de tutorial de codificação (ou bootcamp) também é uma boa ideia para ajudar a desenvolver ainda mais suas habilidades. Em média, um bootcamp de codificação pode levar até quinze semanas para ser concluído e, embora isso possa parecer muito tempo, vale a pena quando você considera como a alfabetização básica de código é uma habilidade importante para se ter no mundo moderno. No entanto, aqui estão cinco maneiras de corrigir scripts de bloqueio de renderização e aumentar a velocidade da sua página da web.
1. Otimize a ordem de carregamento
A seção head (</head></head> ) da página web é usada para pré-carregar elementos. A base da sua página da web deve ficar aqui, então uma tela branca não cumprimenta o usuário quando ele carrega sua página da web. Embora o CSS incorporado seja bom, você deve evitar colocar JavaScript aqui.
Depois de otimizar a seção da cabeça, você precisa otimizar o corpo. A maioria dos navegadores da Web renderiza páginas da Web de cima para baixo. Você precisa ordenar chamadas para scripts de acordo com sua importância e complexidade. Você deve fazer chamadas para scripts que não são cruciais para a última renderização da página da Web junto com scripts complexos que levam tempo.
2. Reduza o código
A redução do código envolve reescrevê-lo e excluir caracteres desnecessários, como espaços em branco, comentários, vírgulas, quebras de linha, etc. Isso torna o código mais conciso e compacto, o que reduz o tamanho do script e aumenta o tempo de carregamento da página da web.
Plugins e ferramentas como o W3TC possuem módulos que minificam o JavaScript e CSS em seus temas. Como alternativa, você pode reduzir manualmente seu código de script com uma ferramenta online gratuita como o JavaScript Minifier.
3. Use o carregamento adiado e assíncrono de JavaScript
Os navegadores da Web lêem o código de cima para baixo. Quando encontram uma tag de script, eles param de carregar a página da Web e lêem o arquivo de script. Isso retarda a renderização.
Você pode usar o atributo async para carregar o script em paralelo com a página da Web e executá-lo assim que estiver disponível. Como alternativa, você pode utilizar o atributo defer para adiar a análise de scripts. Isso significa que ele também carregará o script paralelamente à página da web, mas só o executará quando o navegador analisar a página da web.
Aconselhamos que você não use os atributos async ou defer em scripts usados
4. Substitua os elementos visuais do JavaScript por CSS3
No passado, CSS não era tão versátil como é hoje. Por exemplo, CSS 1.0 e 2.0 eram desprovidos de ferramentas de interface do usuário, como controles básicos e controles deslizantes.
Então CSS 3 veio junto. Ele apresentou novas cores, sombras de caixa, opacidade, etc. JavaScript é ótimo para adicionar controles de interface de usuário complexos. No entanto, o Javascript é mais pesado em recursos do que o CSS.
Assim, o uso excessivo de JavaScript diminui consideravelmente o seu site. Se você perceber que sua página da web está usando JavaScript para pegar a folga onde as versões anteriores do CSS falharam, você deve alterá-la e substituir todo o JavaScript desnecessário por CSS – sempre que puder. Isso permitirá que as páginas da Web sejam carregadas mais rapidamente.
5. Elimine todos os scripts desnecessários
O propósito de JS e CSS é expandir a funcionalidade para páginas da web e adicionar lógica onde o HTML não pode. No entanto, o HTML 5.3 chegou com novas tags que tornariam desnecessárias algumas operações de CSS e JS. O uso de HTML em vez de scripts naturalmente faz com que suas páginas da Web sejam carregadas mais rapidamente.
Assim, a melhor maneira de otimizar a velocidade do seu site é eliminar todos os scripts subutilizados. Você precisará analisar quais scripts são completamente desnecessários e removê-los. Novamente, você pode usar a guia Coverage ou GTmetrix do Chrome DevTools para encontrar os scripts mais subutilizados em sua página da web e removê-los.
Depois de remover todas as funções ou tags desnecessárias, você pode combinar scripts cujas funções sejam semelhantes. Se você já sabe como manipular o código-fonte de sua página da Web, isso não deve ser uma tarefa difícil para você. No entanto, os usuários que não são tão experientes ou conhecedores de web design não devem se preocupar. O WordPress torna mais fácil identificar scripts em seu site e editá-los usando vários plugins de otimização . Nós vamos cobrir aqueles a seguir.
6. Usando plugins para otimizar seu site WordPress
Novamente, você não precisa de um conhecimento prático de programação para otimizar seu site WP. Embora alguma experiência ajude. No entanto, existe uma variedade de plugins voltados para a otimização de scripts. Alguns deles usam IA para reduzir o código, alterar a ordem de carregamento e substituir scripts subutilizados por código e scripts mais eficientes.
Alguns dos melhores plugins para otimização de scripts incluem:
- WP Rocket : Este é um dos plugins mais populares para otimização da web. Ele pode detectar automaticamente quais scripts são problemáticos e corrigi-los para você. Você pode usá-lo para cache rápido, deferência, compactação e minificação.
- Autoptimize : Isso pode adiar e eliminar scripts não essenciais, integrar CSS inline e reduzir scripts, HTML e imagens. O Autoptimize é altamente personalizável por meio de uma API aberta e opções avançadas.
- W3 Total Cache : Este plugin requer um pouco de trabalho para usar. Você precisará rastrear e identificar os scripts manualmente antes de removê-los ou editá-los. Na maioria dos casos, este plugin já está disponível com seu pacote WordPress.
- Async Javascript : Um plugin de código aberto apresentado pelo WordPress. Ele permite detectar JavaScript de bloqueio de renderização e, em seguida, adiá-lo ou carregá-lo de forma assíncrona.
Então, por que não recomendamos plugins em primeiro lugar? Infelizmente, alguns desses plugins vão custar-lhe. Por exemplo, o Autoptimize custa US$ 49 por ano. Embora seja uma taxa razoável, pode não ser ideal para pessoas que já estão pagando uma grande quantia de dinheiro por hospedagem e outros aplicativos e plugins.
No entanto, independentemente de você estar usando plugins ou encontrando scripts manualmente, você precisa entender conceitos como minificação, carregamento assíncrono e ordem de carregamento. Isso facilitará a solução de problemas de carregamento caso um de seus scripts falhe.
