Como eliminar JavaScript e CSS de bloqueio de renderização

Como eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda, problema indicado pela ferramenta do Google, PageSpeed.

Exemplo: Sua página tem 19 recursos de script de bloqueio e 4 recursos de CSS de bloqueio. Isso causa um atraso na renderização de sua página.

“Nenhuma parte do conteúdo acima da dobra em sua página seria renderizado sem aguardar o carregamento dos seguintes recursos. Tente adiar ou carregar de maneira assíncrona os recursos de bloqueio, ou incorpore in-line as partes fundamentais desses recursos diretamente ao HTML.”

Está é a justificativa da imagem acima.

Uma página na web é composta por vários componentes “elementos externos”, entre eles estão arquivos contendo código Javascript e CSS.

Como uma fila, esses componentes deverão ser carregados para que a página seja exibida por completo.

Devido ao tamanho de tais arquivos e a falta de organização e definição de uma estrutura que irá definir à prioridade no carregamento, eles poderão atrasar a exibição de alguns elementos da páginas que podem ser visualizados sem que a mesma esteja totalmente carregada.

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

1 – Instale o plugin “Speed Booster Pack” no WordPress.
2 – Agora navegue até Configurações > abra o speed booster pack
3 – Na parte superior em general options marque as seguintes opções: Move scripts to the footer e defer parsing of javascript files.
3 – Agora mais abaixo clique na opção: Still need more speed e marque a opção Load CSS asynchronously (habilitar) a opção “carregar o CSS de forma assíncrona”, vai remover o erro da parte do CSS.
Tem outras opções nesse plugin se precisar usar para melhorar o desempenho faça testes e verifique.

Magento 1 e 2

Para ambas as versões do Magento existem várias extensões disponíveis que irão tratar deste problema.

Algumas dessas extensões são pagas, e outras opções gratuitas, faça uma pesquisa no Google “magento defer parsing of javascript”.

Como eu evito a utilização de extensões para tais fins, infelizmente não posso fazer nenhuma indicar.

Técnicas para melhorar o desempenho do CSS

CSS geralmente não é o problema porque ele já é carregado de forma assíncrona.

Entretanto, algumas vezes ele pode se tornar um problema quando os assets ficam muito grandes.

A melhor forma que eu conheço de otimizar isso é separar o que é essencial e colocar no topo da página e deixar o que não é essencial para depois ou ainda para ser carregado assincronamente.

Além disso, estilos específicos que servem apenas para uma página podem ser colocados inline ou em estilos separados.

Uma boa organização seria assim:

1. Estilo comum para todo o sistema
2. Estilo específico para a página
3. Estilo específico para o usuário, se houver

Enfim, aqui organização é tudo.

Isso porque você não quer postergar muito o carregamento do CSS, pois em geral é algo que faz falta na interface.

É importante ainda lembrar que uma boa organização melhora o uso do cache tanto pelo navegador quanto pelo CDN, afinal, você separa o que muda mais do que muda menos. Isso ajuda a que seu site tenha um tempo de carregamento e renderização menor, demorando apenas um pouco mais no primeiro acesso.

Técnicas para melhorar o desempenho do JavaScript

Otimização de scripts, além da organização, exigem um conhecimento mais profundo das muitas opções disponíveis e de como os navegadores funcionam.

Idealmente, você quer que os scripts comecem a ser carregados o mais cedo possível, mas somente executem, pausando a página, depois que o conteúdo crítico já foi exibida.

Uma forma simples de fazer isto é usando os atributos async e defer que, respectivamente:

• Executam os scripts carregados assim que baixados em qualquer ordem (async)
• Executam os scripts carregados depois de terminar de exibir a página, na ordem em que eles aparecem na página (defer)

Qual é o melhor? Depende. async é melhor quando você quer que a funcionalidade adicionada pelo script esteja presente assim que possível, provavelmente algo crítico. defer é melhor para algo que não vale a pena pausar a renderização da página.

Mas dizer que apenas usar tais atributos nas suas tags <script> é ser muito simplista.

Dificuldades em scripts assíncronos

Os problemas começam porque inline scripts não podem ser assíncronos nem deferidos.

Portanto, se eles dependem de algum script incluído de fonte externa você precisa de algum mecanismo para que eles executem somente quando tais dependências forem satisfeitas.

O mesmo vale para scripts assíncronos, que podem executar em qualquer ordem.

Uma forma simplista de resolver o problema é usar o evento window.onload. Só que tem um sério problema com esta abordagem: ela posterga tudo até o fim, o que significa que mesmo as funcionalidades críticas terão que esperar tudo da página ser carregado.

Utilizando padrões

Um mecanismo melhor é escrever seu JavaScript modular, usando padrões como AMD, ES6, SystemJS. Módulos JavaScript geralmente são definidos em termos do que eles definem (define) e do que eles dependem (require).

Então, você adiciona um pequeno script loader no começo da página (síncrono) que é capaz de identificar quando as dependências de um certo script estão satisfeitas e executa ele assim que possível.

Um script loader não necessariamente significa que ele vai baixar os scripts sob demanda, mas que ele mantém um registro do módulos presentes na página e consegue saber quando eles podem ser executados.

Dentro dos módulos, você ainda pode adicionar eventos onload para postergar a execução do que não é tão importante.

Ou ainda pode usar o modo lazy mais agressivo, que é carregar o código de uma funcionalidade somente quando ela for ativada pelo usuário.

Por exemplo, imagine que no seu sistema existe uma janela Popup complexa aberta quando o usuário clica num botão que está presente em todas as páginas.

Evite a redundância

Você não quer que o código seja carregado em todas as páginas, porque a janela não é usada sempre. Então você pode fazer o carregamento do código e dos estilos usados na popup dentro do evento click do botão. Da primeira vez que o usuário clicar, vai demorar um pouco mais para abrir, até os assets entrarem no cache, mas vai permitir que o site seja mais rápido no geral.

No seu caso, que parece não haver muitos scripts, eu transformaria todos eles em módulos AMD e assim usaria o async ou defer em todos os scripts.

Se você tem inline scripts que não pode transformar em um módulo, uma técnica para postergar a execução deles é mudar o type, exemplo:

<script type="delay/javascript">

E depois você cria um módulo que avalia o conteúdo dessas usando eval (não é pecado quando você sabe o que está fazendo).

18 dicas para você otimizar seu site ou loja virtual.

• Otimização de imagens
• Reduzir quantidade de equisições HTTP
• Reduzir o tamanho dos arquivos de CSS e Javascript
• Recursos de bloqueio crítico e de bloqueio de renderização (CSS + JS)
• Reduza a latência com um CDN (para imagens, css e JS)
• Tempo para Primeiro Byte (TTFB)
• Evite redirecionamentos do 301
• Cache
• Prefetch e Preconnect
• HTTP / 2
• PHP7 e HHVM
• Desempenho da fonte da Web
• Proteção Hotlink
• Ativar a Compressão Gzip
• A infraestrutura
• Corrigir 404 Erros
• Servir Imagens Escalonadas
• Otimização do banco de dados

Conclusão do bloqueio de renderização

Referência: https://developers.google.com/speed/docs/insights/BlockingJS