Requests und Datentransfer verringern

Ich habe ein ähnliches Problem und obwohl ich die Wordpress Speed Plugins WP Super Cache und WP Minify gut einsetze und eine geringe Zahl an Requests habe - ist die Datentransfer Rate hoch. Die Zahl der Requests kann in der Regel durch Verringern der Zahl der Bilder auf der Startseite sowie der sparsame Umgang mit Wordpress Plugins verringert werden. Mich würde interessieren - von welchen Faktoren die Datentransferrate konkret abhängt? Wie kann es sein, dass ich bei allen Daten gut dastehe - und bei der Datentransferrate so schlecht bin. Mit welchen Plugins habt ihr gute Erfahrungen gemacht.

Mein Blog

trainyabrain-blog.com

Hallo trainyabrain,

So wie es aussieht, hast du 2 große Bilder auf der Startseite drinnen. Damit knackst du die 200kb Marke. Für Mobile Geräte sind so Dicke Bilder nicht sofort notwendig.

Sparen kannst du, wenigstens semi-sparen mit einem Lacy-Load-Pattern. Klingt kompliziert ist aber recht easy.

Der Trick ist, die eigentlichen Bilder erst zu laden, wenn der User diese in seinen Blickwinkel bekommt.

Siehe hier, der mechanismus ist recht einfach(man kann da eine Datei draus machen)
developer.yahoo.com/yui/imageloader

Für WP gibt es auch so ein Plugin, dies benötigt allerdings JQuery.

Hilft dir das weiter?

Hallo trainyabrain,

in puncto WordPress-Plugins kenne ich mich leider nicht aus, aber die ganzen auch von PageSpeed als nicht optimiert bemängelten PNGs empfehle ich mit OptiPNG (http://optipng.sourceforge.net/) zu optimieren. Entsprechende Zugriffsrechte vorausgesetzt ist das einmalig auf dem Server zu installieren, ein nächtlicher oder wöchentlicher CronJob einzurichten und das Problem nicht optimierter PNGs ist ein für alle Mal vom Tisch.

Ich würde aber gleich die Grafiken für die Blog-Kategorien und die Icons unter "Folge uns auf" in je einer Grafik zusammenfassen und als CSS-Sprite einbinden. Ein entsprechendes Tool ist

de.spritegen.website-performance.org

Hallo Skatze,

Du könntest Dir überlegen, die Kategoriebilder wegzulassen und stattdessen <h>-Überschriften einzusetzen. Das würde Ladezeit und Requestzahl verringern und gleichzeitig den Suchmaschinen noch themenbezogene Überschriften liefern. Wer sich mit Deinem Thema beschäftigt, wird kaum die Icons als Blickfang brauchen.

Gruß
winelady

Vielen Dank Leute für die wirklich hilfreichen Antworten. Ich werde die verschiedenen Lösungen alle mal überprüfen. Für den Moment habe ich erstmal die Bilder mit einem Imageoptimizer kleiner gemacht und mich entschieden - auf der Startseite nur die letzten Artikel zu zeigen. Diese Entscheidung war nicht nur gut für die Datentransferrate, welche sich nun knapp unter 180 kB/s bewegt. Sondern sie war gut für den Pagespeed und die Requests die noch weiter verbessert werden konnten. Vielen vielen Dank - ich habe nun vor alle meine Blogs auf meine Bilder zu überprüfen - von daher werden die Lösungen bei Artikel mit vielen Bildern wirklich interessant sein. Falls ich Fragen habe - oder eine Option besonders gut für mich funktioniert hat - werde ich es hier posten.

Nochmals vielen vielen Dank für die tollen Antworten

trainyabrain

Hallo,
bei mir hat vor allem das Einbinden von Spritegrafiken bei der Performance geholfen. Allerdings ist diese immer noch verbesserungswürdig, ich weiß aber momentan nicht mehr, wo ich noch optimieren kann.

@trainyabrain:
Du hast ja eine Super Antwortzeit vom Server (167ms). Darf ich fragen wo Du hostest ? (wer ist kasserver.com ?)

VG, Uli.

Skatze schrieb:

... und ich habe keine Ahnung wie ich das verringern könnte.

Da Du Google AdSense verwendest, hat Du da ein System, welches nicht mit Google PageSpeed conform geht.

Mit AdSense wird man niemals richtig gute Werte bei Requests und Datentransfer bekommen, aber man muss sich deswegen auch nicht verrückt machen.

Gruß Matthias

@branchenbaer

Ich hoste bei allinkl.de - ich bin mit dem Support und dem Preis zufrieden. Allerdings kann ich empfehlen nicht das preiswerteste Angebot zu wählen - es lohnt sich auf jeden Fall ein teureres Packet zu verwenden. Ja mit CSS Sprites und deren Komprimierung werde ich mich noch auseinandersetzen. Allerdings funktionieren die Plugin Lösungen bei mir nicht und so sind die Probleme meist nur durch Programmieraufwand zu lösen. Hier bin ich allerdings nicht so stark. Gibt es eine Möglichkeit CSS Sprites relativ ungefährlich zu verwenden - ohne das man gleich etwas am Server verändern muss?

Ich mache mich wegen der Daten auch immer verrückt - aber damit muss man wohl leben - wenn man Perfektionist ist

Viele Grüße und jetzt schon mal danke für die wirklich hilfreiche Diskussion hier

trainyabrain schrieb:

Gibt es eine Möglichkeit CSS Sprites relativ ungefährlich zu verwenden - ohne das man gleich etwas am Server verändern muss?

Hallo trainyabrain,

CSS-Sprites sind eigentlich ganz simpel.
Beispiel Deine Social-Buttons: Aus den vier Bildern machst Du ein Bild - (entweder alle jpg oder png).
Dann platzierst Du sie mittels CSS an die richtige Stelle.
Sollte dann etwa so aussehen (nur ein Beispiel):

[CSS]
img3{background:url(social.png) no-repeat;
margin-right:..px;margin-top:..px;height:..px;width:..px;
background-position:+/-..px +/-..px}

+ oder - je nachdem was Deine Position ist.

background-position ist die Positionierung der Bildabschnitte
[/CSS]

Gruß
hansen

@ Hansen

Ich muss nochmal kurz fragen - wenn ich mehrere Bilder mit CSS Sprites zu einem zusammenfasse - ist es dann immer noch möglich - das jedes Bild einen Extra Link hat zu einer Seite. Bei meinen Social - Buttons möchte ich das wenn man auf Facebook klickt man zu meiner Fanpage kommt - wenn man auf Google Plus klickt auf meine Google Plus Fanpage gelangt usw. Ist das mit CSS Sprites immer noch möglich? Wo bindet ihr den CSS Code ein. Direkt in die Sidebar oder den Content oder muss man hier auch etwas am Head verändern? Sorry, dass ich so dumm frage - aber bin halt kein Programmierer! Gibt es irgendwo im Netz eine gute Anleitung für CSS Sprites - die selbsterklärend ist? LG