search

innoq / cards42org

The companion site to the cards42 project - The activity cards for software architects
https://cards42.org
Creative Commons Attribution Share Alike 4.0 International
24 stars 4 forks source link

Performance bei langsamer Internetverbindung verbessern #14

Closed erdlet closed 5 years ago

erdlet commented 5 years ago

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

feststelltaste commented 5 years ago

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

erdlet commented 5 years ago

Klingt gut, ich werf einen Blick drauf und teste das mal.

youngbrioche commented 5 years ago

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

feststelltaste commented 5 years ago

Sieht allgemein nicht soooo schlecht aus: https://developers.google.com/speed/pagespeed/insights/?url=www.cards42.org

grafik

erdlet commented 5 years ago

@feststelltaste Hast du mit voller Geschwindigkeit getestet?

@youngbrioche Coole Sache :+1: 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.

programming-wolf commented 5 years ago

Mein PR #17 dürfte das auch noch verbessern.

erdlet commented 5 years ago

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 :)

programming-wolf commented 5 years ago

Caching bringt halt auch immens viel, das habt ihr aber sicher schon an, oder?

feststelltaste commented 5 years ago

Ich glaube, es reicht vorerst mit der Performance. Vielen Dank euch allen!