0

Mini-guide WebPerf n°1: Chargement CSS / JS

Bonjour les amis.

Aujourd’hui, on vous aide à comprendre une chose importante concernant le chargement de fichiers externes dans le navigateur.
Il faut savoir que le CSS et le JS agissent différemment en terme de chargement.

Généralement, la déclaration de vos fichiers CSS se fait directement dans la balise <head>
Lors du chargement de votre page, le navigateur commence d’abord par charger votre code HTML. Il passera donc indéniablement et de manière très rapide dans votre balise <head>.

Il croisera alors le chemin du séduisant CSS qui l’habillera de sa robe charnelle.

Sachez toutefois que le Javascript fonctionne différemment.

En effet, le chargement d’un script Javascript va stopper momentanément le chargement de la suite du HTML.
C’est pour cette raison qu’il est conseillé de charger vos scripts en bas de page, juste avant la fermeture de la balise <body>.
S’il vous parait insurmontable de charger vos scripts en bas de page, vous pouvez bien évidemment les laisser dans la balise <head>.
Pensez alors à leur ajouter l’attribut async comme ceci

<script async src="mon_script.js"></script>

Cela aura pour effet d’indiquer au navigateur de continuer à charger le reste de la page, même si le chargement du script n’est pas encore terminé.

Ça semble pas grand chose comme ça, mais si vous chargez des scripts depuis Google Librairies par exemple, et que les serveurs de Google sont un peu long à répondre au moment de votre requête, vous éviterez à vos visiteurs la sensation de chargement long de votre site.

A bientôt les amis.

A propos de Romuald

Romuald a écrit 23 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.