Hey, Hi und Hallo.

361° BLOGGT RICHTIG AB.

Contao Ladezeit optimieren: Anleitung und Tipps

Contao Ladezeit optimieren: Anleitung und Tipps

16.07.2015 / geschrieben von Christian
in Entwicklung

16.07.2015 / geschrieben von Christian / in Entwicklung

Die neue Website, umgesetzt auf dem Contao CMS, ist fertig, auf zig Geräten getestet und man freut sich gemeinsam mit dem Kunden über ein tolles Ergebnis. Doch ein Punkt wird dabei zu gerne vergessen: Die Ladezeit der Website. Vor allem bildlastige Websites und der Einsatz einer Vielzahl von Scripten machen das Surfen oft zum Frust und man wartet und wartet und wartet… Außerdem darf man heutzutage die mobilen Besucher nicht vergessen, die die Website auch mit einer mittelmäßigen Verbindung (GPRS, 3G) aufrufen möchten – und das ohne Angst vor dem nächsten Link, der wieder 10 Sekunden Wartezeit mit sich bringt.

Heute befassen wir uns deswegen mit den Basics der Optimierung der Ladezeit von Contao Websites. Dabei geht es vor allem um einfache Anpassungen/Optimierungen, welche einen möglichst großen Effekt erzielen. Das Ganze zeigen wir euch am Beispiel des Redesigns der Website schwabengarten.com und gehen dabei auch auf das tolle Feature „Responsive Images“ (seit Version 3.4 in Contao vorhanden) ein. Denn „Responsive Images“ tragen vor allem bei der Optimierung der Ladezeit für Smartphones und Tablets einiges bei.

Folgende Punkte findet ihr in unserem Artikel:

  1. Analyse: Wie schnell lädt meine Website? Vorstellung nützlicher Tools
  2. Maßnahmen: Wie kann die Ladezeit optimiert werden? Tipps und Tricks zur Optimierung der Ladezeit
  3. Bonus: Responsive Images! Die Funktion „Responsive Images“ in Contao
  4. Ergebnis: Was bringt das alles nun? Unser Fazit und weitere Infos

1. Analyse: Wie schnell lädt meine Website?

Glücklicherweise gibt es gleich mehrere Möglichkeiten die Geschwindigkeit einer Website zu testen. Und die meisten dieser Tools geben dazu auch gleich Verbesserungsvorschläge. Da die Vorstellung aller verfügbarer Test-Tools definitiv den Rahmen sprengen würde, beschränken wir uns auf die größten bzw. populärsten Tools. Diese sind bei uns selbst täglich im Einsatz und liefern unserer Meinung nach die besten bzw. verlässlichsten Ergebnisse.

Google PageSpeed Insights

Google hat sich schon vor längerer Zeit für schnelle Ladezeiten im Internet ausgesprochen und begrüßt jegliche Optimierung, siehe hier. Deswegen gibt es natürlich auch ein (wenn nicht das) entsprechendes Test-Tool von Google: Google PageSpeed Insights. Das Besondere ist dabei, dass sowohl die mobile als auch Desktop Variante einer Website getestet werden. Es werden direkt Faktoren angezeigt welche die Ladezeit beeinträchtigen. Zudem werden Verbesserungsvorschläge vorgestellt, welche diese Probleme lösen können. Das Ergebnis wird in einer Skala von 0 bis 100 Punkten dargestellt – je höher die Punkte desto schneller die Seite.

Screenshot Google Pagespeed Contao

Ein Screenshot des Google PageSpeed Ergebnisses der auf dem Contao CMS umgesetzten Website des Schwabengarten. Dieser wurde nach Anwendung der Optimierungen der Ladezeit gemacht.

YSlow

Auch dieses Tool bewertet eine Seite, gibt Verbesserungsvorschläge und weitere nützliche Statistiken zur getesteten Website. Zu diesem Tool gibt’s für die meisten Browser zudem gleich noch ein Plug-In, wodurch ein schneller Test nur einen Klick entfernt ist. Ansonsten unterscheidet sich YSlow nicht sonderlich von PageSpeed Insights, wenngleich sich die Gewichtung der einzelnen Prüfkriterien etwas unterscheidet. Mehr Infos zu dem Tool findet ihr auf http://yslow.org/

GTmetrix

Wie schon Google Page Speed analysiert dieses online Tool die Seite und bewertet das Ergebnis, hier wird zudem auch gleich mit YSlow getestet, wodurch man das Ergebnis „verifizieren“ kann.
http://gtmetrix.com/

Screenshot von GTmetrix

Screenshot des Ergebnisses von GTmetrix und YSlow, nach dem die auf dem Contao CMS basierende Website optimiert wurde.

Nebst der angesprochenen unterschiedlichen Gewichtung der Prüfkriterien, ist es ansonsten aber fast Geschmackssache, welches Tool Ihr nun nutzt. Ein Blick in alle drei vorgestellten kann aber definitiv nicht schaden.

2. Maßnahmen: Wie kann die Ladezeit in Contao optimiert werden?

Nach den diversen Analysen, wissen wir nun, wie schnell die Website ist. Und mithilfe der Verbesserungsvorschläge der Tools konnte man eventuell schon ein paar Probleme lösen. Darüber hinaus gibt es aber folgende „Standard-Optimierungen“, welche zu oft nicht gemacht werden. Und das, obwohl diese schon einen extremen Sprung bei den Tests und der realen Geschwindigkeit der Website bringen.

Kompression und Cache nutzen

Als erstes sollte „gzip-Kompression“ oder „deflation“ genutzt werden. Damit wird die Menge der Bytes, die gesendet werden, alleine schon um bis zu 70% reduziert. Und das Beste daran: Da es sich um eine verlustfreie Komprimierung handelt, welche (bis auf die unten stehenden Einstellungen) völlig automatisch zwischen Server und Internetbrowser abgehandelt wird, bleiben Bilder, Videos etc. in bester Qualität vorhanden. Ob Ihr die Funktion schon nutzt, könnt ihr mit diesem kleinen Helferlein testen: http://checkgzipcompression.com/. Zudem zeigen euch auch PageSpeed und Co. an, ob die Funktion aktiviert ist.

Neben der Kompression sollte auf jeden Fall auch das Caching im Browser genutzt werden. Hierzu ist ein sog. „mod_expires“ Eintrag in der .htaccess-Datei nötig. Diese besagen vereinfacht, welcher Datei-Typ wie lange im Browsercache bleiben darf, bis er erneut vom Server heruntergeladen werden soll. Setzt man hierzu keine Einstellung, wird bei jedem Laden einer Seite alles erneut heruntergeladen. Dass das mehr Zeit kostet, sollte auf der Hand liegen. 😉 Auch hier erhaltet ihr von allen 3 vorgestellten Tools Hinweise, wenn ihr die Funktion aktuell nicht nutzt.

Sollten auf eurem Server die Funktionen noch nicht aktiviert sein, müsst ihr die .htaccess-Datei bearbeiten. Diese findet ihr entweder im Hauptverzeichnis eures Server (bzw. eures Webs) oder, falls nicht vorhanden, könnt ihr Sie einfach erstellen und folgende Zeilen einfügen.

Komprimierung mit Deflate nach Dateityp:

AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype

Cache Ablauf setzen:

ExpiresActive on
 ExpiresByType text/cache-manifest "access plus 0 seconds"
 ExpiresByType text/html "access plus 0 seconds"
 ExpiresByType text/xml "access plus 0 seconds"
 ExpiresByType application/xml "access plus 0 seconds"
 ExpiresByType application/json "access plus 0 seconds"
 ExpiresByType application/rss+xml "access plus 1 hour"
 ExpiresByType application/atom+xml "access plus 1 hour"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType video/webm "access plus 1 month"
 ExpiresByType text/x-component "access plus 1 month"
 ExpiresByType application/x-font-ttf "access plus 1 month"
 ExpiresByType font/opentype "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"

Die gezeigten Einträge entsprechen einer sinnvollen Standard-Einstellung für die .htaccess-Datei. Wer sich damit nicht zufrieden geben möchte und tiefer in das Thema einsteigen will, findet hier und hier weitere Informationen zu dem Thema.

Bez. Ladezeit für Contao optimieren haben wir hier schon den ersten Vorteil:
Bei der Installation von Contao wird standardmäßig eine entsprechende .htaccess-Datei erstellt, welche alle wichtigen Einstellungen enthält. Hierbei sind zwar ein paar auskommentiert, doch sollte man diese benötigen, reicht somit das Löschen der #-Zeichen am Anfang der entsprechenden Zeilen. Damit werden diese Einstellung aktiv und angewendet. Darüber hinaus finden sich in der .htaccess-Datei auch erklärende Kommentare zu anderen Funktionen, wodurch man sich selten hilflos und verlassen fühlt.

Render-blocking JavaScript und CSS entfernen

Eine Internetseite wird vom Browser (vereinfacht gesagt) von oben nach unten „aufgebaut“. Stehen nun am Anfang der Seite zig CSS-Dateien und viele einzelne Scripte, die alle eingebunden werden sollen, verzögert sich der Aufbau bis diese geladen und somit „abgearbeitet“ sind. Daher sollte so wenig wie möglich davon ganz oben im Dokument stehen.

Der Lösungsweg: Man packt die Scripte alle in eine Datei (man „combined“ sie). Auch hier besitzt Contao wieder angenehme Vorteile:  Man erstellt einfach eine neue Datei namens „j_scripts.html5“ im Ordner „templates“. In dieser Datei werden dann die Pfade zu den Scripten angegeben, die zusammengefasst werden sollen. Hier das Beispiel von unserer Contao Website:

<!--?php
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/webfont.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/jquery.validate.min.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/messages_de.min.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/datepicker.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/jquery.cookie.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/sg_script.js|static';
?>

Nachdem das getan ist, haben wir es schon geschafft. Nun stehen alle Scripte in einer einzigen Datei und es müssen somit nicht mehr viele Einzelverbindungen aufgebaut werden, was unnötig Zeit kostete. Damit die Datei nun auch geladen wird, wählt man im Backend unter „Themes -> Seitenlayouts -> jQuery-Templates“ das neu erstelle Template aus. Damit sind die benötigten Scripts auf allen Seiten vorhanden.

Screenshot der Temaple-Auswahl in Contao

Auswahl der zusammengefassten Scripte „j_scripts“ aus den Tempaltes im Contao CMS. Dadurch wird die Datei nach dem Generieren dann auch in dem jeweiligen Layout eingebunden.

Bilder optimieren

Bei diesem Punkt dürfte eigentlich jedem klar sein was zu tun ist. Nutzt angemessene Bildgrößen, jedes halbwegs vernünftige Grafikprogramm hilft euch dabei. Solltet ihr jedoch keins zur Hand haben gibt es auch hier Werkzeuge die euch helfen.

Darüber hinaus gibt es noch einen Tipp, wie man besonders schnell an optimierte Bilder einer schon bestehenden Website kommt. Sowohl für Google Chrome als auch für den Mozilla Firefox gab es die Erweiterung „PageSpeed Insights“. Gab, da sie mittlerweile nicht mehr angeboten und installiert werden kann. Sollte man sie jedoch noch installiert haben, funktioniert sie nach wie vor problemlos.

Überprüft man nun eine Seite mit diesem Plugin (F12 drücken, um Entwickler-Tools aufzurufen, dann den Reiter PageSpeed auswählen), erhält man (wie auch bei der Onlineversion von PageSpeed) entsprechende Verbesserungsvorschläge. Dabei interessiert uns nun aber der Punkt „Bilder optimieren“. Hier erhält man nämlich neben den Hinweisen auch direkt Links zu den optimierten Versionen der Bilder, siehe Screenshot:

Screenshot des Google PpageSpeed Insights Plugin im Chrome

Unter dem Punkt „Bilder optimieren“ findet man im Plugin „PageSpeed Insights“ im Chrome und im Firefox direkt Links, zu optimierten Versionen der Bilder. Diese kann man durch einen Klick öffnen, speichern und danach verwenden.

Klickt man den Link an (gelbe Markierung im Screenshot), öffnet sich das optimierte Bild. Dieses können wir nun einfach speichern und auf der Website gegen die nicht-optimierte Version tauschen. Fertig!

Diese Funktion gibt es so leider nur beim dem Browser-Plugin von PageSpeed, nicht jedoch in der Onlineversion. Warum das so ist, weiß wahrscheinlich nur Google selbst. Solltet Ihr aber das Plugin noch besitzen, habt ihr dadurch einen echten Vorteil und könnt Bilder auf einfachste Art optimiert speichern.

Cachen

Wenn ein Content Management System genutzt wird, sollte auch der Cache genutzt werden – sofern vorhanden. Somit muss das System nicht bei jedem Aufruf die Seite neu generieren, was sich bei der Geschwindigkeit bemerkbar macht und vor allem auch die Last auf dem Server reduziert (letzteres vor allem bei vielen Besuchern).

Auch hier bringt Contao eine tolle Funktion mit, die einem das Leben deutlich erleichtert. So kann im Contao CMS der Cache nicht nur global für alle Seiten der Website definiert werden, sondern man kann durch wenige Klicks jeder Seite eine eigene Cachezeit geben. Das generelle Einstellen der Cachezeit (also die Standardeinstellung für alle Seiten) wird unter „Layout -> Seitenstruktur“ beim jeweiligen Seitenstartpunkt im Bereich „Cache-Einstellungen“ gemacht. Die Einstellung für die einzelnen Seiten sind ebenfalls in der Seitenstruktur bei der jeweiligen Seite  (über „Seite bearbeiten“) zu finden. Siehe dazu auch den folgenden Screenshot:

Cache-Einstellungen bzw. Cachezeit in Contao pro Seite definieren

Hier kann im Contao CMS (nebst einer allgemein gültigen Cache-Einstellung) die Cache-Einstellung pro Seite definiert werden. Die Einstellungen reichen dabei von „O (nicht cachen“ bis hoch zu „30 Tage“ mit variablen Zwischenschritten.

Ein sinnvoller Standardwert könnten 6 Stunden (oder auch mehr) sein. Hier kommt es wirklich darauf an, wie oft ihr die Inhalte eurer Seiten aktualisiert bzw. wie aktuell die jeweiligen Unterseiten sein müssen. Die Regel ist also: Je weniger aktuell eine Seite sein „muss“, desto höher kann die Cachezeit eingestellt werden.

Sollte ihr einmal den Cache selbst leeren wollen, da eine dringende Änderung veröffentlicht werden muss, ist dies auch kein Problem. Hierzu klickt ihr im Contao CMS auf „System -> Systemwartung“, wählt unter „Daten bereinigen“ die Checkbox bei „Seitencache leeren“ aus und klickt auf „Daten bereinigen“. Damit wird der Cache komplett geleert und alle Seiten werden neu generiert. So sind dann auch alle gemachten Änderungen sofort auf allen Seiten sichtbar.

Wichtig: Eine Ausnahme bilden alle Seiten, die stetig „dynamische“ Inhalte bereitstellen, wie z.B: ein Kontaktformular. Hier sollte die Cachezeit auf „0“ gesetzt werden, damit diese problemlos funktionieren und sich nicht mit dem Cachen in die Quere kommen.

CDN verwenden

Durch die Nutzung eines Content Delivery Network (kurz CDN) kann die Antwortzeit der Seite in manchen Fällen ebenfalls verringert werden. Ein CDN kümmert sich dabei vor allem um die Auslieferung von „statischen“ Inhalten, also Bildern, Videos etc. Die Funktionsweise ist dabei wie folgt: Fordert ein Nutzer eine Datei vom CDN an bekommt er die Antwort von demjenigen Server mit der besten Verbindung. Es werden somit nicht mehr alle Daten von eurem Server geladen, sondern die Last wird quasi „verteilt“. Somit ist auch diese Funktion vor allem für Websites mit vielen Besuchern sehr interessant, da ein CDN hier entlastet.

Natürlich bietet Contao auf hier wieder eine einfache Möglichkeit an, einen CDN einzurichten. Unter „Layout -> Seitenstruktur“ müsst ihr nur den Seitenstartpunkt bearbeiten. Dort findet ihr dann im Bereich DNS-Einstellungen die Felder „Datei-URL“ und „Asset-URL“. In diesem müsstet ihr dann die URL zu eurem auf ein CDN ausgelagerten „files“- bzw. „assets“-Ordner eintragen, fertig.

CDN Einstellung im Contao CMS

Ein Content Delivery Network zusammen mit Contao zu verwenden, ist einfach. Nachdem ihr einen Anbieter ausgewählt habt, müsst ihr nur die entsprechenden URLs zu den Verzeichnissen „files“ und „assets“ in die o.g. Felder eintragen. Damit weiß Contao, woher die entsprechenden Dateien geladen werden sollen und ersetzt die Pfade somit korrekt.

Wenn euch das Thema Content Delivery Network näher interessiert, können wir euch diesen Artikel aus der t3n ans Herz legen. Zwar ist er schon etwas älter, allerdings wird die Funktionsweise gut erklärt und man kann tiefer in das Thema eintauchen.

3. Bonus: Responsive Images in Contao!

Die Website des  Schwabengarten ist sehr bildlastig und stellt daher für die Besucher mit mobilen Geräten und schlechter Internetverbindung ein Problem dar. Besucher langsamer Websites brechen die Verbindung meinst nach wenigen Sekunden ab, deshalb musste ein Lösung gefunden werden, die Seite schnell und trotzdem ansprechend anzuzeigen.

Hier kommt nun Contao mit der Funktion „Responsive Images“ in Spiel. Kurz zusammengefasst bieten „Responsive Images“ die Möglichkeit, Bilder nur in der wirklich gebrauchten Auflösung auszuliefern. Statt also riesige Bilder (1000px und mehr) auch auf sehr kleinen Bildschirmen (Smartphones, kleine Tablets) auszugeben und diese dann via Browser zu skalieren, werden Bilder direkt in einer passenden Größe ausgegeben.

Das Contao CMS stellt hierbei 2 unterschiedliche Methoden zur Verfügung: auflösungsbasierte Bilder (sprich, die Auflösung der Bilder wird reduziert) und „Art Direction“ (sprich, Bilder werden um den gewählten Bereich herum zugeschnitten).

In unserem Beispiel haben wir uns für die Variante mit auflösungsbasierten Bilder entschieden. Bei dieser Variante werden neue Bildgrößen, abhängig von der Bildschirmbreite und Pixeldichte, erzeugt und ausgegeben. Im Backend von Contao werden unter „Themes -> Bildgrößen“ die Einstellungen vorgenommen. Zuerst haben wir eine neue Bildgröße definiert. Dabei haben wir unser Format 640 Breite und 640 Höhe eingetragen und gespeichert. Im 2. Schritt definieren wir nun welche Bildgröße bei welcher Bildschirmauflösung angezeigt werden soll.

Ansicht der Funktion "Responsive Images" im Contao CMS

Contao unterstützt „Responsive Images“ von Haus aus. Hier sieht man, wie die entsprechenden „Regeln“ dafür festgelegt werden können.

Wir haben hier 2 Bildgrößen-Media-Query definiert, die angeben, dass bei einer Bildschirmbreite von 0 bis 479px das Bild im Format 320×320 geladen werden soll. Ab einer Breite von 480px soll das Bild dann im originalen Format angezeigt werden.

Die verwendeten Werte sind dabei natürlich abhängig vom jeweiligen Layout bzw. den benötigten Bildgrößen auf eurer Website. Hier müsst ihr festlegen, in welchen Größen ihr die Bilder benötigt und ab wann welche Bildgröße geladen werden soll. Nachdem ihr das getan habt, wird Contao dann alle festgelegten Bildgrößen autom. erstellen und bereitstellen, was natürlich ungemein viel Arbeit abnimmt.

Wichtig: Die Funktion „Responsive Images“ basiert im Frontend auf dem <picture>-Element mit <srcset>, <sizes> etc. Dieses wird leider nicht von allen Browsern unterstützt. Daher wird von Contao aber auch direkt ein sog. Polyfill bereitgestellt, welches aktiviert werden kann um die Kompatibilität zu erhöhen. Dazu müsst ihr einfach bei „Layout -> Themes“ das Seitenlayout eures Themes bearbeiten und im Bereich „Responsive Bilder“ den Haken bei der Checkbox „Das Image-Polyfill laden“ setzen.

Wer nun noch mehr zu diesem Thema erfahren will, findet im Blog von Kulturbanause einen tollen Artikel zum Thema „Responsive Images“, den Problemen, Lösungen etc.

Ergebnis: Was bringt das alles nun?

Wir haben gesehen, dass man mit wenig Aufwand schon ziemlich gute Ergebnisse erzielen kann und eine Website dadurch auch merklich schneller wird. Dabei braucht es weder tiefgreifendes Expertenwissen, noch umfangreiche Programmier-Kenntnisse – Contao sei Dank.

In unserem konkreten Beispiel der Schwabengarten-Website konnten wir das Ergebnis von mittelmäßigen 75 Punkte auf (mittlerweile) über 90 steigern. Dabei haben wir einzig die oben genannten Maßnahmen verwendet. Das Ergebnis kann sich nun aber definitiv sehen lassen und die Geschwindigkeit passt.

Aber nun genug von uns! Wie sehen eure Seiten aus? Was ist euer Score beim Google PageSpeed? Habt ihr noch weitere wichtige Schritte zur Verbesserung der Ladezeit? Oder gibt es Fragen zu unseren Tipps? All das gerne rein in die Kommentare!.

Über den, der's geschrieben hat:

Christian mag gute Gestaltung, schöne Fotografie und echte Schallplatten. Auf der Suche nach dem Guten und Schönen kontaktet und konzeptet er für 361° Digital.

14 Kommentare

  1. Hallo Markus,

    ein sehr schöner Artikel.
    Die 90 Punkte hab ich leider noch nicht erreicht.

    Er meckert bei mir z.B. das CCS-File von Typekit und FontAwesome an.
    Darauf hab ich keinen Einfluss 🙁

    Viele Grüße
    Christian

  2. Hallo Christian,

    vielen Dank für das Lob. 🙂

    Externe Scripte sind oftmals ein Problem und leider kann man da wenig machen. Die erreichten 84 Punkte sind aber auf jeden Fall ein guter Wert und deine Seite ist soweit ja angenehm schnell.

  3. Hallo Markus,
    hast du für uns vielleicht einen Tipp wie man über eine eigene Subdomain z.B http://cdn.meineseite.de in Contao den CDN einrichtet. Das geht! Nur finde ich nicht die passenden Infos im www. Im BE kann man den Pfad zu „Datei-URL“ und „Asset-URL“ eintragen.

    Der Trick bei der eigenen Subdomain wäre, das der Browser sich durch die Beschränkung an gleichzeitig zu ladenden Dateien pro URL, sich mit einer Subdomain die Last verteilt.

    Mein aktueller PageSpeed ist bei 90 mit den Tipps von Martin.
    http://rocksolidthemes.com/de/contao/blog/contao-ladezeit-optimieren

    Viele Grüße

    Markus

  4. Vielleicht habt Ihr noch einen Tipp zum Render-Problem: Das Zusammenfassen der Scripte ist ja ein Punkt, aber Google Page Speed bemängelt bei mir (und offenbar auch bei anderen mit Contao im Einsatz) immer, dass ich Mootools (alternativ jquery) zu früh laden würde. So komme ich über die 91 Punkte (Desktop) und 75 (Mobil) irgendwie nicht hinaus.

    Eine tolle und aktuelle Übersicht, dieser Artikel! Danke!

    • Vorab: Danke für die Blumen. 🙂

      Generell ist es schwierig, jQuery und Co später zu laden, da diese im Template über < ?php echo $this->head; ?> kommen. Das diese Variable aber am Anfang der Seite gebraucht wird (da eben auch andere Dinge für den head-Bereich der Seite dadurch übergeben werden), sollte diese dort stehen.

      Die einzige Möglichkeit ist eine unschöne Lösung, die so von Contao nicht vorgesehen ist. Man könnte < ?php echo $this->head; ?> auch ganz unten im Template einfügen. Dann wird dort die js-Datei ausgegeben und Google ist „zufriedener“. Weiter müsste man dann aber alle anderen Inhalte der Variabel händisch im < head > des Templates einfügen und könnte somit die sonstigen Funktionen der Variabel (bspw. das Einfügen weiterer Tags über das Feld „Zusätzliche < head >-Tags“ im Contao-Backend) nicht nutzen.

      Eine wirklich schöne Lösung ist das aber nicht und wir raten auch eher nicht dazu. Vor allem: Mit deinem Page Speed Score kannst du eigentlich zufrieden sein und irgendwann reicht es doch auch. Denn gefühlt ist die Website schon sehr schnell. 😉

  5. Danke für das Feedback: An so etwas hatte ich auch schon gedacht, aber das ist mir dann doch zu kippelig. Im Mobil-Bereich gefallen mir die Google-Wertungen noch nicht so, mal sehen, ob ich noch ein paar Schrauben finde.

    • Kein Problem, gerne. Wir sehen es aber auch so – deswegen machen wir das auch nur sehr ungerne oder nur nach expliziter Aufforderung. 😉

  6. Hallo Markus,

    danke für diese schöne Anleitung.
    Hast du eventuell eine Idee, warum

    <!–?php
    $GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/webfont.js|static';
    $GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/schwabengarten/js/jquery.validate.min.js|static';

    nicht funktioniert? Die Pfade zu den *.js sind richtig. Allerdings habe ich auf den Modul-Ordner verwiesen, also:
    $GLOBALS['TL_CONFIG']['MODULE'] und dann den Pfad. So zeigt es allerdings beim Google Page Speed test keine Wirkung.

    Viele Grüße,
    Christoph

    • Hi Christoph,
      ich kann dir nicht ganz folgen, was genau hat keine Wirkung auf den Page Speed? Werden deine Scripte nicht zusammengefasst oder bleibt der Page Speed gleich?
      Vielleicht kannst du ja einen Link zu deiner Seite posten, dann kann ich es mir auch mal anschauen.

      Viele Grüße

  7. Hi Markus,

    die Skripte werden nicht zusammengefasst. Jedenfalls weiss ich nicht, woran ich das erkennen kann? Im Seitenquelltext jedenfalls wird jedes Skript einzeln aufgeführt – wie vorher auch.
    Und auch der Google Page Speed Report moniert weiterhin, dass die Skripte das Rendering blockieren.
    Bei mir sieht die j_scripts.html5 so aus:

    Die Website würde ich Dir lieber wenn dann per Mail senden, ohne das hier öffentlich zu machen. Könnte sonst Ärger geben ;-).

    Viele Grüße
    Christoph

    • Hey Christoph,

      entschuldige die späte Antwort.

      Du musst deinen Code bitte ohne öffnendes PHP etc. einfügen, da diese Tags in den Kommentaren entfernt werden. Also bitte nochmal schreiben, dann schauen wir uns das gerne an. Und URL zur Website via E-Mail ist auch kein Thema. 😉