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

15

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

Antworten:

14

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

matinict
quelle
Wo fügst du das hinzu? in welcher magento xml datei?
Styzzz
@ styzzz, ja und auch Header / Footer-Datei. Es ist besser, Google vorgeschlagenen blockierten js
matinict
@styzz es finden auf Basis Theme App \ Design \ Frontend \ Base \ Standard \ 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
matinict
1
Ich folgte dir. Es behebt das Problem in Google Page Insight, aber es gibt viele Fehler in der Konsole in Google Chrome
Shoeb Mirza
@MDSHOEBMIRZA dann hat es das Problem nicht gelöst
Stevie G
5

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 .

Steven Fritzsche
quelle
Es tut mir leid - ich weiß immer noch nicht, was ich tun soll. Welche Datei soll ich bearbeiten? Wollen Sie damit sagen, wir sollten die XML-Dateien bearbeiten und die Zeile, die das JS aufruft, in einen anderen Abschnitt verschieben? Ich kann die XML-Datei bearbeiten, bin mir aber nicht sicher, welche und wohin ich die Zeile verschieben soll, die das JS-Skript aufgerufen hat. Lass es mich wissen, bitte.
Styzzz
Meine Antwort soll erklären, dass Sie nicht die Javascript xml Anrufe zu einem anderen Abschnitt bewegen. Dies führt zu Fehlern. Sie können die erwähnte Erweiterung ausprobieren.
Steven Fritzsche
Hallo Steven, ich habe dein Modul ausprobiert. Nichts hat sich verändert. Es wurde kein Javascript oder CSS verschoben. Außerdem zeigt die Konfiguration von Pagespeed für Administratoren 404
Sandeep am
@ Sandeep: Dies ist nicht der Ort für Ihren Kommentar. Bitte erstellen Sie einen detaillierten Bericht / Issue bei github .
Steven Fritzsche
4

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

Mohan Gs
quelle
1

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

Feuerbär
quelle
Ging zu GitHub und stellte fest, dass das Skript zuletzt am 23. September 2015 aktualisiert wurde. Außerdem wird Magento 2 nicht erwähnt. Würde es für Magento 2 funktionieren oder nicht? Wenn Sie keine anderen Empfehlungen / Vorschläge haben?
marikamitsos