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:
- Bilder
werden nicht komprimiert. Man kann sogar mit kostenlosen Tools, zum Beispiel IrfanView, Bilder in der Dateigröße erheblich verkleinern ohne erkennbare Qualitätsverluste.
- Es wird häufig das falsche Format gewählt. Grob gesagt kann man folgende Regel aufstellen: für Bilder mit fotografischen Elementen empfiehlt sich .jpg und für Grafiken mit wenigen Farben .gif oder noch besser das 8-bit .png.
- WordPress kann beim hochladen Vorschaubilder in verschiedenen Größen erstellen. Einfach mal unter Einstellungen → Medien schauen. Es ist keine gute Idee, die großen Bilder in HTML zu skalieren in dem man kleinere Maße als Attributswerte angibt.
Ein weiterer Artikel zum Thema Performance-Optimierung wäre dieser hier: 5 einfache Maßnahmen um die Performance von WordPress-Websites zu verbessern.
Hinweis: und da nach solchen Artikeln auch Fragen via E-Mail ankommen: ja, wir nehmen auch kleinere Aufträge an, unter anderem die bereits oben genannte Prüfung und Optimierung von bestehenden Websites an.
Icon von www.webiconset.com
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Wenn man die sinnvollen Tipps oben und in dem verlinkten Artikel durchgeführt hat, kann man weitere Perfomancevorteile erzielen, indem man die Bilder von einer anderen Subdomain lädt. Die meisten Browser erlauben innerhalb einer Domain nur eine begrenzte Anzahl paralleler Zugriffe, die wegen der Platzierung im Quellcode oft schon für die CSS- und JS- Dateien draufgehen. Wenn man die Bilder dann von einer Subdomain lädt, kann das nochmal einen Boost in der Ladezeit geben.
Ich halte das z. B. auf CamperCo.de so. Die Bilder, zumindest die, die nicht als grafische Elemente aus dem Theme kommen, lade ich von der Subdomain media.camperco.de. Das hat neben dem Vorteil des parallelen Ladens noch einen weiteren kleinen Vorteil: Die Subdomain ist frei von Cookies und dient ausschließlich der Auslieferung der Bilder. Es findet dadurch viel weniger Kommunikation zwischen Browser und Server statt.
Um das in einer Standardinstallation von WordPress abbilden zu können, ist gar nicht viel nötig, vor allem muss man nicht in den Code eingreifen oder ein Plugin installieren: Einfach eine Subdomain einrichten, die auf das Verzeichnis “wp-content/uploads” innerhalb der WordPress-Installation als Startverzeichnis zielt. In WordPress muss dann nur noch die Subdomain (komplett inkl. “http://”) unter “Einstellungen -> Mediathek -> Kompletter Pfad zu den Dateien” eingetragen werden. Weiter ist nichts zu tun und alle sonstigen Bilderfunktionen von WordPress laufen weiter wie gewohnt, also Ablauf, einbinden in Beiträge, etc.
Was machst du hinsichtlich der massenhaft eingebunden Javascripte? Habe dort noch nicht das gelbe vom Ei gefunden.
@Tobias,
bei Javascripten helfen u.a. die Punkte 4 und 5 im folgenden Artikel.
Für Mac OS X Nutzer gibt es für die Bildkomprimierung (PNG, GIF, JPEG) das kleine aber sehr effektive Tool ImageOptim, welches ich vor kurzem in einem Artikel vorgestellt habe. Zum Teil sind, z.B. bei Screenshots, Komprimierungsraten von über 50% möglich.
Neben Irfanview, was sich sehr gut für Batch-Optimierungen über ganze Verzeichnispfade eignet, kann ich für einzelne Bilder/Grafiken JPGMini empfehlen. Hier werden JPG-Bilder ohne sichtbare Verluste komprimiert mit besseren Ergebnissen als bei Irfanview!
Wäre schön wenn es einen Tipp bzgl. auslagern der Bilder auf eine Subdomain geben würde. Bspw. mit in den wp-options geht das ja nun nicht wirklich für eine Subdomain ferner ist eine Pfadangabe in den Medien Settings “eleminiert” worden und ein Plugin möchte ich nicht dafür nutzen. Habt ihr einen Tipp?
Stimmt, das mit der Pfadangabe geht tatsächlich nicht mehr. Die Option taucht nur noch auf, wenn man vorher schon etwas eingestellt hatte, das vom Standard abwich.
Soweit ich weiß, hat sich aber in der internen Verwaltung nichts geändert, es sollte also kein Problem sein, ein Plugin zu verwenden, das nichts anderes tut, als das Eingabefeld für den Uploadpfad wieder zur Verfügung zu stellen. Einmal geändert, müsste man es doch auch wieder abstellen können. Ansonsten vielleicht mal in die Datenbank schauen. In der Tabelle wp_options gibt es den Eintrag upload_url_path. Dort einfach die Subdomain (inkl. “http://”) eintragen, sollte reichen. Ich kann das aber gerade nicht testen.