Accélérer un site riche en images

Soutien
1

Après avoir vu tous les avertissements concernant l’utilisation de Cloudflare et des sites à forte intensité d’images, j’ai décidé de relever ce défi pour un petit projet personnel sur lequel je travaille. Bien que j’aie été globalement satisfait avec Cloudflare, j’ai du mal à comprendre pourquoi mes images de thème ne se chargent pas avant la fin de l’exécution du JavaScript (cela semble ne pas être un problème lié au CDN).

Existe-t-il un moyen de faire en sorte que les images se chargent plus tôt (simultanément aux fichiers JS/CSS, ou simplement pendant l’exécution du JS) ou est-ce impossible ? S’agit-il d’une priorisation nécessaire ?

Voici les résultats de webpagetest.org. Mon attention se porte sur le grand écart entre ~2,3 s, moment où le dernier script JS termine de se charger, et ~3,4 s, moment où les images commencent leur téléchargement.

image
image1098×1514 328 KB

Disposition du thème :

image
image1859×1488 466 KB

Configuration
Lien : https://investorcommunity.org
Thème : Graceful
Serveur : Droplet DO (sans mise en cache supplémentaire ni S3)
CDN : Cloudflare (version gratuite, avec “Rocket Loader” désactivé pour éviter les interférences avec le JS). À noter, la désactivation de Cloudflare ne semble pas affecter ce problème en particulier.

Je vous remercie par avance pour toute idée que vous pourriez avoir..

2

Cet écart correspond à la période d’exécution du JavaScript, au cours de laquelle nous terminons le téléchargement de l’application Discourse EmberJS et la lançons. Plusieurs personnes travaillent à la modernisation de l’application EmberJS et nous commencerons à récolter les fruits de ce travail cette année.

Cependant, comme il s’agit d’une application JavaScript, il y aura toujours une certaine exécution de JavaScript en cours. Je ne m’inquiéterais donc pas trop de cela si vous êtes déjà décidé à utiliser Discourse pour votre communauté.

3

C’est logique… merci pour l’explication.

Y a-t-il un moyen de lancer les transferts d’images du thème en parallèle de l’initialisation de ce script, afin que les images soient préchargées et s’affichent dès que le JS est terminé ? Ou le script JS est-il une prérequis strict pour savoir quelles images récupérer dès le départ ?

J’ai hâte d’en savoir plus sur EmberJS - je suis impatient de voir les grandes améliorations que vous continuez à publier !