Hinten anstellen – xtcModified on steroids

Man kennt das aus dem Supermarkt: An der Kasse mal eben vordrängeln, um dann den Betrieb komplett aufzuhalten, weil man 14,83 Euro passend abgezählt in aller Seelenruhe aus dem Geldbeutel kramt. Gerne noch gepaart mit: „Ich hou mei Brilln daham vergessn, guggn sa amol, sinn des fünf odder zwaa Zent?”. Gibt’s bei der Geschwindigkeitsoptimierung im Web auch. Heißt da aber nicht Oma Meier sondern Javascript.

Javascript später parsen

Parsen Sie Javascript später, um die Blockierung der Seitendarstellung zu reduzieren.

Weil Javascript Inhalt und DOM der Seite verändern kann warten die Browser, sobald sie auf einen Script-Tag stoßen, bis das Javascript geladen, geparsed und gerendert ist, bevor sie mit dem eigentlichen Rendering der Seite fortfahren. Durch das Mischen von Javascript- und CSS-Tags kann das Laden noch einmal zusätzlich verlangsamt werden, Page Speed listet das unter ‘Reihenfolge der Formate und Skripts optimieren’. Eine Grafik, wie diese Verzögerung eben durch das Stoppen des eigentlichen Rendervorgangs aussehen kann, findet sich bei Google.

Heute geht es also darum, die Reihenfolge von CSS und Javascript im Hinblick auf Ladezeiten zu optimieren. Dabei gilt die Faustregel, CSS gleich zu Beginn und Javascript ganz am Ende zu laden. Allerdings muss man beachten, dass es Fälle gibt, bei denen man von dieser Regel abweichen muss, weil man Javascript-Funktionen schon vorher benötigt. Hat man beispielsweise einen SSL-Proxy und muss Cross-Domain-Tracking mittels Google Analytics implementieren, benötigt man das Analytics-Javascript vorher und kann es eben nicht ganz ans Ende verfrachten.
Auch die eigentliche Reihenfolge der Scripte ist wichtig, erfordern manche Funktionen bestimmte Bibliotheken, z.B. jQuery, muss dieses natürlich vorher geladen werden. Und vertauscht man die Reihenfolge bei CSS-Dateien könnte es aufgrund der Kaskade zu unerwarteten Darstellungsfehlern kommen.

Im Sourcecode von xtcModified finden sich Hinweise, dass man dieses Thema auch schon mal angegangen ist, aufgrund von Fehlern bei jQuery wurde das aber wieder rückgängig gemacht. Aktuell konnten ich bei Tests im Demoshop keine derartigen Probleme feststellen. In xtcModified findet sich außerdem noch sehr viel Javascript-Code, der nicht über eine externe Datei geladen wird. Hier aufzuräumen und den Code, der zum Teil noch aus dem originalen xt:Commerce stammt, gegen moderne, auf jQuery basierende Funktionen zu tauschen, würde eine eigene Serie gut füllen.

Daher beschränke ich mich hier mal auf das naheliegendste: In includes/header.php alles von Zeile 75 bis Zeile 278 in die Zwischenablage kopieren und dann löschen, ebenso Zeile 279 löschen. In includes/application_bottom.php die Zeilen 42 bis 46 markieren:

//BOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page
//BOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//require('templates/'.CURRENT_TEMPLATE.'/javascript/general.js.php');
//EOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//EOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page

und durch

?>

ersetzen. Anschließend den Inhalt der Zwischenablage einfügen.

Betrachtet man die reinen Zahlen könnte man meinen, diese Änderung bringt uns primär ein gutes Gefühl.

YSlow mit Javascript am Seitenende

Page Speed mit Javascript am Seitenende

Der eigentliche Erfolg ist hier aber eher offensichtlich, wenn man sich das Rendering ansieht. Mit Javascript im oberen Bereich der Seite wird der Browser sehr früh blockiert und beginnt erst nach ca 2,5 Sekunden mit dem Rendern. Hingegen beginnt dieser Prozess nach der Änderung gut eine Sekunde früher.

Weitere Artikel der Serie

  1. Höher, schneller, weiter
  2. Verfallsdatum überschritten
  3. Druck machen – xtcModified on steroids

Disclaimer: Ich bin nach wie vor der Meinung, dass viele der Einstellungen in der Serverkonfiguration besser aufgehoben sind als in der .htaccess-Datei, da aber sicherlich viele das ganze auch auf Shared Hosting umsetzen möchten werden alle Änderungen, die auch über die .htaccess durchgeführt werden können, im Rahmen dieser Artikelreihe dort vorgenommen.

Ich bin Web Developer und arbeite als Lead Developer bei WIBROS. Ich liebe das Internet, Baseball, Softball, Bier und die Farbe orange. Ich hab früher mal zu viel Kaffee getrunken.

Comments (6) Write a comment

  1. [quote]Im Sourcecode von xtcModified finden sich Hinweise, dass man dieses Thema auch schon mal angegangen ist, aufgrund von Fehlern bei jQuery wurde das aber wieder rückgängig gemacht. Aktuell konnten ich bei Tests im Demoshop keine derartigen Probleme feststellen.[/quote]

    Hi Matt,
    es liegt nach meinem Kenntnisstand an einem kurzzeitigen Darstellungsfehler an den jQuery UI Tabs auf der Produktseite.
    Dieser ließe sich bestimmt mit ein bisschen CSS/JS beheben.

    Besten Gruß und weiter so !!

    h-h-h

    Reply

  2. Hallo Matt,
    funktioniert das auch noch mit der modified Shopsoftware Version 1.06?
    Danke und Gruß
    Frank

    Reply

  3. Hallo Matthias,

    leider bin ich mir ziemlich unsicher welchen Teil meiner includes/header.php ich nach includes/application_bottom.php verschieben muss…

    Zeile 75 liegt bei uns mitten in einem Codeabschnitt…

    Könntest Du dir das mal kurz ansehen?

    Danke und lG

    Petra

    Reply

  4. Habe das glöeiche Problem, die angegebenen Codezeilen stimmen mit denen von mir in der includes/header.php nicht überein.
    1.06-r4642_SP2
    In der application_bottom.php gibt es bei mir kein
    //BOF – DokuMan – 2010-02-25 – Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page
    //BOF – web28 – 2010-07-14 – change to TOP of page again because jquery view problems
    //require(‘templates/’.CURRENT_TEMPLATE.’/javascript/general.js.php’);
    //EOF – web28 – 2010-07-14 – change to TOP of page again because jquery view problems
    //EOF – DokuMan – 2010-02-25 – Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page

    Weis jetzt nicht wie ich vorgehen soll 🙁

    Reply

    • Ich hab leider grad keinen Testshop da, aber in der includes/header.php müsste es in Zeile 98 losgehen und in Zeile 275 enden. In includes/application_bottom.php in Zeile 40 ein ?> einfügen und dann alles reinkopieren. Wie gesagt ungetestet.

      Reply

Leave a Reply

Required fields are marked *.