Beschleunigung einer bildlastigen Website

Nachdem ich alle Warnungen bezüglich der Nutzung von Cloudflare und schwerer Bildseiten gesehen habe, habe ich mich entschieden, diese Herausforderung für ein kleines Privatprojekt anzunehmen, an dem ich arbeite. Obwohl ich mit Cloudflare größtenteils erfolgreich war, habe ich Schwierigkeiten herauszufinden, warum meine Theme-Bilder nicht geladen werden können, bevor die JS-Ausführung abgeschlossen ist (scheint kein CDN-Problem zu sein).

Gibt es eine Möglichkeit, Bilder früher zu laden (gleichzeitig mit JS/CSS oder einfach während der JS-Ausführung), oder ist das ein absolutes Nein? Könnte dies eine notwendige Priorisierung sein?

Nachfolgend sind meine Ergebnisse von webpagetest.org. Mein Fokus liegt auf der großen Lücke zwischen ca. 2,3 s, wenn das letzte JS-Skript fertig geladen ist, und ca. 3,4 s, wenn die Bilder ihren Download beginnen..

Theme-Layout:

Konfiguration
Link: https://investorcommunity.org
Theme: Graceful
Server: DO Droplet (kein zusätzliches Caching oder S3)
CDN: Cloudflare (kostenlose Version, mit “Rocket Loader” deaktiviert, um JS-Interferenzen zu vermeiden). Bemerkenswert ist, dass das Deaktivieren von Cloudflare dieses spezielle Problem nicht zu beeinflussen scheint.

Ich schätze jede Idee, die jemand hat..

Diese Lücke ist die Ausführungsphase von JavaScript, in der wir die Discourse EmberJS-App fertig herunterladen und starten. Mehrere Personen arbeiten daran, die EmberJS-App zu modernisieren, und wir werden dieses Jahr mit den Vorteilen dieser Arbeit beginnen.

Da es sich jedoch um eine JavaScript-Anwendung handelt, wird immer etwas JavaScript ausgeführt. Daher würde ich mir darüber keine allzu großen Sorgen machen, wenn du bereits fest entschlossen bist, Discourse für deine Community zu nutzen.

Das ergibt Sinn… danke für die Erklärung.

Gibt es eine Möglichkeit, die Übertragung der Theme-Bilder parallel zur Initialisierung dieses Skripts zu starten, damit die Bilder bereits vorge laden sind und sofort angezeigt werden, sobald das JS fertig ist? Oder ist das JS-Skript eine zwingende Voraussetzung, um überhaupt zu wissen, welche Bilder abgerufen werden müssen?

Ich freue mich sehr auf EmberJS und kann es kaum erwarten, die großartigen Verbesserungen zu sehen, die ihr kontinuierlich veröffentlicht!