Préchargement du CSS et du Javascript
Résolu
YameFAZE
Messages postés
201
Date d'inscription
Statut
Membre
Dernière intervention
-
YameFAZE Messages postés 201 Date d'inscription Statut Membre Dernière intervention -
YameFAZE Messages postés 201 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Préchargement du CSS et du Javascript
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Windows
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
- Css exposant ✓ - Forum CSS
- Erreur #125 javascript - Forum Mozilla Firefox
1 réponse
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.
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.
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.