Fragen zur Pagespeed

[rabox66]

Ein freundliches Hallo in die Runde,
ich bin gerade dabei mich in das Thema Pagespeed einzuarbeiten. Ich bin Webdesigner und meine Kunden wollen schnelle Seiten. Deshalb habe ich ein paar Fragen, vielleicht kann mir jemand helfen.

Damit die Frage und Antwort halbwegs zusammenpassen, definiere ich erst mal eine Kombination, die häufig anzutreffen ist:

Wordpress, das Theme ist Divi, die Seite hat einen kleinen Woocommerce-Shop mit ca. 100 Artikeln, jeder Artikel hat einen Produktbild, die Seite nutzt ansonsten noch 20-30 andere Bilder und es werden ein paar weitere Plugins genutzt, die aber nicht besonders ressourcenfressend sind. Die Seite liegt bei einem durchschnittlichen Hoster: All inkl. Strato, 1&1, Domainfactory etc. Es ist ein ganz simples Shared-Hostingpaket.

So ein Konstrukt ist nicht das schnellste. Nach meiner bisherigen Erfahrung hat so eine Seite beim Pagespeedtest von Google um die 20, vielleicht 25 Punkte. Die Nutzererfahrung ist mies, bis mal was zu sehen ist, vergeht viel Zeit. Ich habe in den letzten Monaten viele solcher Seiten versucht mit Leverage Browsercaching, Optimierung der Bilder (minimize), GZIP-Kompression etc. etc. und einzelnen Plugins (CSS und JS minimieren, asynchron laden, Cachingplugins...) zu beschleunigen. Bis ca. 70, 80 Punkten beim Pagespeedtest von Google geht das relativ einfach. Vielleicht kriegt man auch die Desktopvariante auf 85 und kommt in den grünen Bereich beim Score. Dann ist es aber aus.

Einzelne Plugins bringen die Seite vielleicht noch auf 91, oder 92, aber ich hatte keinen Fall dabei, bei dem die Seite dann noch korrekt ausgeliefert wurde. Oft war alles perfekt, aber eine einzige Unterseite hat nicht geladen, ein Designdetail wurde zerschossen etc. etc.

Jetzt meine Fragen:
1) Glaubt ihr, dass man mit mehr Erfahrung aber der beschrieben Technik diese Dinge so hinkriegt, dass man doch noch auf einen Spitzenwert kommt?

2) Falls ja, wieviel Zeit sollte man für so etwas einplanen? Ich schätze, dass man pro Projekt ca. 3-5 Stunden veranschlagen kann, wenn man mal eingespielt ist. Oder doch mehr?

3) Ich habe einen Freund, der bietet sehr spezialisiertes Hosting mit hoher Qualität an. Der meinte, dass ich diese Tools zum Teil vergessen soll, der Server wäre viel wichtiger. Er hat probeweise eine Seite von meinem Hoster zu sich gezogen und ein bisschen Zeit reingesteckt, (er meinte um die 2 Stunden) das Ding war deutlich schneller. Und dass noch ohne, dass Bilder komprimiert wurden oder andere Sachen, die recht leicht möglich sind. Das Potential wäre also noch höher.

Seht ihr das auch so? Ist das die bessere Variante?

Danke für Tipps.
Raphael

[arnego2]

Hast du dir mal den Source Code von Divi Templates angesehen dann weißt du warum sie langsamer sind. Eine WP Seite ist immer langsamer als eine Statische aus html5 oder dynamische wie Php. Zumindest wss ich bei meinen Seiten so ausprobiert habe.

[nerd]

Es gibt keine allgemeine formel, wie man eine seite schneller macht. Bei wordpress ist das problem haeufig, das jedes plugin ihre eigenen CSS und JS files mitbringt, welche dann extra mit auf der seite eingebunden werden, und mit 5 plugins braucht die seite dann eben bei jedem aufruf z.b. 10 dateien extra.
Am wichtigsten fuer eine schnelle seite sind eigentlich nur kurze antwortzeiten, wenige dateien und kleine dateien. Allerdings solltest du wenige und grosse dateien immer vielen und kleinen dateien vorziehen.
Liegt daran, dann es bei jedem dateitransfer 2 variablen gibt: antwortzeit, und uebertragungszeit. Antwortzeit ist die zeit zwischen anfrage des clients und empfang des ersten bytes, und uebertragungszeit ergibt sich eben aus dateigroesse und uebertragungsgeschwindigkeit. Soll heissen die antwortzeiten aller dateien addieren sich beim seitenaufruf, auch wenn dein browser meherer dateien gleichzeitig herrunterladen kann.

Wenn du z.b. 5 dateien @ 10kB hast, dann dauert die uebertragung (5x antwortzeit) + (5x10kb), wenn du es aber schaffst die selben dateien in eine grosse datei zusammenzufassen dann hast du nur noch 1x antwortzeit + 50kb. Hierbei ist der performancegewinn umso besser, je groesser die antwortzeit deines servers ist.

Bei vielen kleinen dateien ist eben haeufig das problem, dass die client mehr zeit mit warten auf die serverantwort verbringt, als die dateien herrunterzuladen. Kannst du in Firebug (F12) sehen, indem du dort ins Netzwerk tab wechselst und mit F5 die seite neu laedst.
Mit einem schnelleren server verbesserst du bei sowas eigentlich immer nur die Antwortzeit des servers bischen. Wenn du deine seite aber schon soweit optimiert hast dass du bur eine handvoll datein hast, dann bringt ein schnellerer server nichtmehr viel.

Wenn dir irgendwelche optimizer die alle JS und CSS dateien zusammenfassen die seite zerschiessen, dann liegt es eigentlich meistens daran dass sie die ladereihenfolge der CSS oder JS dateien nicht beachten. Die ist nicht ganz egal, bei CSS gewinn bei gleichen regeln immer die letzte. Also wenn in deinem zusammengefassten CSS oben z.b.

.wichtig {
color:red;
}

und weiter unten

.wichtig {
color:green;
}

steht, dann bekommen die betroffenen elemente ueberall gruenen text.
Bei JS solltest du eigentlich nur darauf achten, dass dein jQuery zuerst geladen wird, die reihenfolge der restlichen dateien ist fast immer egal.