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.
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.
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.
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:
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.
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:
async
)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.
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.
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.
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).
Referência: https://developers.google.com/speed/docs/insights/BlockingJS
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…
Ver comentários
Não funcionou para mim, na verdade o WP fasteste cache aumentou mais no page speed, eu realmente queria saber como faz para Reduzir o tempo de resposta inicial do servidor e também Elimine recursos que impedem a renderização
ja tentando resolver esse problema a 3 anos e nunca achei um tutorial que resolva.