CSS bei wordpress optimieren?

Hallo Fabian,

da liegt leider ein Menge im Argen. Dateien über wp.com ausliefern zu lassen (Jetpack) ist gar keine gute Idee. Das macht es nicht schneller, sondern langsamer: zwischen texanischen Servern und deinem Zielpublikum liegt der Atlantische Ozean und das bedeutet, dass je aufgebauter Verbindung mindestens 0,25 sec Latenzzeit hinzukommt - was in Summe zu dzt. 2-3 sec zusätzlicher Ladezeit beiträgt. Wenn möglich - verzichte auf Jetpack ganz, das kommt der WP-Render-Performance zugute (und natürlich den Ladezeiten).

Das ist aber nur ein Konzept-Nadelöhr. Das nächste ist Shared Hosting (All-Inkl) für einen Shop, wo du genau dann, wenn sich Leute zum Kauf entscheiden, serverseitig auf dynamische Abfragen angewiesen bist, also auf echte Power, damit es schnell geht. Mit Warenkorb kannst du schlecht Caching einsetzen. Dies, sowie der Checkout - all das braucht Computing Power. Du brauchst m.E. also einen eigenen Server in Deutschland, also dort, wo dein Zielpublikum sitzt (Hetzner wäre so eine Idee, ist günstig).

Aber dann geht die Optimiererei erst los. Und das geht, wenn du optimale Resultate willst, über eine Forenanfrage weit hinaus. Du musst dir da jmd. suchen, der davon Ahnung hat. Du solltest jemanden finden, der dir erklären kann, was Google mit seinem "Render blocking" meint und dieser Jemand sollte das auch beheben können. Schau dir dessen Website in den "Insights" an. Wenn sie oder er selber nicht ohne Renderblockaden laden, lass die Finger davon. Erst recht, wenn sie oder er erzählt, auf die Insights komme es nicht an, das seien nur "Punkte". Das ist ganz sicher falsch. Die Insights liefern den qualitativ besten Indikator dafür, wie performant deine Site auf einer Skala von 1 bis 100 steht, gemessen an Performance-Best-Practices, und sie geben dir eine Prioritätenliste, was die Behebung betrifft.

Es wird klarerweise was kosten, denn da gehen bei diesem Setup Stunden rein. Andererseits will ich dir jetzt nicht das Gefühl geben, dass du resignierst und es dann eben auf sich beruhen lässt, das wäre eine gaaaanz schlechte Idee, wenn du verkaufen willst.

Denn mobil, über das 3G-Netz sieht es so aus bei dir: https://www.webpagetest.org/result/171028_…6e6773c400be64/

Wenn du mit den Zahlen (voriger Link) nicht vertraut bist, dann sieh dir folgendes Lade-Video an. Dann weißt du, was Mobilnutzer mit deiner Site erleben und auch, wovon ich rede:
https://www.webpagetest.org/video/view.php…773c400be64.1.0

The best,
Frank

Der Shop hat nicht nur ein CSS Problem. Mich persönlich würde am meisten die gebrochenen SSL Verschlüsselung beschäftigen.

F-rank Du willst im Header Deiner Seite einen Slider der jQuery benötigt. Google sagt Du hast Render-Blocking-Foo-Above-The-Damn-Fold. Was tust Du?

A. Slider nicht verwenden, schließlich mache ich meine Webseiten für Google und nicht für meine Kunden.
B. jQuery und WordPress verklagen, weil die mir so einen Mist in die Seite packen.
C. Ich verwende ein anderes Tool wie z.B. Gtmetrix und Dareboost, weil Google manchmal zu Paranoia neigt.

Die Seite muss schnell sein, keine Frage. Das kann sie aber auch wenn Google meint, dass da was nicht ganz so toll ist.

Zitat von mensmaximus

F-rank Du willst im Header Deiner Seite einen Slider der jQuery benötigt. Google sagt Du hast Render-Blocking-Foo-Above-The-Damn-Fold. Was tust Du?

A. Slider nicht verwenden, schließlich mache ich meine Webseiten für Google und nicht für meine Kunden.
B. jQuery und WordPress verklagen, weil die mir so einen Mist in die Seite packen.
C. Ich verwende ein anderes Tool wie z.B. Gtmetrix und Dareboost, weil Google manchmal zu Paranoia neigt.

D. Ich verwende ein Stellvertreter-Asset, z.B. ein ge-blur-tes Inline-Mini-Image oder ein Was-auch-immer als Hintergrund und lege einen für den Besucher sinnvollen Text darüber. Das könnte dem ersten Slide nachempfunden sein. Beim ersten "mousemove" auf dem body werden jQuery und Slider per JS nachgeladen und das Image wird ausgetauscht. Vorteil: mousemove gibt es mobil nicht und Smartphones bekommen "automatisch" den Kladderadatsch nicht zu sehen, das spart Download-Volumen. UND die Insights kriegen außer Background-Asset und Text auch nichts zu futtern und können sich demzufolge auch nicht darüber beschweren - was am Ende via Score das Kundenvertrauen steigert.

Google-Paranoia: na und? Ich gebe dem Tool seine 100 und hole die Optimierungszeit bei gesparten Kundendiskussionen wieder rein :)

Zitat von F-rank

D. Ich verwende ein Stellvertreter-Asset, z.B. ein ge-blur-tes Inline-Mini-Image oder ein Was-auch-immer als Hintergrund und lege einen für den Besucher sinnvollen Text darüber. Das könnte dem ersten Slide nachempfunden sein. Beim ersten "mousemove" auf dem body werden jQuery und Slider per JS nachgeladen und das Image wird ausgetauscht. Vorteil: mousemove gibt es mobil nicht und Smartphones bekommen "automatisch" den Kladderadatsch nicht zu sehen, das spart Download-Volumen. UND die Insights kriegen außer Background-Asset und Text auch nichts zu futtern und können sich demzufolge auch nicht darüber beschweren - was am Ende via Score das Kundenvertrauen steigert.

Google-Paranoia: na und? Ich gebe dem Tool seine 100 und hole die Optimierungszeit bei gesparten Kundendiskussionen wieder rein :)

Das ist die Königslösung und wenn Du dass für jeden Kunden kostenfrei umsetzt, sage ich top!

Zitat von mensmaximus

Das ist die Königslösung und wenn Du dass für jeden Kunden kostenfrei umsetzt, sage ich top!

Speed-Optimierung ist bei mir weder kostenfrei noch für mich furchtbar aufwendig. Eigtl. ist es immer dasselbe:
Slider, iframes und sonstige emdeds versauen den Speed und blockieren das Rendern. Diese Dinger immer.

Aber du brauchst ja nur ein einmal zurechtgelegtes Snippet dafür, das du eigtl. auf so gut wie jeder Site einsetzen kannst.
Jedenfalls für die Analytics. Die lade ich standardmäßig beim ersten mousemove/touchmove. Dann ist das weg aus den Insights-
Beanstandungen (Futter für die Götter :-) ) und es funktioniert auch zuverlässig. Viel smarter und zeitsparender als die anderen
Wege, die dafür sonst noch so im Netz kursieren und irre fehleranfällig sind und aufwendig dazu.

Gottseidank habe ich kaum Slider-Kunden. Ich weiß, ist schon ein Privileg :-D

Freut mich aber, wenn du gleichfalls siehst, wie mächtig der JS-Replacement-Ansatz bzgl. der Insights ist,
oder vielmehr: bzgl. tatsächlich superschneller Seiten.

Hab's mir auch nur abgeguckt und dann für meine Zwecke adaptiert. Kannst du auch. Sieht nach mehr aus als es ist.
Viel Glück!

Hallo BLOWshop,

hast du mal Autoptimze probiert? -> https://de.wordpress.org/plugins/autoptimize/

Damit kannst du einiges an Plus Punkte bei Google gewinnen, ohne gleich eine teure Dienstleistung von den Herren da oben in Anspruch zu nehmen :-)

P.S.: Google ist kein Maßstab! Ich finde deine Seite richtig flott, bei den vielen Bildern! Daumen hoch!