optimierung | perun.net

Ich habe seit Mitte Januar im Auftrag der Kunden mehrere WordPress-Websites optimiert und da ist mir wieder aufgefallen, dass – mal abgesehen von massenhafter Einbindung von Javascripten – in den Bildern im Inhalt eines der größten Potentiale steckt, wenn es darum geht die Performance einer Website zu optimieren und das Gute an der Bilder-Optimierung ist, dass man hier bereits auf der Redakteur-Ebene ansetzen kann und das hier auch Menschen mit relativ wenig Erfahrung viel erreichen können.

Da ich zu diesem Thema bereits einen ausführlichen Artikel geschrieben habe…

Die großen Performance-Bremsen im Frontend (2)

… werde ich mich in diesem Beitrag kurz halten und nur noch ein paar ergänzende Sätze dazu schreiben. Bei der Einbindung von Bilder werden drei häufige Fehler begangen: (weiterlesen…)

Drüben in seinem Blog geht Karl-Heinz darauf ein, warum man das Meta-Widget aus der Sidebar entfernen sollte. Mit Meta sind die Angaben gemeint, die bei einer Standardinstallation unter der Überschrift Meta zu sehen sind: Links zum Feed, Kommentar-Feed, WordPress.org-Seite und Login/Logout-Link.

Für das Entfernen dieser Angaben führt er mehrere Gründe ein: es verwirrt die unerfahreneren Nutzer, wirkt unprofessionell und der dritte Grund wäre SEO. Gut, man kann mit diesen Argumenten einverstanden sein oder auch nicht. Vielfach wirkt hier die eigene Erfahrung und die Erfahrung, der Leute mit denen man zu tun hat.

Ich würde aber einen zusätzlichen Aspekt einfügen und zwar die Performance-Optimierung. Ich habe bei 6 Weblogs die Meta-Angaben entfernt. Bei 2 Installationen konnte ich keine Verbesserung erkennen, aber bei den anderen 4 Weblogs konnte ich bis zu 9 Anfragen an die Datenbank einsparen.

Wer also eh schon dabei ist seine WordPress-Website zu optimieren hat hiermit einen zusätzlichen Ansatzpunkt.

Wenn man ein Child-Theme ("Kind-Theme") erstellt, dann muss man in der CSS-Datei des Kind-Themes mit der @import-Regel auch auf die CSS-Datei des Eltern-Themes verweisen.

Aus Gründen der Performance ist die @import-Regel eine schlechte Wahl, da sie das gleichzeitige bzw. parallele Laden von anderen Dateien verhindert und somit der Browser etwas länger braucht um eine Website darzustellen. Deswegen wird empfohlen dass man auf die CSS-Dateien per link-Element referenziert.

Also das ist hier ist pöhse…

<style type="text/css">
    @import url('style.css');
</style>

… und das hier ist gut:

<link rel="stylesheet" type="text/css" href="style.css" />

Und mit folgendem Code-Beispiel, den man in die header.php des jeweiligen WordPress-Themes einträgt… (weiterlesen…)

Christian Schaefer hat einen interessanten Vortrag zum Thema Ladezeit-Optimierung von Websites online gestellt. Die Folien beinhalten viele wertvolle Informationen und hebt sich damit angenehm von vielen anderen Präsentationen.

Kollege Jens Grochtdreis, von dem ich auch den Hinweis auf den oberen Vortrag bekommen habe, hat in einem Blogartikel 24 Quellen zu HTML5 und CSS3 aufgelistet: Referenzen, Tools, Demoseiten.

Im Artikel "Schneller Überblick mit Pagespeed.de" habe ich das Tool bzw. die Website Pagespeed.de vorgestellt. Damals lieferte die Website noch recht wenige Informationen, was für einen schnellen Blick auf die Performance der Website ausreichte:

Nun haben die Entwickler nachgelegt und mittlerweile schaut es so aus:

Man bekommt nicht nur zusätzliche Werte zu sehen sondern auch erklärende Texte: was ist ein Ping? Was bedeutet die Latenz? Das ist vor allem für Einsteiger in die Materie sehr nützlich.

Somit sollte man sich diese Website auf jeden Fall in die Lesezeichensammlung legen, wenn man sich mit der Performance-Optimierung von Websites beschäftigt.

Ich kann leider nicht mehr sagen wo ich WeMonIt.de entdeckt habe ob auf Twitter, Google+ oder irgendwo in den Blog-Kommentaren. Auf jeden Fall bin ich vor ein paar Wochen darauf aufmerksam geworden, habe mich dort registriert und lasse damit dieses Weblog auf seine Erreichbarkeit prüfen.

Durch seine vielen Funktionen ist WeMonIt.de eine interessante und vor allem eine günstigere Alternative zu dem sehr bekannten Pingdom. So kann man bereits im kostenlosen Account bis zu fünf Websites im Fünf-Minuten-Rhythmus prüfen lassen und sich per E-Mail über Downzeiten informieren lassen.

Bereits ab fünf Euro im Monat kann man bis zu 10 Projekte jede Minute prüfen lassen und 20 SMS sind inklusive. Daneben gibt es noch zwei weitere Tarife wo man bis zu 50 Projekte beobachten kann.

Einige Tools, die bei der Performance-Optimierung von Websites helfen habe ich bereits aufgelistet GTmetrix, Page Speed Online, Firebug, YSlow und Pingdom. Diese Tools liefern nicht nur Messwerte, sondern geben auch Tipps, wie zum Beispiel YSlow.

Wer noch ein zusätzliches, kleines Tool zur Kontrolle benötigt, der könnte mit Pagespeed.de glücklich werden:

Momentan sind es recht wenige Infos, die das Tool liefert, aber da es sich momentan in der Beta-Phase befindet, könnte es sein, dass weitere Funktionen hinzukommen.