Plugin Compress - Komprimieren der Theme CSS-Dateien
am Sonntag, 7 September, 2014, 09:30
Ladegeschwindigkeit Optimierung bzw. Page Speed sind Begrifflichkeiten die in der heutigen Zeit immer wichtiger werden für eine Internetseite. Egal ob es sich um einen Blog handelt, wie dieser hier oder um andere Formen von Internetseiten.
Das Plugin Compress für die Blogsoftware Dotclear unterstützt beim komprimieren der CSS-Theme Dateien.
Leider ist es derzeit noch so, das es für die Blogsoftware nicht viele Plugins gibt, die sich ganz gezielt mit dem Thema Ladegeschwindigkeit Optimierung bzw. Page Speed beschäftigen und unterstützen.
Das Plugin Compress ist jedoch so ein Plugin, welches dafür sorgt, das die entsprechenden CSS-Dateien für das eingesetzte Theme komprimiert werden.
In diesem Beitrag möchte ich darauf eingehen, wie das Plugin Compress arbeitet.
Plugin Compress installieren
Die Installation des Plugin Compress ist Kinderleicht. Entweder installieren Sie es aus dem Backend Bereich ( System Settings >> Plugin-Verwaltung >> Add Plugins >> Buchstabe "C" >> Install-Button CompreSS anklicken ) Ihrer Dotclear Installation heraus oder Sie laden sich das Plugin Compress von der Dotclear Plugin Seite herunter.
Wenn Sie die Datei herunter geladen haben, installieren Sie dies Plugin dann über die Hochlade-Funktion in der Plugin-Verwaltung Ihrer Dotclear Installation im Backend-Bereich.
Plugin Compress einrichten
Wenn die Installation des Plugin erfolgreich war, finden Sie in der linken Navigationsleiste im Backend Bereich Ihrer Dotclear Installation unter "Plugins" den Menüpunkt "CompreSS". Klicken Sie einfach mal darauf.
Sie erhalten folgende Ansicht.
Bevor wir loslegen mit dem komprimieren der entsprechenden Theme CSS-Dateien, sollte als erstes die Einstellungen ( Settings ) vorgenommen werden.
Wenn wir auf den Reiter "Settings" klicken erhalten wir folgende Ansicht.
Dort sehen Sie im Endeffekt drei Einstellungsfelder.
1. Keep comments when compressing >> Wenn Sie dies Feld aktivieren, bedeutet das, dass beim Komprimieren die eingebundenen Kommentare in der entsprechenden CSS-Datei erhalten bleiben.
2. Create an unique backup of CSS file every time a CSS backup file is compressed >> Wenn Sie dies Feld aktivieren, wird neben der automatisch erzeugten Backup Datei Ihrer Original CSS-Datei, eine weitere komprimierte Datei von der CSS-Datei erzeugt, die dann mit einem Datum und einem Zeitstempel versehen werden.
Dadurch haben Sie auch die Möglichkeit unterschiedlichste Versionsstände Ihrer Original CSS-Datei zu sichern.
3. Text to include at the beginning of the compressed file: (freiwillig) >> Standardmäßig wird am Anfang der komprimierten CSS "/* compressed by CompreSS */" voran gestellt. Aus meiner Sicht können Sie diesen Eintrag stehen lassen.
Ich persönlich verwende für meine Internetseiten die ich mit der Blogsoftware Dotclear betreibe, folgende Einstellung:
Diese Einstellung sorgt dafür das alle Kommentar in der neuen komprimierten CSS-Datei gelöscht werden und grundsätzlich eine zusätzliche Backup Datei mit Datum und Zeitstempel erzeugt werden.
Plugin Compress ausführen
Das Plugin Compress arbeitet nicht automatisch! Ich persönlich liebe es, da ich dadurch die volle Kontrolle darauf habe, welche Theme CSS-Datei komprimiert werden soll oder auch nicht.
Letztendlich ist es nur ein Klick um eine entsprechende CSS-Datei zu komprimieren. Als Beispiel nehme ich die CSS-Dateien von dem Theme MistyLook2013.
Vor dem komprimieren mit dem Plugin Compress habe ich folgende Ansicht.
Wenn ich jetzt die entsprechenden "compress" Buttons der einzelnen CSS-Dateien anklicke, arbeitet das Plugin Compress und mir wird folgende Ansicht angeboten.
Als erstes sehe ich die erzeugten "gz" Sicherungsdateien und die "bak.css" Dateien. Aus meiner Sicht schon mal ganz wichtig, denn dahinter verbergen sich jetzt die entsprechenden Original CSS-Dateien.
Des weiteren sehe ich die entsprechenden CSS-Dateien, die für dies Theme benötigt werden.
Nach der Komprimierung mit dem Plugin Compress, erhalte ich auch die Information wieviel Prozent kleiner die neue komprimierte CSS-Datei ist gegenüber der Original CSS-Datei für das entsprechende Theme.
Wie kann man die Original CSS-Dateien wieder herstellen?
Wenn Sie die CSS-Dateien komprimiert haben, können Sie aus dem Backend-Bereich Ihrer Dotclear-Installation die Original CSS-Dateien nicht wieder herstellen.
Ich persönlich halte dies auch für gut so.
Die Wiederherstellung können Sie dadurch erreichen, indem Sie mit Ihrem entsprechenden FTP-Programm die Dateien herunter laden auf Ihren lokalen Rechner und die entsprechenden "BAK" Dateien umbenennen und danach wieder per FTP in das entsprechende Theme Verzeichnis hoch laden.
Mein Fazit zum Plugin Compress
Wie bereits schon oben erwähnt, setze ich dies Plugin in der Zwischenzeit auf allen Blogs die ich mit der Blogsoftware Dotclear betreibe ein und bin damit sehr zufrieden.
Besonders in dem Zusammenhang, das durch diesen kleinen Optimierungs-Schritt die Ladegeschwindigkeit bzw. der Page Speed sich verbessert weiter hat.
Plugins
Mein Name ist Thomas Bloch.
Kommentare
Interessant wären doch mal konkrete Werte.
Um welchen Faktor ist deine Seite nach der Komprimierung schneller geworden!?
Manchmal kann man sich den ganzen Aufwand sparen, wenn der Speed-Gewinn zu gering ist und die Dateien zwar komprimiert aber furchtbar zu lesen sind (alles in einer Zeile).
Danke für den Tipp. Beim Google Page Speed Test wird Imme gesagt, dass ich die CSS komprimieren soll aber bisher wusste ich nicht, wie ich das machen soll.
@Vanderelbe
Letztendlich kommt es darauf an wie gut teilweise die entsprechenden CSS-Dateien für das eingesetzte Theme bereits im Original sind. Da gibts du mir sicherlich Recht das es massive Unterschiede geben kann.
Ich habe mal für meinen allgemeinen Blog Bereich ( http://www.tbtip.de/blog/ ) die Dateien von dem eingesetzten Theme MistyLook2013 mit dem Plugin Compress komprimiert.
Dabei muss ich klar heraus heben, das dies Dotclear Theme schon sehr gut aufgebaut ist. Dennoch gab es geringfügige Verbesserungen.
Hardcopy Pingdom Speed-Test ohne aktiviertes Compress Plugin
Hardcopy Pingdom Speed-Test mit aktiviertem Compress Plugin
Wie man sieht ist der allgemeine Blog-Bereich von Tbtip.de um ca. 9% schneller geworden, nur alleine durch das komprimieren der Theme CSS-Dateien.
Hier ein paar Prozent und dort ein paar Prozent und schon hat der Besucher einer Internetseite das Gefühl das diese schneller lädt.
@Gordon Ecco
Danke für deinen Komentar, jedoch möchte ich darauf aufmerksam machen das dies Plugin für die Blogsoftware Dotclear ist.
Deine verlinkte Seite ist aber auf Wordpress aufgebaut und beim Besuch deiner Seite ist mir aufgefallen das diese eine unendliche Ladezeit hatte.
Deswegen habe ich mir mal erlaubt diese auch durch Pingdom testen zu lassen. Nachfolgend das Ergebnis.
Wie man sieht gibt Pingdom einen Performance Wert von 91/100. Das aber bei einer Ladezeit von 19,54 sec. und einem Datentransfer von 2,4MB
Alleine 9,6 sec hat Pingdom auf die Antwort des entsprechenden Servers gewartet.
Also ich als Besucher wäre schon längst weg.
Hi Thomas
Danke fuer den Tip und die gute Ausarbeitung, liest sich wieder mal sehr informativ.
Ich habe schon seit laengerem damit aufgehoert, CSS Anleitungen untereinander zu schreiben:
width: 20px;
height: 20px;
Stattdessen schreibe ich alles eng nebeneinander:
width: 20px;height: 20px;
Was diese Komprimierungsplugins machen ist nicht anderes als unnoetigen Leeraum herauszunehmen.
Und so loesche ich alles, was ich nicht brauche.
Deinen Test zu Vanderelbe ist ein gutes Beispiel fuer einen anderen Schwerpunkt: die Ladenzeit, die ein Server braucht.
Je aufwendiger ein Thema ist, je mehr Zeilen hat das CSS. Je mehr JavaScript geladen werden muss, je laenger dauert das Laden der Page.
Mein gegenwaertiges Thema laedt weil es ohne Schnickschnack und vor allem ohne Icons, Titelbild usw ist, entschieden schneller. Ich dachte immer, dass die Wartezeit am Anfang entsteht aus meiner .htaccess Datei. Nehme ich die .htaccess raus, gehts aber auch nicht schneller beim Erststart weil aus irgendeinem Grund der Browser und der Server miteinander erst kommunizieren muessen.
Um das herauszufinden, braucht man nur mal folgenden Test machen: Schreibe eine Zeile in Notepad und speichere es als test.html ab. Lade es hoch auf den Server. In Deinem Browser, schalte JavaScript aus und loesche alle History, Domainbezogene Cookies und Cache. Dann starte den Browser und gehe direkt zur Stelle domain/test.html. Da kannst Du sehen, wo das Uebel eigentlich herkommt.