AngularJS, schlechte Performance bei Bildern

[TheRepatriate]

Hallo zusammen,

ich habe gestern mal eine kleine App mit Spring Boot + AngularJS geschrieben und diese bei Cloud Foundry (PaaS Anbieter) hochgeladen. Das hat soweit auch recht problemlos funktioniert. Bei der App handelt es sich um einen kleinen Drag and Drop Müsli-Konfigurator (Prototyp) http://konfigurator.cfapps.io/.
Dabei ist mir aufgefallen, dass die Bilder relativ langsam laden, obwohl diese nur zwischen 20kb und 50kb groß sind. Anfangs habe ich diese noch in einem größeren Format hochgeladen, aber da war es wirklich extrem zäh...
In AngularJS binde ich die Bilder wie folgt ein:

<img ng-src="assets/img/{{ingredient.picture}}" alt="">

Nun ist meine Frage, ob jemand vielleicht eine Ahnung hat, warum das Laden der Bilder so langsam ist. Könnte es daran liegen das die Cloud-Server in den USA stehe? habe die App auch mal hier http://www.anynines.com/ deployt (sollen wohl Server in Deutschland sein), das Ergebnis war aber ähnlich.
Oder gibt es vielleicht einen Trick den ich nicht kenne, sowas in Richtung Image Preloading?

LG

 

[Tumbleweed]

Ich glaube nicht, dass Angular hier bremst. Die Bilder werden generell (also bei direktem Aufruf per URL) lahm geladen. Bei mir zwischen 400 und über 2000 ms.

Meinem bescheidenen Frontendwissen zufolge setzt man bei img-Tags übrigens Größen, um das Herumspringen beim Seitenaufbau zu vermeiden.

Ansonsten gibt es für Produktivdeployments dann natürlich noch einiges zu optimieren. Dass URLs von JS erzeugt werden ist natürlich denkbar ungünstig, weil erst der DOM tree gebaut werden muss, dann die lahme JS-Kiste angeworfen wird und DANN das Laden der Bilder beginnen kann. Die Bilder kommen bei dir von der gleichen Domain, wie das HTML. Dadurch kann der Browser da nicht schön parallel laden.

Den ganzen CSS+JS-Batzen kannst du noch komprimieren und deine Bilder in ein Sprite packen, damit nur eine Datei geladen werden muss. Spart viel overhead.

Zu guter Letzt kann man statische Ressourcen dann noch per CDN ausliefern.

 

[Daaron]

Meinem bescheidenen Frontendwissen zufolge setzt man bei img-Tags übrigens Größen, um das Herumspringen beim Seitenaufbau zu vermeiden.

Korrekt. Ein <img>-Tag sollte immer width & height enthalten, selbst wenn man diese Werte danach per CSS noch überschreibt. Das ist dem gesamten Rendering-Speed der Seite sehr zuträglich.

Die Bilder kommen bei dir von der gleichen Domain, wie das HTML. Dadurch kann der Browser da nicht schön parallel laden.

SSL-Zertifikat besorgen & Webserver verwenden, der SPDY (z.B. nginx oder Apache mit mod_spdy) oder HTTP/2.0 beherrscht. Problem gelöst.
Alternativ: Cloudflare davor schalten. Das kann SPDY.

Zu guter Letzt kann man statische Ressourcen dann noch per CDN ausliefern.

Auch wenn CDNs nützlich sind, oftmals reicht schon eine cookielose Domain, um viel Speed zu gewinnen. Während alle dynamischen Inhalte von domain.tld geliefert werden, wo an jedem Request auch die benötigten Cookies (z.B. Session) kleben, kann man statische Inhalte über static.domain.tld ausliefern, bei dann keine Cookies im Request hängen.

 

[TheRepatriate]

Okay vielen Dank euch schonmal!