perun.net – WordPress & Webwork



In den Bildern liegt eines der größten Potentiale bei der Optimierung der Frontend-Performance

Von am 25. 02. 2013 um 19:31

Die Optimierung von Bilder birgt ein hohes Potential und das tolle ist, hier können auch Nutzer mit wenig Erfahrung viel erreichen.

Performance, Icon von www.webiconset.com 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:

  1. Bilder werden nicht komprimiert. Man kann sogar mit kostenlosen Tools, zum Beispiel IrfanView, Bilder in der Dateigröße erheblich verkleinern ohne erkennbare Qualitätsverluste.
  2. 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.
  3. WordPress kann beim hochladen Vorschaubilder in verschiedenen Größen erstellen. Einfach mal unter EinstellungenMedien 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

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

 — 


7 Kommentare »»

  1. 1.Stefan David

    Kommentar vom 25.02.2013 um 20:55

    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.

  2. 2. – Tobias

    Kommentar vom 26.02.2013 um 16:55

    Was machst du hinsichtlich der massenhaft eingebunden Javascripte? Habe dort noch nicht das gelbe vom Ei gefunden.

  3. 3.Josef

    Kommentar vom 26.02.2013 um 17:46

    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.

  4. 4.Torsten

    Kommentar vom 27.02.2013 um 08:59

    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!

  5. 5.Vladimir

    Kommentar vom 28.02.2013 um 02:18

    @Tobias,

    bei Javascripten helfen u.a. die Punkte 4 und 5 im folgenden Artikel.

  6. 6. – BradPitch

    Kommentar vom 03.03.2013 um 01:16

    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?

  7. 7.Stefan David

    Kommentar vom 07.03.2013 um 20:59

    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.

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.