Sujet Précédent Sujet Suivant

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.

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
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.

0
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 ?
0
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.
0
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.
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses