Page Speed verbessern aber wie ?

Hallo zusammen,
Mich beschäftigt das Thema ebenfalls und ich habe eine Frage dazu. Laut GTmetrix ist die Ladegeschwindigkeit meines shops verbesserungswürdig:
https://gtmetrix.com/reports/www.sky-shoppen.de/J6QfYRiU/
Bei pagespeed insights ist das ergebnis übrigens noch schlechter, aber die empfehlungen zur verbesserung sind bei beiden seiten ungefähr gleich. Angegeben wird, die "DOM size" ist viel zu groß, nur kann ich damit nichts anfangen, was ist die DOM -Grösse ? und wie kann man sie reduzieren? Es gibt noch mehr Baustellen,die die Ladegeschwindigkeit reduzieren, aber die DOM - Grösse scheint das größte Problem zu sein und da möchte ich erstmal anfangen. Scheinbar sind das irgendwelche Elemente?

 

Das DOM kannst du grob gleichsetzen mit dem HTML der Seite. In HTML hast du Blöcke, in denen HTML Blöcke sind, in denen HTML Blöcke sind. Alles HTML steht im Body der Seite. Im Body gibts vielleicht nen Block für eine linke Spalte falls die aktiv ist, und einen Block für die Inhaltsspalte rechts. In der linken Spalte gibts vielleicht einen Block für ein Kategoriemenü. In dem Block für Kategoriemenü gibts dann Blöcke für die gelisteten Kategorien. Kurzum: wir reden über ineinander verschachtelte Inhaltsblöcke. Wenn man diese baumartige Struktur von Objekten im Dokument von oben ansieht, redet man über Document Object Model, kurz DOM.

Wenn dein DOM kompakter werden soll, musst du Sachen (Inhalte) aus den Seiten werfen. Es ist recht normal für die grobe Masse von Webshopseiten im Netz relativ grosse DOMs mit vielen Knoten (HTML Blöcken) zu haben, meistens gibts da allein schon viele, tiefe Navigationselemente. GTMetrix nimmt da keine besondere Rücksicht darauf ob eine Webseite ein Shop ist oder nicht, das Tool richtet sich allgemein aus. Die meisten Wordpress Blogs haben da dann mangels Inhalten viel weniger Tiefe und "bestehen" sowas leichter. Haste aber 1000 Artikel in 100 Kategorien, und ne Navi da überall hin in der Seite, wirds schon schwerer das klein zu halten.

Mach dabei nur eins nicht: Wenn du jetzt anfängst deine Navi zu beschneiden, Trustelemente aus deinem Shop zu killen, dann würde das die Wertung hochziehen, aber nicht unbedingt die Güte deiner Seite. Du musst dabehalten was du für Verkäufe brauchst. Da muss man normal einen Kompromiss aus allen Interessen gehen: Technik, Kundenerfahrung, SEO, Geschwindigkeit,...

 

Oje, das wird ne schwierige Nummer. Eigentlich wird der Inhalt ja eher noch mehr, da der Shop noch mehr Artikel bekommt, und ich Seiten wie z.b. Callback-Service ungern herausnehmen würde, da die für Kunden meiner Meinung nach wichtig sein könnten. Da sehe ich kaum Potential zur Verbesserung.
Es wird auch noch angezeigt, "Use a CDN" , was hat es damit genau auf sich?

 

Das kann auch ein valides Ergebnis einer Optimierungsprüfung sein. Wenn man jemanden bei sich nach Verbesserungspotenzial schauen lässt und der herausfindet, dass ein Auto mit 5 Liter/100km Kraftstoffverbrauch finanziell günstiger wäre als das was man jetzt fährt, man aber entweder einen Lieferwagen fahren muss um seinen Job zu machen oder einen Ferrari als das angemessene Werkzeug für sich selbst sieht, dann hat oder Optimierer zwar immernoch recht, man selbst aber auch.

Ein Content Delivery Network ist dafür da statische Seiteninhalte von externer Quelle an den Adressaten zu liefern. Ein Beispiel wäre deine Artikelbilder würden nicht aus deinem Shop geladen, sondern von einem dritten Ort, ganz woanders. Dafür mietet man sich dann in so einem CDN ein und lädt seine Inhalte dort hoch oder lässt sie bei sich herunterladen, danach verlinkt man den Ort da. Der Punkt dabei ist: Die meisten CDNs haben globale Spiegel. Ein Kunde aus den USA, der deinen Shop nutzt, wird die Bilder dann wahrscheinlichst von einem Server in den USA laden, ein Kunde in Asien von einem Server in Asien. Das bringt also Geschwindigkeit für weit entfernte Nutzer. Der zweite Punkt ist: Wennn der Shopserver die Bilder nicht selber liefern muss, hat er weniger Arbeit mit jedem einzelnem Nutzer, und kann darum mehr Besucher gleichzeitig bedienen oder die vorhandenen Besucher vielleicht auch schneller.

In kleineren Shops und kleineren Webseiten ist das meistens kein Problemherd, in grossen und stärker vor Last zu schützenden Szenarien denkt man über sowas nach, um Lastspitzen und Angriffen Puffer entgegenzusetzen.

 

Ok danke für die Info . Da meine Kunden nicht aus Asien oder amerika kommen, ist das Thema für mich uninteressant.
Bleibt aber am ende die Frage offen, wie bekomme ich die Ladegeschwindigkeit verbessert?
Ich hatte auch etwas von CSS gelesen und werde mich da mal schlau machen.
Vielleicht hat ja jemand auch Tips zum CSS ?

 

So, nochmal ein Update. Ich habe den Shop selbst auf dem Handy getestet und eine Ladezeit von ca. 3s gehabt, vielleicht auch etwas schneller. Finde ich jetzt nicht soo schlecht, alles wird gut angezeigt, bis auf die Bilder der Startseite, die sind etwas klein geraten,die Produkttexte wirken dagegen riesig. Die Seitenladezeit aber ist meiner Meinung nach ok, da würde vermutlich kein Kunde abspringen, weil es zu lange dauert ist zumindest mein Eindruck.
Das Tool gtmetrix sagt etwas anderes, ebenso pagespeed von google, danach gäbe es viel Verbesserungsbedarf.
Man sollte sich also nicht immer 100% darauf verlassen, was tools einem sagen , kein tool ist zu 100% genau und unfehlbar.
Die Seitenladezeiten schwanken auch sehr bei jedem neuen aufruf, ich hatte vorher den Cache im Browser geleert, was anscheinend viel ausmacht, die Seite wird dann schneller angezeigt. Das wirkt sich natürlich auch bei den tools aus, und so
bekommt man nie ein 100% genaues ergebnis.
Deshalb, testet am besten die Ladezeit selbst auf dem Smartphone und beurteilt sie, das ist denke ich immer noch am zuverlässigsten. Am Ende zählt, wie lange der Shopbesucher beim aufrufen der Seiten warten muß, wenn das nach eigenem eindruck gut ist (oder auch von Feedbacks anderer), dann lasse ich die Wertung der tools links liegen.
Diese Erfahrung habe ich übrigens auch mit SEO Tools gemacht, ich habe mehrere ausprobiert, und jedes sagt etwas anderes. Die Zahlen dort stimmen fast immer nur ungefähr, als richtwert. Nur kann man dies leider nicht selbst prüfen wie bei der Seitenladezeit.

 

CSS steht auch immer bei den Optimierungstipps. Üblicherweise wird moniert, dasS wir CSS laden, das nicht benötigt würde, oder dass das CSS (innerhalbe der üblichen Skalen) recht gross sein. Das ist nicht per se falsch, aber auch nur die Hälfte einer grossen Betrachtung.

Wir machen folgendes: Wir nehmen alle CSS Schnippsel, und packen die bei der Cacheerzeugung in eine grosse statische CSS Datei. Statisch bedeutet einfach das liegt da wie eine fertige Textdatei im Shop, der Webserver muss bei Anforderung des CSS nicht mehr rechnen sondern einfach die CSS Datei rausgeben.
Wir haben in dieser einen CSS Datei auch immer das CSS für alle Seiten auf einmal drin, also nicht nur zum Beispiel für die Startseite. Generell gibt es quasi einen allgemeinen Abschnitt darin, der auf jeder Seite wiederkehrende Elemente styled, dann je einige Spezialregeln für Startseiten, Artikelseiten und so weiter. Das bedeutet natürlich, dass wenn man die Startseite lädt, man auch das CSS für Artikelseiten mitholt. Das ist im ersten Moment nicht optimal, für die Startseite allein könnte es ja kleiner sein, also monieren das Tools. Die Tools sehen aber nicht, das beim Aufruf einer beliebigen zweiten Seite gar kein CSS mehr geholt werden muss, anstatt dann die nächsten Bröckchen einzusammeln. Ab der zweiten Seite und für jede folgende, die ein Nutzer ansurfed, ist unser Modell also schneller, dafür ist es für die erste Seite etwas lahmer als das, was übliche und zu einfache Theoriebenchmarks haben wollen.

Die üblichen schnodderigen Benchmarks sehen nur den allerersten kurzen Moment und die erste Seite, und beurteilen Folgeseiten schlicht falsch, weil sie immer von 0 denken. Sie rechnen immer damit, das nichts da wäre. Ein Nutzer hat keine lauter ersten Seiten.

Jetzt muss man noch ansehen, wieviel langsamer unser Ansatz wohl für eine erste Seite ist, um zu sehen was da theoretisch ginge, wenn wir alles auf den Kopf stellen würden, dann hat man den Rest des Bilds:

Eine Standard CSS Datei mit allem hat bei uns oft 600-700 Kilobyte Daten. Auf dem Weg zum Nutzer wird üblicherweise vom Webserver zum Browser gzip oder Deflate Stromkompression benutzt, damit ist die echt Datenmenge auf der Strecke kleiner. Der 600-700 Kilobyte Klotz wiegt dann noch normal bei etwa 75 Kilobyte herum. Eine mässig schnelle DSL 1000 Leitung kann 125 Kilobyte pro Sekunde transportieren, das heisst unser unoptimaler Klotz würde dort 0,6 Sekunden Transferzeit für die erste Seite beanspruchen. Dazu kommen 0,1 Sekunden für die Anforderung und Latenz bis zur Antwort. Nehmen wir jetzt an wir bleiben bei DSL 1000 und schaffen das allgemeine CSS und das für die Startseite ohne das für Artikelseiten usw. auszuliefern, dann kämen wir geschätzt statt bei 600-700 KB Größe bei 400 Kilobyte raus. Davon würden auf der Leitung etwa 50 Kilobyte überbleiben, weil die Kompression bei kleineren Dateien etwas weniger effizient arbeitet (man braucht wiederholende Muster im Kompressionsgut für Effizienz, und die gibts weil kürzer da weniger). Die Ladezeit für eine solche CSS Datei geht auf 0,4 Sekunden für Daten + 0,1 Sekunden Overhead = 0,5 Sekunden gesamt zurück. Vorher hatten wir 0,7 Sekunden, jetzt haben wir 0,5 Sekunden, also wäre die erste Seite bei benannt schlechten Leitungsbedingungen 0,2 Sekunden schneller da. Startseite sind übrigens im Mittel inzwischen oft 2,5-3 Megabyte gross. 2,5 Megabyte durch 125 Kilobyte Sekunde (Wieder DSL 1000) dauern 20 Sekunden. Wir reden also am Ende über 20,2 Sekunden statt 20 für die erste Seite.

Ab der zweiten Seite die ein Nutzer im Shop aufruft, sind wir mit unserem Ansatz grob bei 19,5 Sekunden statt gleichbleibend 20 Sekunden für die "optimierte, schnellere" Fassung. Da müssen wir gar kein CSS mehr holen, wir haben alles da. Die optimierte Variante mit "lade nur was du brauchst" muss neue Sachen nachholen, das dauert dann wieder.

Bei schnellen Leitungen findest du das ganze überhaupt nicht wieder. Da ist alles zu schnell um das überhaupt gemessen zu kriegen.

Eine letzte Ausnahme, die noch Zeiteinfluss im Modell nähme, wären sehr CPU schwache Geräte. Dort wird der Browser einfach aufgrund der CSS Menge, die immer durchgesehen werden muss, Seiten auch mal 0,1-0,2 Sekunden lahmer rendern als wenn man ihm gleich weniger CSS gibt. Aber diese Leute mit sowas sind normal auch relativen Kummer gewöhnt, und wir würden sagen das Argument ist nicht stark genug um dafür die vielen anders handhaben zu wollen.

 

Das Problem was ich sehe das die Geschwindigkeit für uns Nutzer bzw. für den Kunden OKAY ist, ABER Google anhand der werte die Website bewertet , und da ist eine langsame Seite eben weit hinten im Ranking, unser Problem ist das wir ziemlich weit unten auf der 1. Seite bei der Google suche erscheinen , selbst wenn ich speziell nach nur uns in unserer Stadt suche , kommen große Internet Händler vor uns. Deren Seite sind natürlich um weiten schneller. Ich weiß es hängt auch am Werbe Budget bei Google. Das könnte ich aber erstmal ausschließen.

 

Nur zur info: (Link nur für registrierte Nutzer sichtbar.)

 

Moinsen,

ich würde das Thema ganz gerne auch nochmal aufgreifen wollen, da ich gerade an dem selben Thema arbeite.
Ich habe mich schon ganz gut belesen, was dieses Thema Ladezeit betrifft.

Ich habe auch das Modul Werbe-Markt installiert. Meine Seiten "ploppen" dementsprechend sehr schnell auf, wenn man sie öffnet. Aber irgendetwas scheint da noch im Hintergrund alles auszubremsen. Ich habe ein paar Fragen und hoffe hier kann mir jemand weiterhelfen, der etwas mehr Ahnung hat. :-(


Ist es nun die linke oder die rechte Zeit unten in dem Bild worauf es ankommt?
Und wieso habe ich da diese Schildkröte, was läd da so lange?



Warum ist da überall dieses "blocking"? Ich habe andere Gambio-Shops auch mal überprüft, dort ist es nicht. Wo ist also bei meinem der Haken? Bzw wo könnte er sein?



Die schlechte Performance spricht für sich, nur wo ist der Fehler?

Ich habe Spaghetticode entfernt, zumindest auf den Kategorieseiten und der Startseite
Ich habe die Bilder optimiert, auch werden die Thumbnails geladen für Produkte in Swipern und Kategorien
Ich habe das Modul für die Ladezeiten aktiviert
Ich habe ShopVote Script deaktiviert
etc
pp

Wo ist jetzt das Problem?
Wäre um Hilfe und Rat sehr dankbar.

 

Also bei mir läuft Dein Shop blitzschnell. Bei mir hat gtmetrix gerade mit "D" bewertet, auch eine Produktseite, über die Aussagekraft von gtmetrix und anderen Tests wurde ja schon viel geschrieben, u.a. von Wilken. Soweit ich es mitbekommen habe, bremsen aktuell die Slider von Gambio ganz ordentlich, und die Startseite ist packevoll damit, auch die Produktseiten haben slider. Für googles erst noch kommende Bewertung ist das Testergebnis vielleicht schlecht, für die Kunden würde ich aber sagen, ist der shop vorbildich schnell. Wichtig für den Kunden ist ja die Ladezeit des sichtbaren Bereichs.

 

Danke für deine Nachricht. Dein Shop läuft ja aber nun auch nichr gerade langsam ;-)
Ich habe das gerade nochmal getestet. Es scheint in der Tat so zu sein, dass Seiten mit Slidern länger laden. Wahrscheinlich kommt es auch noch mit drauf an, wieviele Produkte in dem Slider drin sind. Meine Kategorieseiten haben keine Slider und laden wesentlich schneller bzw bekommen bessere Bewertungen. Das ist gut, weil die Kunden aufgrund meiner Artikel wohl eh eher die Kategorieseiten bei Google finden werden, anstelle eines bestimmten Produkts.

Aber weißt du, was es mit diesem braunen Balken (nennt sich blocking) in der Waterfall-Ansicht auf sich hat? Bei dir ist der fast gar nicht vorhanden, bei den Seiten die ich getestet habe. Bei mir ist das schon ziemlich extrem. Siehe auch oben, in dem 2ten Bild

 

Kann es sein, dass diese Bilder im Slider aber gerade nicht sichtbar sind?

 

Also ich habe auch das Modul Ladezeitoptimierung von Dominik Späte, damit hat gtmetrix.com z.B. meistens ein B oder auch mal C bewertet, eine deutliche Verbesserung. Aber die letzten Tage war es wegen eines kleinen Modulfehlers (Mollie) auch ein E-F. Die "braunen" Balken sind nach meinem Dafürhalten die Zeit vom Beginn der Abfrage bis zu Start des Datenflussses, wobei ja sichtbar ist, dass viele Abfragen gleichzeitig parallel laufen. Die Anzahl der Artikel, Bilder usw. pro Seite ist da sicher auch ein Faktor, den man viellleicht verbessern kann. Es ist halt immer ein Abwägen zwischen vielen Informationen für google und Kunden und der Schnelligkeit. Was nützt ein Turbo-Shop, der auf dem Handy im Dschungel schnell lädt, aber bei google nicht gefunden wird, weil nur wenige relevante Informationen auf der Seite geliefert werden. Die Core Web Vitals werden sicher wie von Google angekündigt eine größere Rolle spielen, Suchwörter, Alt-tags usw.usw. aber auch weiterhin.
Ich würde laut screenshot die Bilder bzw. die zugehörigen Einstellungen nochmal überarbeiten, da ist noch Luft nach oben. Die YouTube-Videos von Dominik (werbe-markt.de) waren mir da auc eine große Hilfe.

 

So schlecht läuft dein Shop doch gar nicht, Du teilst Dir deinen Server / Webspace nur mit vielen vielen anderen...

Ich habe mir auch einen Managend Server zugelegt nur umgezogen sind wir noch nicht, das mach ich erst im Mai
(alles neu macht der Mai)

 

Hallo Barbara, ich glaube es gab da eine Verwechslung. Ich meinte die Swiper, z.B. beim Cross-Selling. Slider habe ich nur 2 Stück auf der Startseite, sonst nirgends.

 

Du meinst, statt so wie jetzt 24 Artikel pro Seite nur noch z.B. 16 Artikel pro Seite anzeigen lassen?

Das habe ich alles optimiert.

Die Originalen Bilder sind alle schon 800 x 800 px bei 100 dpi klein. Diese sind für die Lupe.
Die Artikelthumbnails sind nur 170 x 170 px.
Die Artikelbilder an sich 450 x 450 px.
Die PopUp-Bilder 600 x 600 px.
Ist das nicht schon gut eingestellt? Ich schaue mir aber auch die Videos von Dominik nochmal an.

 

Ja, das meinte ich auch.
Es sind doch Artikelbilder, die da blockiert werden, richtig?

Die px sind weniger wichtig, die KB wären da interessanter.

 

Ja, genau. Die Artikelbilder werden blockiert. Hab es gerade nochmal überprüft. Die PopUp Bilder werden ohne zu blocken geladen, die Gallerybilder werden blockiert und die Produktbilder auch.

Ich weiß auch gar nicht, wie die Größen, z.B. der Popup-Bilder zustande kommt. Das erste z.B 235,8 KB. Auf meinem Rechner hat das selbe Bild nur 85 KB. Weiß mir gerade echt nicht zu helfen