web-dev-qa-db-fra.com

Mettre CSS / JS dans l'en-tête pour des temps de chargement plus rapides

J'ai lu récemment de nombreux articles sur le référencement sur les temps de chargement. Essayer d'obtenir le temps de chargement idéal peut prendre beaucoup de temps mais aussi procurer un sentiment de satisfaction lorsque votre site se charge deux fois plus rapidement.

Maintenant, beaucoup de ces tutoriels et blogs disent de mettre des morceaux de CSS/JS dans votre balise head pour aider le contenu au-dessus du pli à se charger plus rapidement.

"le chargement des ressources externes est plus long", chaque demande de fichier au serveur prend plus de temps. Il n’est donc pas logique d’incorporer tous les fichiers CSS/JS dans votre balise head dès le début.

Cela peut certes sembler compliqué au début, mais la seule raison pour laquelle le téléchargement de scripts externes dans le navigateur prend du temps est dû au fait que la sortie a déjà été envoyée au navigateur.

Et si nous faisions simplement:

<head>
    ... Usual things here ...
    <?php require('css/bootstrap'); ?>
    <?php require('css/mystylesheet'); ?>
</head>
<body>
    ... Usual things here ...
    <?php require('js/bootstrap.js'); ?>
    <?php require('js/myscript.js'); ?>
</body>

Désormais, ce fichier sera simplement servi sous forme de fichier HTML simple avec CSS et JavaScript intégrés dès qu'il apparaîtra dans le navigateur de l'utilisateur. Et notre éditeur de texte a la même apparence qu'auparavant, car nous avons besoin du fichier en PHP.

Est-ce que cela améliorerait les performances globales de vitesse ou devrais-je rester à l'écart de cette méthode?

seoperformancepage-speedgoogle-pagespeed
1
Matthew Smart

Cette question peut appartenir à Stackoverflow et pas ici, mais vous incluez les feuilles de style complètes et les scripts dans chacune de vos pages. Cela augmente considérablement le temps de téléchargement et de calcul de chaque page, tandis que la recommandation dont vous parlez ne parle que de quantités moins importantes de style et de code. Faire ce que vous montrez peut augmenter la taille de téléchargement de votre page, peut-être 10 fois ou plus.

Imaginez que vous essayez de charger tout votre marquage, votre style et votre code sur un téléphone avec une mauvaise connexion. Beaucoup de sites peuvent à peine fonctionner en servant du HTML et du CSS de base, encore moins tout cela.

La suggestion est de vous amener à fournir un minimum de balises pour rendre l'expérience utilisateur initiale utilisable aussi rapidement que possible afin que vous puissiez ajouter tous les autres types de peluches ultérieurement.

Est-ce que cela prend du temps et est difficile? Oui. Selon le site.

2
Rob