Performance bei langsamer Internetverbindung verbessern
Closed this issue · 9 comments
Aktuell ist cards42 auch bei guter Internetverbindung sehr ressourcenintensiv. Hat man aber nicht gerade LTE oder schnelles DSL zur Hand, lädt die Seite kaum noch.
Ich denke, wir sollten ein wenig Zeit investieren und...
-> ... die Bilder effizienter laden / cachen
-> ... JS und CSS verzögert laden
Wie wäre es mit Lazy Loading für die Bilder? Es kommen ja noch ein paar dazu. Das hier sieht interessant aus: https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/#lazy-loading-using-the-intersection-observer-api
Klingt gut, ich werf einen Blick drauf und teste das mal.
Chrome 76 kann mittlerweile natives Lazy Loading. Um einen Polyfill würde ich mich nicht kümmern, das kann man sicher aussitzen, bis es auch in anderen Browsern verfügbar ist.
https://scotch.io/bar-talk/native-lazy-loading-launched-on-chrome-76
Sieht allgemein nicht soooo schlecht aus: https://developers.google.com/speed/pagespeed/insights/?url=www.cards42.org
@feststelltaste Hast du mit voller Geschwindigkeit getestet?
@youngbrioche Coole Sache 👍 finde da nur suboptimal, dass es ein Alleingang von Chrome ist und nicht absehbar, ob / wann die anderen Browser das können. Da mein Ausgangsproblem mit den Bildern v.a. mobile Geräte mit langsamer Verbindung betrifft, wäre eine Lösung für Chrome und Safari von Vorteil.
Mein PR #17 dürfte das auch noch verbessern.
Hab das Lazy-Loading jetzt lokal mit lozad (https://www.npmjs.com/package/lozad) eingebaut und bei einer simulierten EDGE-Verbindung wesentlich bessere Performance bekommen. PR kommt gleich.
Wir sollten aber auf jeden Fall das native Lazy Loading nutzen, sobald es das auf mehreren Browsern gibt :)
Caching bringt halt auch immens viel, das habt ihr aber sicher schon an, oder?
Ich glaube, es reicht vorerst mit der Performance. Vielen Dank euch allen!