PageSpeed: elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold

Sto correndo magento 1.9e sto usando RWD sliderquello fornito con Magento 1.9 sulla home page.

Google PageSpeed non piace questo e dice:

Elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold

Come posso farlo per questo file di script Java che chiama il dispositivo di scorrimento:

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

Risolvo Rimuovere il problema di blocco del rendering JavaScript su Magento-1.9.x come segue:

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

o

<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>

suggerimenti: può localizzare sul tema di base

app \ design \ frontend \ base \ default \ layout \ page.xml sulla riga: 38,

Se si utilizza il tema attivo percorso diverso ex per rwd come app \ design \ frontend \ base \ default \ layout \ page.xml

La tecnica descritta da "Mohan Gs" non funzionerà qui.

A causa del percorso js /media/js/sembra che usi la fusione js . Ciò significa che tutti i file js sono stati aggiunti in modo standard xml

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

sarà unito in uno grande a /media/js/<hash>.js .

Vengono aggiunti i file js core di Magento

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

anche in questo modo.

Ci sono anche molti template che usano js inline, che dipende da oggetti / funzioni che sono definiti dai file head js.

A questo punto, non è sufficiente spostare in basso solo i file head js. Devi spostare tutte le dichiarazioni js in linea dopo la testa js e prima</body> anche .

In tutti / molti casi è impossibile separare js in linea dai modelli perché utilizzano variabili specifiche del modello.

Puoi usare solo un metodo generale come l'analisi dell'html finale e spostare queste cose insieme e nell'ordine corretto.

Dai un'occhiata all'estensione di Pagespeed .

Questo codice dice attendere il caricamento dell'intero documento, quindi caricare il file esterno 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>

Questi sono i passaggi che devi seguire.

1. Copia il codice sopra.

2. Incolla il codice nel tuo HTML appena prima del </body>tag (nella parte inferiore del tuo file HTML).

3. Cambia il defer.jsnome del tuo file JS esterno.

4. Assicurarsi che il percorso del file sia corretto. Esempio: se hai appena inserito defer.js, il file defer.jsdeve trovarsi nella stessa cartella del tuo file HTML.

Per maggiori dettagli, consultare questo articolo

Ecco l'estensione open source per risolvere questo https://github.com/mediarox/pagespeed

Funzionalità attuali

• Sposta tutti i tag Javascript (head & inline) in basso. ({Stripped_html} {} js)
• comprese le unità js condizionali ({multiple js tags})
• compresi tag js esterni inclusi tag js "inline"
• Sposta tutti i tag CSS (head & inline) in basso. ({Stripped_html} {} css)
• comprese le unità css condizionali ({tag css multipli})
• compresi tag CSS esterni
• compresi i tag CSS in linea

Compatibilità

Da Magento 1.5.xa Magento 1.9.x.

Configurazione back-end

Tutti i moduli (Pagespeed_Js, Pagespeed_Css) sono disabilitati per impostazione predefinita.

Percorso di configurazione: Sistema> Configurazione> AVANZATO> Velocità pagina

Come funziona ?

Semplice analizzare il flusso html finale sull'evento "controller_front_send_response_before".