Menu

Préchargement du CSS et du Javascript

Messages postés
115
Date d'inscription
mardi 24 avril 2012
Dernière intervention
13 février 2019
- - Dernière réponse :  ToraTorapa - 15 févr. 2019 à 02:44
Bonjour,

J'ai un "index.php" avec plusieurs "include" pour mutualiser certains affichages sur l'ensemble de mon site. Actuellement je charge tous les fichiers CSS et JS dans le "head" de mon "index.php". Il y a quand même une dizaine de fichiers au total. J'ai peur que pour un visiteur qui essaye de se connecter depuis un smartphone au milieu de la nature, donc avec une connexion et un débit merdique, cela devienne très lourd. Est-ce qu'il y a un moyen de charger juste les fichiers indispensables pour l'affichage de l'index dans un premier temps, puis dans un second, de précharger les autres fichiers pour leur utilisation future lorsque le visiteur en aura besoin ? Merci d'avance.
Afficher la suite 

Votre réponse

1 réponse

Messages postés
24556
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 février 2019
1842
0
Merci
Bonjour,

Oui... il suffit de placer le chargement de tes fichiers non pas dans le head comme on le faisait il y a 15 ans...... mais à la fin de ton fichier html (juste avant le </body> )
Cela permet de mettre à disposition le contenu même si tout le css/js n'est pas encore chargé.

Je t'invite aussi à regarder comment minifier tes fichiers afin de réduire leur taille/poids.

YameFAZE
Messages postés
115
Date d'inscription
mardi 24 avril 2012
Dernière intervention
13 février 2019
-
Ok merci. J'ai cru voir quelque part il y a quelques temps une fonction "preload". Et j'ai entendu parler d'un parsing asynchrone. Non ?
Une chose est sûre c'est pas PHP qui va faire un quelconque preload puisque qu'il fonctionne avant que la page existe. Et sans page pas de chocolat.
Pour le parsing asynchrone je ne connait pas, mais il faut qu'il y ait déjà la page donc pas vraiment du préchargement.
Pour le preload d'images/fichiers il y a cela qui permet de mettre les images dans le cache comme ceci

<html>
<head>
<script>
let imagesPrechargees=[image1.jpg, ...];
document.body.onLoad=function (){
imagesPrechargees;
//-- en lisant le tableau lors de l’événement du chargement de la page celles ci sont mises en cache
}
</script>
</head>
<body>
...la page
</body>
</html>


Voilà mais ça ne peut pas charger les fichiers .css ou .js puisque ceux ci sont liés à la page.
Le mieux est de les alléger et pour le JS d'utiliser les minifier, éviter les bibliothèques lourdes comme JQuery quand ce n'est pas nécessaire.

" Est-ce qu'il y a un moyen de charger juste les fichiers indispensables pour l'affichage de l'index dans un premier temps" euh refaire tout le programme pour pas qu'il n'y ait des dizaines de fichiers JS pour afficher une page...La minification sinon. Un CDN? Il y a plusieurs façons d'alléger le chargement, la première étant de ne pas avoir des fichiers trop lourds côté CSS, pareil pour JS. Vous pouvoir voir aussi du côté de l'import de fonctions je ne sais pas si ça aide. Il y a aussi les web workers mais c'est plus du côté chargement mais lors de l'interprétation/exécution.
Commenter la réponse de jordane45