PageSpeed ​​- Elimine JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

Estou executando magento 1.9e usando o RWD sliderque acompanha o Magento 1.9 na página inicial.

O Google PageSpeednão gosta disso e diz:

Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

Como posso fazer isso para este arquivo de script java que chama o controle deslizante:

http://www.MYDOMAIN/media/js/sdhfksjfhdsjvbskj8e4w.js

Resolvo o problema de Remover o bloqueio de renderização JavaScript no Magento-1.9.x da seguinte maneira:

<script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

ou

<action method="addJs"><script>prototype/prototype.js</script></action>  
Replace with Following:  
<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>  
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

dicas: ele pode localizar no tema base

app \ design \ frontend \ base \ default \ layout \ page.xml sobre a linha: 38,

Se você usar o caminho diferente do tema ativo ex para rwd como app \ design \ frontend \ base \ default \ layout \ page.xml

A técnica descrita por "Mohan Gs" não funcionará aqui.

Por causa do caminho js /media/js/, parece que ele usa a fusão js . Isso significa que todos os arquivos js adicionados pela maneira padrão xml

• <action method="addJs">...
• <action method="addItem"><type>js</type>..

será mesclado em um grande problema para /media/js/<hash>.js.

Magento core js arquivos são adicionados

• <action method="addJs"><script>prototype/prototype.js</script></action>

por aqui também.

Existem também muitos modelos usando js embutidos, que dependem de objetos / funções definidos pelos arquivos js principais.

Nesse ponto, não basta mover apenas os arquivos head js para a parte inferior. Você deve mover todas as declarações js embutidas após o cabeçalho js e antes </body>também.

Em todos / muitos casos, é impossível separar js embutidos dos modelos porque eles estão usando variáveis ​​específicas do modelo.

Você só pode usar um método geral, como analisar o html final e mover essas coisas juntas e na ordem correta.

Então dê uma olhada na extensão Pagespeed .

Este código diz esperar por todo o documento com a carga, em seguida, carregar o arquivo externo defer.js.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

Estes são os passos que você precisa seguir.

1. Copie o código acima.

2. Cole o código no seu HTML logo antes da </body>tag (próximo à parte inferior do seu arquivo HTML).

3. Mude defer.jspara o nome do seu arquivo JS externo.

4. Verifique se o caminho para o seu arquivo está correto. Exemplo: se você acabou de colocar defer.js, o arquivo defer.jsdeve estar na mesma pasta que o seu arquivo HTML.

Para mais detalhes, consulte este artigo

Aqui está a extensão de código aberto para resolver que https://github.com/mediarox/pagespeed

Recursos atuais

• Mova todas as tags Javascript (cabeça e linha) para baixo. ({stripped_html} {js})
• incluindo unidades js condicionais ({multiple js tags})
• incluindo tags js externas, incluindo tags js "inline"
• Mova todas as tags CSS (head & inline) para baixo. ({stripped_html} {css})
• incluindo unidades css condicionais ({multiple css tags})
• incluindo tags CSS externas
• incluindo tags CSS embutidas

Compatibilidade

Do Magento 1.5.x para o Magento 1.9.x.

Configuração de back-end

Todos os módulos (Pagespeed_Js, Pagespeed_Css) estão desativados por padrão.

Caminho da configuração: Sistema> Configuração> AVANÇADO> Velocidade da página

Como funciona ?

Simplesmente analise o fluxo html final no evento "controller_front_send_response_before".