Kürzere Ladezeiten durch eine statische CSS
Wer Gambio GX2 und dazu das recht praktische Tool StyleEdit nutzt, nimmt damit leider auch einen nicht zu vernachlässigenden Nachteil in Kauf. Denn viele der notwendigen Style-Vorgaben werden dynamisch aus der Datenbank geladen, was umständlich viel Zeit in Anspruch nimmt.
Wer kein StyleEdit nutzt, muss zudem umständlich Änderungen händisch in der Datenbank vornehmen.
Um die Ladezeiten zu verkürzen, wird aus der dynamisch generierten CSS eine klassische, statische CSS. Die Umstellung ist recht schnell gemacht und bringt spürbare kürzere Ladezeiten.
Wie gehen wir also vor, um auf statische CSS umzustellen?
1. Shop sowie Datenbank komplett sichern. Wenn etwas schief geht, könnt Ihr mit dem Backup schnell den Shop herstellen.
2. Auf dem lokalen PC eine neue Datei erstellen: dynamic.css
3. Jetzt über den Browser die aktuelle CSS aufrufen.
Bei dem EyeCandy-Template lautet der Pfad
http://Deine-Webshopdomain.de/templates/EyeCandy/gm_dynamic.css.php?current_template=EyeCandy
Bei dem Gambio-Template
http://Deine-Webshopdomain.de/templates/gambio/gm_dynamic.css.php?current_template=EyeCandy
Nutzt ihr ein anderes Template, dann entsprechend den Pfad angeben, um die CSS aufrufen zu können
Der komplette Inhalt muss jetzt in die angelegte dynamic.css kopiert werden.
5. Die Datei dynamic.css speichern und ins Templateverzeichnis hochladen. Bei EyeCandy wäre das z.B. …/templates/EyeCandy/
6. Aus dem Verzeichnis /includes die Datei header.php auf den Rechner laden und mit dem Editor (oder z.B. Dreamweaver) öffnen.
An dieser Stelle gibt es eine Änderung, da sich durch Updates, Servicepacks und neue Shopversionen hin und wieder etwas ändern kann.
Letztendlich muss der Teil "/gm_dynamic.css.php?" durch "/dynamic.css?" ersetzt werden. Der Rest bleibt identisch.
7. Die folgenden Zeilen im Quelltext suchen
<link type=”text/css” rel=”stylesheet” href=”<?php echo ‘templates/’.CURRENT_TEMPLATE.’/gm_dynamic.css.php’.$renew_cache; ?>” />
Update 31.03.2014:
<link type="text/css" rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/gm_dynamic.css.php?' . implode('&', $t_css_params_array); ?>" />
und ersetzen durch
<link type=”text/css” rel=”stylesheet” href=”<?php echo ‘templates/’.CURRENT_TEMPLATE.’/dynamic.css’; ?>” />
Update 31.03.2014:
<link type="text/css" rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/dynamic.css?' . implode('&', $t_css_params_array); ?>" />
8. Die Datei header.php speichern und in das Verzeichnis /includes hochladen. Wenn das ftp-Programm fragt, ob die Datei überschrieben werden soll, so muss dies natürlich bestätigt werden
9. Im Adminbereich zur Sicherheit den Cachespeicher zur Seitenausgabe löschen und dann sollte auch nach einem Reload der Seite Euer Shop aussehen, wie immer. Nur wird jetzt die statische CSS genutzt und damit dürften auch die Ladezeiten verkürzt sein.
Natürlich kann StyleEdit jetzt nicht mehr genutzt werden, um Änderungen am Design vornehmen zu können. Entweder arbeitet man jetzt direkt an der statischen CSS oder ihr macht die Änderung rückgängig, um mit StyleEdit arbeiten zu können. Nach dem Abschluss kann die Prozedur dann wiederholt werden.
Viel Spaß bei der Umstellung, die sich wirklich lohnt.
Hey Kay.
Danke für die Auflistung. Hast du auch Erfahrungen ob diese Änderungen bei einem Update berücksichtigt werden, oder ob man dann nochmals eingreifen muss?
mfg
Hallo Martin.
Bitte, gerne doch. Nur wenn die header.php ausgetauscht wird (z.B. durch eine neuere php-Datei) müsste man die Anpassung wieder vornehmen.
Die Anpassung ist doch aber schnell wieder hergestellt, da die statische CSS im Theme-Ordner weiterhin unangetastet bleibt.
Super. Danke für die Info.
Das mit CSS aus Datenbank macht Gambio stimmt generell schon, aber eben nur beim ersten Aufruf durch einen Besucher. Danach kommt alles aus dem ordner /cache. was bleibt: der Layouteditor schreibt absoluten Mist-Code im CSS. Nirgends kurzformen, alles doppelt und dreifach gestyled, keine sinnvollen verschachtelungen / vererbungen. Statisch ist immer schneller und ausserdem deutlich besser zu bearbeiten.
Ja, das stimmt absolut. Wer den Style-Editor nutzt, sollte daher auch von Zeit zu Zeit manuell den Cache im Ordner per ftp leeren.
Oder man geht hin und stellt möglichst früh auf eine statische CSS um und vermeidet damit die Nachteile von Style-Edit.
Mit Tools wie firebug als Plugin für den Browser findet auch ein Anfänger schnell die richtigen Zeilen, um das Design per Hand ändern zu können.
Danke für die Anleitung.
Leider gibt es in meiner header.php keinen Eintrag :“<link type=”text/css” rel=”stylesheet” href=”” />“
Was kann ich machen?
Grüße
Andreas
Hallo Andreas,
die Zeile muss da sein. Denn sonst würde das Design überhaupt nicht funktionieren und man würde Fehlermeldungen erhalten.
Schreib mir einfach kurz eine Nachricht, wenn Du es nicht finden solltest. Dann helfe ich Dir dabei.
Gruß, Kay
Hallo Kay,
danke für Deine Antwort.
Ich habe die Zeile inzwischen gefunden.
Ich hatte es nur mit der Bearbeiten – Suchen – Funktion im Editor versucht,
das ging komischer Weise nicht obwohl die Zeile da ist.
Ich habe nun alles nach Anleitung gemacht, bekomme aber eine verschobene Anzeige mit Fehlermeldung :
WARNING(2): „Division by zero“ in /mnt/web4/a2/70/53484470/htdocs/gambiogx_04/includes/header.php:113 (Details)
WARNING(2): „Division by zero“ in /mnt/web4/a2/70/53484470/htdocs/gambiogx_04/includes/header.php:113 (Details)
EyeCandycss?? />
Ich habe nun wieder zurückgesetzt, jetzt ist wieder alles wie vorher.
Kannst Du mir da einen Tipp geben?
Danke vorab.
Andreas
Hallo!
Erstmal danke für die Anleitung – leider schaffe ich es nicht es zum laufen zu bekommen.
Ich bekomme anschließend diesen Fehler und das Template ist zerschossen (alles linksbündig, keine Grafiken etc.):
WARNING(2): "Division by zero" in /mnt/weba/d1/17/53699417/htdocs/gambiogx_01/includes/header.php:137 (Details)
WARNING(2): "Division by zero" in /mnt/weba/d1/17/53699417/htdocs/gambiogx_01/includes/header.php:137 (Details)
EyeCandycss />
Kannst du mir da einen Tipp geben?
Vielen Dank schon im Voraus!
Manu
Hallo Manu,
aktuell nicht wirklich. Ich werde es bei Gelegenheit aber noch mal an einem Testshop ausprobieren und vielleicht fällt mir etwas auf.
Viele Grüße, Kay
Kann mich Manue nur anschliessen. Habe aktuell die Version : v2.0.14.4 r12079 und in der Header.php befindet sich folgende Zeile: <link type="text/css" rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/gm_dynamic.css.php?' . implode('&', $t_css_params_array); ?>" /> .
Der Shop ist danach linksbündig und sieht sehr schlecht aus. Musste wieder auf gm_dynamic.css.php zurückwechseln.
Bitte um abhilfe!
Die Anleitung ist ja schon ein paar Tage alt. Damals hat es funktioniert. Wenn ich etwas Zeit finde, schaue ich nach, ob sich etwas geändert hat. So gab es in der Zwischenzeit viele Servicepacks, die vielleicht eine andere Vorgehensweise notwendig machen.
Aktuell kann ich aber nicht sagen, wann ich die Zeit finde. Kunden gehen halt vor. Aber ich pack es mal auf meine To-Do Liste 🙂
Viele Grüße, Kay
Update 31.03.2014: Es gab tatsächlich Änderungen in der Header.php.
Diese habe ich jetzt in der Anleitung nachgebessert, damit es wieder funktioniert.
Danke für die Anleitung, werde Sie die nächsten Tage mal umsetzen.
Hatte schon des öfteren Probleme mit dem Style Edit. Ohne Änderungen meinerseits sind Zeilen verschoben, die ich dann Dank manuellem Eingreifen wieder in Ordnung gebracht habe.