PageSpeed ​​- Beseitigen Sie JavaScript und CSS, die das Rendern blockieren, in übergeordneten Inhalten

Ich laufe magento 1.9und verwende das RWD slidermit Magento 1.9 gelieferte Programm auf der Startseite.

Google PageSpeedgefällt das nicht und sagt:

Beseitigen Sie JavaScript und CSS, die das Rendern blockieren

Wie kann ich das für diese Java-Skriptdatei machen, die den Schieberegler aufruft:

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

Ich löse das Problem mit dem Entfernen von JavaScript, das das Rendern blockiert, unter Magento-1.9.x wie folgt:

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

oder

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

Hinweise: Es kann sich um ein Basisthema handeln

app \ design \ frontend \ base \ default \ layout \ page.xml über zeile: 38,

Wenn Sie ein aktives Thema verwenden, verwenden Sie einen anderen Pfad als app \ design \ frontend \ base \ default \ layout \ page.xml

Die von "Mohan Gs" beschriebene Technik funktioniert hier nicht.

Aufgrund des js-Pfades /media/js/scheint er js Merge zu verwenden . Das bedeutet, dass alle js-Dateien per XML-Standard hinzugefügt werden

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

wird zu einem großen zusammengeführt /media/js/<hash>.js .

Magento Core Js-Dateien werden hinzugefügt

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

auch so.

Es gibt auch viele Vorlagen, die Inline-Js verwenden, was von Objekten / Funktionen abhängt, die in den Head-JS-Dateien definiert sind.

An dieser Stelle reicht es nicht aus, nur die js-Dateien des Kopfes nach unten zu verschieben. Sie müssen alle Inline-Js-Deklarationen nach dem Head-Js und davor verschieben</body> .

In vielen Fällen ist es nicht möglich, Inline-Js von den Vorlagen zu trennen, da sie vorlagenspezifische Variablen verwenden.

Sie können nur eine allgemeine Methode wie das Parsen des endgültigen HTML-Codes verwenden und diese Dinge zusammen und in der richtigen Reihenfolge verschieben.

Schauen Sie sich also die Erweiterung Pagespeed an .

Dieser Code besagt, warten Sie, bis das gesamte Dokument geladen ist, und laden Sie dann die externe Datei 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>

Dies sind die Schritte, die Sie befolgen müssen.

1. Kopieren Sie den obigen Code.

2. Fügen Sie Code direkt vor dem </body>Tag in Ihren HTML-Code ein (am unteren Rand Ihrer HTML-Datei).

3. Ändern Sie den defer.jsNamen in den Namen Ihrer externen JS-Datei.

4. Stellen Sie sicher, dass der Pfad zu Ihrer Datei korrekt ist. Beispiel: Wenn Sie nur setzen defer.js, defer.jsmuss sich die Datei im selben Ordner wie Ihre HTML-Datei befinden.

Weitere Einzelheiten finden Sie in diesem Artikel

Hier ist eine Open-Source-Erweiterung, um diese https://github.com/mediarox/pagespeed zu lösen

Aktuelle Funktionen

• Verschieben Sie alle Javascript-Tags (head & inline) nach unten. ({stripped_html} {js})
• einschließlich bedingter js-Einheiten ({multiple js-Tags})
• einschließlich externer js-Tags einschließlich "Inline" -js-Tags
• Verschieben Sie alle CSS-Tags (head & inline) nach unten. ({stripped_html} {css})
• Einschließlich bedingter CSS-Einheiten ({multiple CSS-Tags})
• einschließlich externer CSS-Tags
• Einschließlich Inline-CSS-Tags

Kompatibilität

Von Magento 1.5.x zu Magento 1.9.x.

Backend-Konfiguration

Alle Module (Pagespeed_Js, Pagespeed_Css) sind standardmäßig deaktiviert.

Konfigurationspfad: System> Konfiguration> ERWEITERT> Pagespeed

Wie es funktioniert ?

Analysieren Sie einfach den endgültigen HTML-Stream für das Ereignis "controller_front_send_response_before".