Préchargement du CSS et du Javascript

Résolu/Fermé

YameFAZE Messages postés 201 Date d'inscription mardi 24 avril 2012 Statut Membre Dernière intervention 14 mars 2021 - 13 févr. 2019 à 12:28
YameFAZE Messages postés 201 Date d'inscription mardi 24 avril 2012 Statut Membre Dernière intervention 14 mars 2021 - 18 févr. 2019 à 15:31

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.

A voir également:

Préchargement du CSS et du Javascript
Telecharger javascript - Télécharger - Langages
Taille bouton css - Forum HTML
Css retour à la ligne - Forum CSS
Node.js javascript runtime virus ✓ - Forum Virus
Vous devez supporter le javascript et accepter les cookies pour continuer. desactivez les plugins de type adblock qui peuvent bloquer certaines parties du service merci de reessayer ulterieurement. erreur #125 - Forum Mozilla Firefox

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38316 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 novembre 2024 4 705
13 févr. 2019 à 14:22

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 201 Date d'inscription mardi 24 avril 2012 Statut Membre Dernière intervention 14 mars 2021
13 févr. 2019 à 14:49

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 ?

ToraTorapa
Modifié le 15 févr. 2019 à 02:45

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.

YameFAZE Messages postés 201 Date d'inscription mardi 24 avril 2012 Statut Membre Dernière intervention 14 mars 2021
18 févr. 2019 à 15:31

Merci.

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

trait horizontal avec du css

java script error in the main process

Enlever le soulignement sous les liens en HTML/CSS

javascript:void(0);