Verschieben Sie alle Javascript-Includes vor </ body>

35

Weiß jemand, wie alle JS-Skript-Tags von Magento, z. B. <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>vor dem Schließen, gerendert werden können </body>?

Ich habe es schon einmal versucht, aber mir wurde ein Fehler gemeldet, der meiner Meinung nach im Sinne der addJS-Methode dort, wo ich ihn verwendet habe, möglicherweise in der Referenzfußzeile, nicht verfügbar war.

magento-1 performance theme layout javascript Mark Weston
quelle
4
Nehmen Sie die Empfehlung von GTMetix und YSlow mit einer Prise Salz an. Die Zeit, die Sie damit verbringen, in diese zu investieren, führt zu keiner merklichen Leistungssteigerung. Mit ziemlicher Sicherheit ist es besser, Ihr Code-Profil zu erstellen (das Fett zu entfernen) oder einfach einen besseren / schnelleren Host zu finden.
Ben Lessani - Sonassi
1
@sonassi Die Implementierung der Antwort von JMax in einer halben Stunde schadet nichts und ist Teil einer Reihe von Verbesserungen der Front-End-Leistung, die in ein Basisthema aufgenommen werden können.
Glo
1
@ Glo Wir sind alle für Leistungsverbesserungen. Aber der "Nutzen", den dies bringen wird, existiert einfach nicht. Das Laden der ersten Seite ist das einzige Mal, dass die JS geladen und anschließend aus dem Browser-Cache bedient wird. Das Blockieren beim ersten Laden ist mit größerer Wahrscheinlichkeit eine langsame PHP-Generierung als die Bereitstellung von JS. und selbst dann spielt der Server-Transit oder die Last-Mile-Konnektivität des Benutzers eine größere Rolle, wie lange es dauert, bis der Server tatsächlich heruntergefahren ist.
Ben Lessani - Sonassi
1
@sonassi Das heißt, Sie sollten Benutzer, die zum ersten Mal einen Besuch planen, ignorieren, da sie in Kürze einen vorbereiteten Cache haben werden. Natürlich gibt es PHP-Verbesserungen, die vorgenommen werden können und sollten, aber als Front-Ender ist es meine Aufgabe, mir Sorgen zu machen, wie ich nicht nur die Bereitstellung von Assets beschleunigen kann, sondern auch die Ladezeit für den Benutzer wahrnehme und Skripte am Ende von Die Seite, die verhindert, dass das Rendern blockiert wird, ist Teil dieser Strategie. Moderne Browser können mit Skripten umgehen, ohne sie zu blockieren, aber Sie wissen genau wie ich, dass im E-Commerce Millisekunden == ££ sind. Natürlich ist dies in der Regel ein Streitpunkt bei Skriptladern.
Glo
Ich arbeite mit @Glo, es ist ein kleines Stück Effizienzoptimierung, und es macht möglicherweise keinen Unterschied zwischen Tag und Nacht, aber es sollte nicht ignoriert werden. Für einen erstmaligen Besucher ist es wichtig, Inhalte schnell auf den Bildschirm zu bringen.
STW

Antworten:

22

Das hängt von Ihrer Anfrage ab. Zuletzt hatte ich zum Beispiel alle Prototype-Skripte aus Homepagedem Magento-Store entfernt, auf die ich keine Probleme hatte. Aber wie gesagt, es kommt auf dein Theme, Erweiterungen etc. an

So verschieben Sie das Skript:

Suchen Sie die folgende Zeile in page.xmlIhrem Thema

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

Und fügen Sie kurz davor Folgendes ein:

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
   <action method="addJs"><script>your_script.js</script></action>
</block>

Verwenden Sie für Magento 1.9 Folgendes:

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
       <action method="addItem"><type>skin_js</type><name>js/yourskinfile.js</name><params/></action>
    </block>

Erstellen Sie die Vorlagendatei in app / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtml und fügen Sie Folgendes hinzu

<?php echo $this->getCssJsHtml() ?>

Fügen Sie dies in Ihre Vorlage ein, bevor Sie das </body>Tag schließen .

<?php echo $this->getChildHtml('jsfooter') ?>
Oğuz Çelikdemir
quelle
Bist du sicher, dass core/text_listes eine addJs()Methode gibt?
Alex
du hast recht @Alex, ich hatte einen Fehler, tut mir leid!
Oğuz Çelikdemir
Prost Mann, das funktioniert. Was ich eigentlich erwartet hatte, ist, dass beim Ausführen von JS das Zusammenführen sowieso negiert wird, da die zusammengeführte Datei dann an den Kopf angehängt wird, aber tatsächlich scheint Magento in meinem Test das getan zu haben Erstellen Sie zwei zusammengeführte Dateien, eine für jeden Block page / html_head, und die zusammengeführte Datei für die Fußzeile js wird vor '</ body>' angehängt. Das ist möglicherweise nützlich. Ich hatte einige Probleme mit der Zusammenführung von JS und jQuery, die darauf zurückzuführen waren, dass jQuery.noConflict nicht enthalten war. Jetzt muss JS die js zusammenführen, bevor '</ body>' nützlich sein könnte.
Mark Weston
20

Beim Verschieben des Tags treten zwei Probleme auf. Das größte Problem ist, dass Magento aus irgendeinem Grund eine Menge JS, das vom Prototyp abhängig ist, direkt in das <body/>Tag einfügt. Wenn Sie die Skripte an das Ende des Dokuments verschieben (obwohl dies für die Ladezeiten von Vorteil ist), werden viele Seiten in Magento beschädigt.

Das andere Problem macht es tatsächlich. Es scheint kein <move />Tag oder eine ähnliche Funktionalität zu geben. Was ich für benutzerdefinierte Skripte getan habe, die ich erstellt habe, ist das Hinzufügen von Skripten wie folgt. Es ist redundanter, aber es funktioniert:

<block type="page/html_head" name="foot.scripts" template="page/template/foot-scripts.phtml">
    <action method="addJs"><script>jmax/global-min.js</script></action>
</block>
Joseph bei SwiftOtter
quelle
@ Oğuz Çelikdemir richtig markiert, weil er die detailliertere Antwort geliefert hat, die funktioniert, aber Sie gaben im Grunde die gleiche Antwort, also vielen Dank, dass es funktioniert.
Mark Weston
2
Aus irgendeinem Grund verwenden Sie ein Javascript-Framework, in der Tat mehrere. Sie müssen frühzeitig ansässig sein, damit die Seite korrekt dargestellt werden kann. Es gibt Gründe, bestimmte Javascripts vor dem Ende des Körpers einzuschließen. Wenn Sie dies nicht verstehen und blindlings alles auf den Grund schieben, nehmen Sie an der Frachtkultprogrammierung teil. Das Einrichten eines kleinen Schuppens mit einem Dummy-Radio und Headsets erfolgt häufig mit Magento und manchmal von Leuten, die erfahrene Webentwickler sein sollen. Manche Sachen gehören genau dahin, wo sie platziert wurden.
Fiasco Labs
15

In Magento 1.x ist dies ein Kinderspiel. Es gibt einfach zu viele Inline-Skripte in den Vorlagendateien in Magento, die beschädigt werden, wenn Sie die JS-Kerndateien aus der verschieben <head>. Möglicherweise ändert sich diese Situation in Magento 2, aber sie erstreckt sich über Prototype und jQuery, während Magento von Prototype migriert.

Bei anderen Skripten sollten Sie sie vor dem </body>Element platzieren. Ich fand es hilfreich, Magentos zu ignorieren<action method="addJS|addItem"> XML und einfach eine neue Vorlagendatei für jedes Skript zu erstellen, die eine einfache HTML-Skriptreferenz wie die folgende enthält:

<script src="<?php echo $this->getSkinUrl('js/hobbiton.js'); ?>"></script>

Dann können Sie diese Vorlagendatei an einer beliebigen Stelle einbetten (und trotzdem vorher / nachher verwenden, um die Reihenfolge zu steuern):

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />
Brendan Falkowski
quelle
6

In den meisten Fällen reicht es nicht aus, externes JavaScript nach unten zu verschieben. Wenn Sie Vorlagen mit Inline-JavaScript wie in den Standardthemen verwenden, müssen Sie deren Ausführung verzögern, bis alle Abhängigkeiten (prototype.js, varien.js, ...) geladen sind.

Ein Ansatz besteht darin, alle Inline- <script>Elemente aus gerenderten Blöcken mit einem Beobachter für zu extrahieren http_response_send_beforeund sie direkt nach den externen Skripten an das Ende zu verschieben. Während Sie gerade dabei sind, können Sie alle Skriptelemente verschieben, nicht nur Inline. Dies erspart Ihnen das mühsame Verschieben über das Layout-Modell, das von Magento eindeutig nicht vorgesehen war.

Tom Robertshaw hat eine Erweiterung erstellt, die genau dies tut. Ein einzelner Beobachter ändert den Antwort-HTML-Code mithilfe regulärer Ausdrücke: https://github.com/bobbyshaw/magento-footer-js

Er verwendet das core_block_abstract_to_html_afterEreignis, ergreift jedoch nur dann Maßnahmen, wenn der aktuelle Block der Stammblock ist. Dies bedeutet, dass der Beobachter häufiger angerufen wird, jedoch das Block-Caching in gewissem Maße nutzen sollte.

Fabian Schmengler
quelle
Die Robertshaw-Erweiterung funktioniert auf der gesamten Website sehr gut, mit Ausnahme des Zahlungsfelds des OPC-Warenkorbs. Macht das Panel komplett leer. Ich denke, es ist das Payment Gateway-Validierungsskript. Es verschiebt alles kurz vor dem schließenden </body>Tag nach unten .
Fiasco Labs
2

Ich empfehle dringend das mediarox Pagespeed-Modul, um Ihnen dabei zu helfen, Ihr Javascript (und CSS) zu optimieren und das Google Pagespeed Insight-Ranking zu verbessern.

Es funktioniert, indem es die HTML-Ausgabe von Magento analysiert und dann eine Aktion zum Ausschneiden und Einfügen des Codes ausführt, um Javascript an den unteren Rand des HTML-Codes zu verschieben. Der Vorgang ist schnell, wird jedoch am besten in Verbindung mit einem Ganzseiten-Cache verwendet, um die HTML-Änderungen zwischenzuspeichern.

Weitere Informationen zur Funktionsweise dieses Moduls und zur Verbesserung des Pagespeed-Rangs finden Sie hier:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

paj
quelle
-1

Für Magento v1.6 + (muss in älteren Versionen getestet werden);

1 - Erstellen Sie eine Vorlagendatei page/html/footer/extras.phtmlmit folgendem Inhalt:

<?php echo $this->getCssJsHtml() ?>

2 - Fügen Sie diesen HTML-Knoten zu Ihrer Layout-XML hinzu:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - Das ist es!

Marcio Maciel
quelle
-2

Aufgrund eines Problems mit diesem anderen Skript (in product / list.phtml) musste <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> ich einige JS am Ende meiner Seite verschieben.

Ich konnte die oben angegebenen Ergebnisse nicht verarbeiten, sodass ich einen anderen Weg finde, um Folgendes zu erreichen:

Ich überschreibe das, Mage/page/Block/Html/Footer.php controllerindem ich es mit dem gleichen Pfad in neu erstelle app/local folder.

Hier ist der vollständige Pfad, der erstellt werden soll, wenn er nicht vorhanden ist:

app / local / Mage / page / Block / Html / Footer.php

In dieser Datei füge ich Funktionen aus Head.php hinzu, die sich im selben Ordner wie Magentos Kern befinden (zB Mage / page / Block / Html / Head.php).

Die Funktionen, die Sie benötigen, um zu funktionieren, sind (offensichtlich die vollständige Funktion, hier gebe ich nur den Namen an, um präzise zu bleiben):

public function addItem($type, $name, $params=null, $if=null, $cond=null)
{...}

public function addJs($name, $params = "")
{...}

public function getCssJsHtml()
{...}

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{...}

protected function _separateOtherHtmlHeadElements(&$lines, $itemIf, $itemType, $itemParams, $itemName, $itemThe)
{...}

protected function _prepareOtherHtmlHeadElements($items)
{...}

Dann füge ich zu meiner benutzerdefinierten (der in meinem Thema) Seite / html / footer.phtml den folgenden Aufruf hinzu:

<?php echo $this->getCssJsHtml() ?>

Am Ende kann ich jetzt JS in meine Fußzeile einfügen, indem ich es in einem beliebigen Layout von aufrufe 

<action method="addJs"><script>yourscript.js</script></action>
twi_cy
quelle
Interessanter Ansatz, aber dies ist ein sehr, sehr falscher Ansatz für die Magento-Architektur.
benmarks
github.com/pratikmage/magento-defer-javascript
Pratik