Chargement initial pas ouf

[DavidBruant]

Sur mon ordi, j'ai eu du mal à charger le site (genre ça mettait plusieurs dizaines de secondes avant d'afficher le moindre truc) et je me demandais pourquoi

Constat

---

Profilage réseau sur mon ordi, sur une connection ADSL pas incroyable, mais qui fait le taf quand même

Chargement initial :

100 requêtes HTTP (dont 80 images), ~13MB
Chargement du HTML initial : <1s
DOMContentLoaded en 4,3s
load en 30s

Chargement avec cache :

DOMContentLoaded en 2,3s
load en 14,5s

---

Apparemment, ya un preloader
https://github.com/les-ethers-fertiles/association-tedua.fr/blob/0870d422009c5fae0c1758cef7bf9ff774eaae56/layouts/partials/preloader.html

association-tedua.fr/static/css/main.css

Lines 10 to 17 in c79f6d1

	.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 99999;

qui cache tout initialement, puis, sur l'évènement load est supprimé ce qui affiche la page

association-tedua.fr/static/js/main.js

Lines 2 to 4 in c79f6d1

	$(window).on('load', function () {
	$('.preloader').fadeOut(100);
	});

Problème

Un problème avec l'évènement load, c'est qu'il ne se déclenche que quand toute la page est chargée, notamment quand toutes les (80) images sont chargée. Pas sûr que ça soit la meilleure idée en terme d'expérience utilisateur\

Notamment, ça attend actuellement que les 20 images de la "Rétrospective (Saison 2020/2021)" soit chargée (même les 16 qu'on ne voit pas initialement)

Pistes de solution

1. virer le preloader qui ne sert pas à grand chose
2. enlever le préloader plus rapidement (max 5secs même si tout n'est pas chargé)
3. ptèt optimiser les images, notamment celles des retrospectives qui peuvent sûrement être fusionnées en une seule image
4. pré-traiter les images pour les rendre plus petites (j'ai vu une 6000x4000)
5. n'utiliser que des jpeg progressifs pour les photos
6. ptèt fusionner les css pour n'en avoir plus qu'un (voire l'inliner dans le html) au lieu de 7 actuellement
7. pareil pour le JS

Ces différentes idées ont des impacts différents en terme de performance, d'expérience utilisateur et demande des niveaux de travail différents, donc à papoter