Blog verschlankt und komprimiert
Nachdem ich eine Menge an überflüssigem Bildmaterial eliminiert hatte, standen noch einige geplante Aufgaben auf meiner To-Do-List. Neben der gzip-Komprimierung, habe ich auch noch einmal die CSS Sprites überarbeitet. Dann meckerte Pagespeed Folgendes an: “Remove Query Strings from static resources”. Last but not least habe ich mich wieder von einigen Plugins verabschiedet.
Ich möchte nicht auf alle Maßnahmen detailliert eingehen, werde aber auf die entsprechenden recherchierten Beiträge verlinken, die mir bei der Arbeit immens geholfen haben.
Drei Plugins mussten gehen
Anders als Marcus habe ich mich nicht von SyntaxHighlighter Evolved getrennt, weil es auf meinem Blog Probleme bereitete. Im Gegenteil, auch mit der aktuellen WordPress-Version 3.5.1 funktionierte es hier einwandfrei.
Nun war es eine ganze Weile auf diesem Blog installiert und es hatte für mich eine absolute Daseinsberechtigung, weil ich doch desöfteren Codes in meinen Beiträgen veröffentliche. Vor einiger Zeit habe ich sogar in einem Beitrag ausführlich erklärt, warum ich es einer manuellen Umsetzung vorziehe. Zusammen mit dem SyntaxHighlighter TinyMCE Button ermöglichte dieses Plugins eine äußerst komfortable Handhabung für mich. Und natürlich profitierten auch Besucher durch die einfache Kopierfunktion davon.
Warum nun doch der Abschied von SyntaxHighlighter Evolved?
Jetzt habe ich eine Möglichkeit gefunden, Codes einfach und ohne Plugin darzustellen und entschloss mich doch, das recht umfangreiche Plugin SyntaxHighlighter Evolved und natürlich auch die dazugehörige Buttonfunktion für den WYSIWYG-Editor zu deinstallieren.
Eine tolle Beschreibung liefert Elisabeth in ihrem Beitrag zur Darstellung des Codes in WordPress. Ihr Beitrag war auch die Grundlage für die manuelle Umsetzung in diesem Blog.
Darin erklärt sie, dass lediglich ein Script in die functions.php des Themes eingefügt werden muss. Der jeweilige Code wird mit pre-Tags in der html-Ansicht des Editors eingefügt, was aber wirklich kein Problem darstellt. Das Script nimmt mir aber das fummelige Einfügen der entsprechenden html-Zeichen (z. B. &;quot; für “ oder < für <) ab.
Ich habe versucht, die Darstellung mit einer winzigen Grafik mit dem typischen Streifenhintergrund, den man auch von den jeweiligen SyntaxHighlighter-Plugins kennt, ein wenig “aufzuhübschen”.
Den Hintergrund habe ich mit dem Webtool Stripe Generator erstellt. Und damit ihr auch gleich seht, wie die manuelle Umsetzung aussieht, füge ich hier den Beispiels-Code für meine CSS-Umsetzung ein. ;-)
.entry pre{
background:url("http://www.pfad-zum-hintergrundbild/grey_white2.png") repeat scroll left top;
padding:18px 0px 15px 5px;
border-top:10px solid #D3D1D1;
border-left:2px solid #D3D1D1;
border-right:2px solid #D3D1D1;
border-bottom:2px solid #D3D1D1;
overflow:auto;
margin:25px 0px 30px 5px;
width:590px;
font-family:Courier,Monospace;
line-height:1.331em;
font-size:0.9em;
color:#554C72;
white-space:pre;
display:inline-block
}Und wenn wir schon einmal dabei sind …
… musste auch noch Link Indication dran glauben. Auch dieses lief hier immer einwandfrei und musste somit letztendlich nur deswegen weichen, weil ich mich von Plugin-Ballast befreien wollte. :-)
Somit konnte ich von ursprünglich ~ 30 auf 23 aktiven Plugins reduzieren. Einige von ihnen deaktiviere ich zwischenzeitlich, wenn ich sie nicht dauerhaft benötige. Zum Beispiel aktiviere ich Preserve Editor Scroll Position immer erst dann, wenn ich einen Beitrag schreibe und WP CleanFix darf ungefähr einmal die Woche seinen Dienst verrichten.
Weitere Beiträge, die mich bei meiner Arbeit unterstützt haben
- Remove Query Strings from static resources Forenbeitrag bei WordPress.org
- WordPress Ladezeiten verbessern: auch css-Dateien per GZip-Komprimierung verkleinern auf Markensysteme
- WordPress beschleunigen (2) – GZip-Komprimierung auf M.onblog.at
Fazit:
Nach Deinstallation der oben genannten Plugins und der anderen beschriebenen Maßnahmen habe ich nach Messung bei Pingdom Tools (Amsterdam) eine Ladezeit unter einer Sekunde erreichen können.
Edit 11.09.2013
Wegen diverser Darstellungsfehler insbesondere der Sonderzeichen wie zum Beispiel
> und &
habe ich mich dazu entschlossen, wieder ein Syntax Highlight-Plugin zu installieren. Ich habe mich nun für Crayon Syntax Highlighter entschieden.
Hey Sylvi,
wenn du schon beim verschlanken bist, dann solltest du dich auch noch mal deinen JavaScript-Dateien bzw. um deren Einbindung kümmern.
Auf dieser Artikelseite z.B. bindest du 3 verschiedene jQuery-Versionen ein (1.2.6, 1.4.2 & 1.8.3). Außerdem bindest du alle jQuery UI Komponenten einzeln ein?! Die könntest du z.B. auch zusammenfassen bzw. brauchst du die überhaupt alle?
Grüße
Stephan
Hallo Stephan,
Du hast recht, mit den JavaScripten stehe ich ein wenig auf “Kriegsfuß”. ;-)
Ich habe bereits über einen “Deferloading-Befehl” versucht, sie später zu parsen, aber da funktionierte z. B. Editable Comments nicht mehr so wie gewünscht. Der Slider im Header-Bereich übrigens auch nicht.
Ich werde mich bestimmt demnächst noch ein bisschen näher damit befassen und keine Ahnung, ob ich die alle brauche. Ein wenig habe ich bereits recherchiert, wie ich sie zusammenfassen bzw. inline einfügen kann, bin da aber noch nicht wirklich weiter gekommen.
Aber auch subjektiv meine ich, dass die Seite recht schnell lädt.
Danke für Dein Feedback,
Gruß Sylvi
P.S.: Ich habe aber die JavaScripte schon einmal per JSMin und gzip-mäßig komprimiert. ;-)
Hallo Sylvi,
jetzt unter einer Sekunde – toll.
Könnte mir vorstellen, das ein Aulagern der Javascripte auch noch etwas an Performance bringen könnte.
Falls Du es nicht schon gemacht hast, gibt es auch noch Tools, mit denen man Javasripte optimieren kann, wie z.B.
http://www.seo-ranking-tools.de/javascript-compressor-cruncher.html
oder https://github.com/yui/yuicompressor/downloads um nur mal welche zu nennen.
Liebe Grüße
hansen
Huhu hansen,
danke schööön. :-D
Und danke für Deine Link-Tipps. Yuicompressor sagt mir was. ;-) Du hattest vor einiger Zeit auch diese Seite empfohlen, damit ist auch das Komprimieren von Javascripten möglich. Funktioniert damit auch wunderbar, ich habe es vorwiegend für meine CSS-Dateien verwendet.
Die Javascripte habe ich per Software nach dieser Methode komprimiert und mit 7zip gezippt. Ich meine sogar, durch dieses Verfahren waren die Dateien noch kleiner als per Online-Tool. Ich hatte beide Methoden ausprobiert.
Dann habe ich noch entsprechende Einträge wie in den verlinkten Beiträgen dokumentiert in der .htaccess vorgenommen.
Lieben Gruß,
Sylvi
Hallo,
also wie bereits die ersten beiden Poster erwähnt haben, wenn du das mit Java noch in den Griff bekommst, lädt dein Blog vermutlich in Rekordzeit. Wobei ich schon jetzt sagen muss, dass ich wirklich recht selten einen Blog antreffe, wo die Ladezeit so niedrig ist wie hier. Da macht das Besuchen und auch das Lesen mehrerer Artikel auf jeden Fall wieder eine Menge Spass.
Hej Niklas,
danke für Dein nettes Feedback. Es ist schön und auch wichtig für mich zu wissen, dass nicht nur ich persönlich meine, dass die Seite relativ schnell lädt.
Höchstwahrscheinlich wäre es wesentlich einfacher, durch einen Wechsel zu einem schlichteren und moderneren (responsive) Theme und zusätzlichem Verzicht einiger Plugins & Bilder die Ladezeiten auf ein Mindestmaß zu reduzieren.
Aber ich hänge irgendwie noch an diesem Template. Es hat mich einen Großteil meiner Bloggerzeit begleitet.
Jaja … die Javascripte … neverending story. ;-)
Lieben Gruß
Sylvi
Finde es immer schwierig Plugins abzuspecken, denn irgendwie gewöhnt man sich an die Features und hat das Gefühl, das sie auch den Lesern wichtig sind. Aber letzten Endes ist Performance alles. Besucher hassen lange Ladezeiten.
Zum Thema: “Remove Query Strings from static resources”. Bei uns ist das so ein Problem, da Content Delivery Networks immer so ein Zeugs dranhängen. Geht also nicht. Und ohne CDN wärs ohnehin langsamer.
Hallo Alexander,
da sagst Du was. Ich habe mich wirklich schwer getan, mich von SyntaxHighlighter Evolved zu trennen.
Und ebenso ergeht es mir mit Editable Comments.
Ich denke, dass sich insbesondere die Stammkommentatoren daran gewöhnt haben und gehe davon aus, dass es wahrscheinlich einige vermissen werden, falls ich es entfernen würde.
Gruß Sylvi
Bringt es was die Text-dateien und readme.html dateien aus den plugins-ordner zu löschen? Oder darf man das nicht? Funktioniert dann noch alles? Sind doch eigentlich überflüssige dateien, oder sehe ich das falsch?
Hej Jan-Philipp,
hm, mit dieser Frage habe ich mich noch nicht beschäftigt, insbesondere was die rechtliche Seite betrifft.
Welche ich auf jeden Fall auf Anraten von Thomas gelöscht habe, ist die von der WordPress-Installation.
Und wie Du siehst … der Blog läuft ja noch. :-)
Gruß Sylvi
So Erfahrungsberichte sind immer gut. Vor allem kannte ich Pingdom Tools noch gar nicht, gefällt mir aber sehr gut. Meine Startseite ist leicht unter und mein Blog leicht über drei Sekunden. Da kann man ja eigentlich sehr zufrieden mit sein, aber mir sind Details aufgefallen, die mir gar nicht bewusst sind. Also ab ans Optimieren. :-)
Hallo Henning,
ich selber stöbere auch unheimlich gerne in Blogs, die Erfahrungsberichte über Plugins und Funktionsumsetzungen enthalten.
Vielleicht kennst Du diese Plugins ja schon, aber außer bei Pingdom Tools prüfe ich meine Seiten auch immer mal wieder mit Pagespeed und YSlow. Zusammen mit Firebug liefern diese Addons unheimlich viele Informationen über die Performance einer Webseite.
Und auch bei diesem Blog hier besteht immer noch Optimierungsbedarf. Manchmal sage ich mir aber auch “Mut zur Lücke.” :-)
Gruß Sylvi
Ja, ich hab dann auch festgestellt, dass der größte Brocken (ein Bild) sich trotz der großen Größe nicht weiter reduzieren lässt, weil’s halt ein PNG sein muss (wegen der Transparenz). Tja, Pech.
Und Mut zur Lücke interpretiere ich mal so: Immer gut, die Performance zu überprüfen, aber man muss auch nicht sklavisch überall das letzte rauspressen. :-)
Ich hätte es besser nicht ausdrücken können. :-D
Bezüglich des Bildes hätte ich eine Frage an Dich. Handelt es sich um das Foto auf der verlinkten Webseite? Falls ja, warum muss es ein png-Bild sein? Eine Pflicht zur Transparenz leuchtet mir da im Moment nicht ein. Daher meine ich, könntest Du dafür auch jpeg verwenden.
Die ursprüngliche Größe dieses Bildes beträgt 252 kb. Mit Riot und PNGout Xtrem optimiert sind es schon einmal nur noch 237 kb.
Aber jetzt kommts: als jpg auf 70 % reduziert sind es nur noch 18,2 kb! Ich habe es vergrößert von Nahem angeschaut und kann keine Qualitätseinbußen erkennen.
Ja, genau um das Bild geht es. Ich seh nicht, wie das vernünftig ohne Transparenz gehen soll, denn das Bild liegt ja über der Seite und der Schatten bei den Füßen (der eh noch ne Korrektur braucht), geht ja z.B. sowohl über den Hintergrund als auch über einen Teil der weißen Kästchen (die bei kurzen Tweets übrigens auch mal einzeilig sein können).
Aber Riot sollte ich mir mal anschauen. Danke für den Tipp!
Ah jetzt verstehe ich. Ich hatte den Link bei Deinem vorletzten Kommentar (Nr. 14) angeklickt. Und auf dieser Seite ist ein viereckiges Profilbild von Dir enthalten. Daher mein Vorschlag dieses als jpg zu verwenden.
Bei dem Ganzkörperfoto hast Du natürlich recht. Aber ich habe ein wenig herumprobiert. ;-)
Das Originalbild hat eine Größe von 567 kb. Mit Riot und OptiPNG erreiche ich schon mal eine Dateigröße von 536 kb, Riot und PNGout Xtrem 526 kb und jage ich es durch Smush.it dann sind es 523 kb.
Qualitätsunterschiede kann ich nicht erkennen.
Du bist ja hartnäckig, vielen Dank! Viel ist es nicht, aber kann ja nicht schaden. :-)
Ja echt schlimm manchmal mit mir. Aber das wird Dich jetzt umhauen und ich ärgere mich schon fast ein wenig, dass mir dieses Online-Tool nicht eher eingefallen ist. (Habe die Seite sogar gespeichert)
Wolfgang hat heute einen Beitrag über TinyPNG veröffentlicht. Das schafft eine Reduzierung auf 148 kb!