Éliminer les ressources bloquant le rendu, réduire le JavaScript inutilisé et minimiser le travail du thread principal se trouvent généralement en haut du rapport PageSpeed Insights. Ils parlent d'économies potentielles, mais à part l'utilisation de la balise defer, il n'y a pas beaucoup d'informations sur la façon de procéder.
Bien qu'il existe quelques moyens supplémentaires d'accélérer le chargement de vos pages en s'attaquant à JavaScript.
Commençons par le report, puis donnons-vous quelques options supplémentaires.
Defer ou async ?
En bref - différer le chargement des scripts fait apparaître votre site comme se chargeant plus rapidement qu'en utilisant 'async'. Selon votre utilisation, cela peut être ou non la meilleure façon de procéder.
L'attribut 'defer' permet au navigateur de continuer à analyser le HTML pendant que le script est téléchargé en arrière-plan. Mais il attend l'exécution du script jusqu'à ce que l'analyse HTML soit terminée. C'est pourquoi le 'paint' du contenu sur votre site se charge plus rapidement. La page web est entièrement chargée pour que votre visiteur puisse la voir plus rapidement qu'avec aucun attribut ou l'attribut 'async'.
L'attribut 'async' permet au navigateur de continuer à analyser le contenu HTML pendant que le script est téléchargé en arrière-plan. Mais une fois le script téléchargé, il s'exécute immédiatement. Si l'analyse HTML n'est pas prête, cela l'interromprait. Donc, bien que le HTML se charge plus rapidement qu'sans utiliser async, l'interruption potentielle du chargement du HTML pourrait faire apparaître votre site comme se chargeant plus lentement.
Quand utiliser defer ou async ?
Les scripts 'async' s'exécutent dès qu'ils sont téléchargés, ce qui n'est pas nécessairement dans l'ordre dans lequel ils apparaissent dans le document. L'attribut 'defer' préserve l'ordre et garantit que les scripts s'exécutent après que le document a été analysé.
'Async' est particulièrement utile pour les scripts qui ne dépendent PAS d'éléments du Document Object Model (DOM) ou d'autres scripts. Un script différé attend que le DOM soit prêt, ce qui en fait un choix plus sûr pour les scripts qui doivent manipuler le DOM.
Quel type de scripts manipule le DOM ?
Les bibliothèques comme jQuery ou les scripts personnalisés en général. Ceux-ci manipulent le DOM et doivent être chargés avec l'attribut 'defer' pour garantir que le DOM est entièrement chargé avant leur exécution. Et, si vous avez des scripts qui dépendent d'autres scripts à charger en premier, l'utilisation de 'defer' garantit qu'ils sont exécutés dans l'ordre où ils apparaissent dans le document.
Les scripts d'analyse, de publicités et de choses moins vitales, en général, n'ont pas besoin d'être chargés aussi rapidement que possible. C'est un choix que vous devez faire vous-même, mais la plupart des gens préfèrent un site qui se charge plus rapidement plutôt que des scripts qui fonctionnent quelques millisecondes plus vite.
Une bonne règle générale est d'utiliser defer pour le JavaScript non essentiel. Si le script ne dépend pas du DOM ou d'autres scripts, alors utiliser async ou aucun attribut convient.
Réduire le JavaScript inutilisé
Il est temps de faire un grand nettoyage. Secouez l'arbre et débarrassez-vous du code mort, c'est-à-dire du JavaScript inutilisé. Cela profite non seulement à la vitesse, mais aussi à la sécurité. Nous avons écrit plusieurs articles jusqu'à présent sur les problèmes qui peuvent survenir avec le JavaScript tiers. Toute notre entreprise a été fondée pour aider à sécuriser contre les vulnérabilités qui y sont associées. Et souvent, les sites web continuent d'exécuter des scripts qui ne sont plus utilisés avec de grands risques qui en découlent.
C'était récemment le cas dans l'attaque de la chaîne d'approvisionnement web Polyfill, où un ancien domaine a été acheté par une nouvelle partie, puis utilisé à des fins malveillantes. Plus de 490 000 sites web avaient référencé ce domaine et ont potentiellement subi des attaques.
D'autres cas se présentent sous la forme d'outils qui étaient autrefois utilisés mais ne le sont plus, ou de frameworks qui viennent avec une pléthore de bibliothèques JavaScript qui ne sont pas utilisées sur un site particulier. En savoir plus sur les risques de comment les domaines expirés peuvent conduire à des problèmes de cybersécurité ici.
Plus vous avez de JavaScript sur votre site, plus vous courez un risque important.
Il était pratiquement impossible de repérer les modifications apportées aux scripts tiers. Heureusement, ce n'est plus le cas. Nous sommes très fiers d'avoir construit une solution qui non seulement surveille et alerte, mais est même capable de bloquer les scripts malveillants de manière autonome avant que les attaques ne se produisent.
Si vous utilisez un outil de surveillance comme cside, vous pourrez facilement voir quel code est chargé où, ainsi que ce que ce code fait réellement. Avec ces informations, il est beaucoup plus facile d'effectuer ce grand nettoyage et de supprimer les scripts indésirables.
Mais cside va encore plus loin, ce qui nous amène au point suivant.
Optimiser JavaScript pour un chargement plus rapide
cside charge tous les autres scripts de votre site dans un proxy pour les analyser avant qu'ils ne soient chargés dans le navigateur. C'est de loin la solution la plus sûre. Rien de malveillant ne peut toucher le navigateur de vos utilisateurs, ce qui les sécurise ainsi que vous-même complètement.
Mais cela comporte quelques défis. Puisque le JavaScript est vérifié avant de se charger, cela ajoute naturellement de la latence. Simplement différer n'est pas toujours possible puisque nous chargeons tous les scripts dans le proxy, y compris les scripts nécessaires qui impactent les éléments du Document Object Model (DOM) comme expliqué précédemment.
Pour certaines applications, cela conviendrait toujours. Pour d'autres, ce serait rédhibitoire.
Pour nous, c'était aussi rédhibitoire. Oui, la sécurité d'abord. Mais si les inconvénients deviennent trop importants, les entreprises hésiteront à adopter les meilleures normes. Et nous devons nous assurer qu'il y a le moins d'inconvénients possible.
C'est pourquoi nous avons conçu cside pour optimiser réellement les scripts afin qu'ils se chargent plus rapidement que la normale, atténuant complètement la latence. Souvent même en rendant ces scripts, et donc les sites web, plus rapides au lieu de plus lents.
Puisque nous vérifions chaque session tout le temps, nous rencontrons les mêmes scripts des milliers de fois par jour. Nous stockons chaque version d'un script et, si possible, le mettons en cache. Cela nous permet de charger les versions en cache, ce qui est plus rapide que même charger les versions originales à nouveau.
Nous réécrivons spécialement les en-têtes de mise en cache afin de bloquer un script et de le faire bloquer pour les clients qui pourraient déjà l'avoir dans leur cache, tout en maintenant les performances de mise en cache.
De plus, nous avons conçu notre infrastructure pour fonctionner incroyablement rapidement. Comparé à d'autres fournisseurs qui resteront anonymes, notre proxy sert un script de 20,3 ko plus rapidement qu'ils ne peuvent servir un script de 1,2 ko. Le nôtre a pris 10 ms tandis que le leur a pris 13 ms dans nos tests, un gain de vitesse de 22x, en supposant que tous les autres facteurs restent constants.
Enfin, JavaScript est souvent minifié et obfusqué. La minification est un moyen courant d'obtenir de petits gains de vitesse. Ce dernier peut avoir des effets négatifs sur les performances. Sachez simplement que dans cside, vous pouvez voir les versions désobfusquées des scripts pour mieux comprendre ce que fait le code.
Compression
Une autre façon d'optimiser JavaScript est d'utiliser GZip, Brotli ou une autre compression. Ce sont des algorithmes qui réduisent la taille des fichiers envoyés du serveur au navigateur. Cela fonctionne en identifiant et en éliminant les données redondantes dans un fichier.
Il y a quelques mises en garde à cela, mais il est généralement préférable de l'utiliser plutôt que de ne pas l'utiliser. Il faut du temps pour compresser et décompresser les fichiers, mais généralement moins que le temps économisé en téléchargeant un fichier plus volumineux. Par conséquent, vous en sortez gagnant.
Cela fonctionne particulièrement bien sur les fichiers texte, comme HTML, CSS et aussi JavaScript.
Préchargement et prérécupération
Le préchargement vous permet de récupérer des ressources critiques (comme JavaScript) avant qu'elles ne soient nécessaires au navigateur. Ces ressources sont alors disponibles dès qu'elles sont requises, réduisant les temps de chargement. Le navigateur donnera la priorité à ces ressources, en les téléchargeant lors du chargement initial de la page.
Par exemple, précharger un fichier JavaScript garantit qu'il est disponible lorsque le navigateur atteint le point dans le HTML où il chargerait normalement ce script. Cela évite les retards causés par le navigateur ayant besoin de récupérer le fichier à ce moment-là.
Cela peut sembler identique aux attributs 'defer' ou 'async', mais il existe quelques différences clés.
Le préchargement garantit que les ressources critiques comme CSS, les polices et les fichiers JavaScript importants sont récupérés tôt et priorisés par le navigateur pour une disponibilité immédiate.
Rappelez-vous que l'attribut 'defer' est utilisé pour retarder l'exécution de JavaScript jusqu'à ce que le document HTML ait été entièrement analysé. Et puis encore, l'attribut 'async' permet aux scripts d'être récupérés et exécutés dès qu'ils sont disponibles, sans attendre que l'analyse HTML soit terminée.
Un autre exemple de préchargement est l'utilisation d'une police personnalisée sur votre site. Si cette police n'est pas chargée rapidement, les utilisateurs pourraient voir une police par défaut en premier, conduisant à un flash de texte non stylisé. En préchargeant la police, vous vous assurez que cela ne se produit pas.
La prérécupération, quant à elle, se concentre sur la récupération de ressources pendant le temps d'inactivité du navigateur pour les besoins futurs, tels que les ressources pour la page suivante vers laquelle l'utilisateur est susceptible de naviguer. Le chargement pendant ces temps d'inactivité réduit considérablement les temps d'attente.
Minimiser le travail du thread principal
Le thread principal est l'endroit où le navigateur effectue la plupart du travail nécessaire pour afficher une page, comme l'analyse et l'exécution de HTML, CSS et JavaScript. Le garder rapide et efficace est nécessaire pour une expérience utilisateur généralement bonne.
PageSpeed Insights donne quelques conseils à ce sujet.
Le rendu peut être optimisé en s'en tenant aux propriétés compositor-only. Ce sont des propriétés CSS qui peuvent être gérées entièrement par le compositeur du navigateur, contournant le thread principal et le besoin d'opérations de mise en page ou de peinture. Simplifier la complexité de la peinture en réduisant les zones qui doivent être peintes peut aider davantage le navigateur à rendre la page plus efficacement, accélérant les temps de chargement.
En ce qui concerne le style et la mise en page, simplifier votre CSS et éviter les sélecteurs complexes peut réduire considérablement le temps passé sur les calculs de style. Cela peut être réalisé en réduisant la portée et la complexité des calculs de style. Il s'agira probablement d'un équilibre entre design et performance.
Éviter le layout thrashing est essentiel. Le layout thrashing se produit lorsque nous effectuons des lectures et des écritures consécutives dans le DOM, empêchant le navigateur d'optimiser la mise en page. Cela force le navigateur à calculer une mise en page qui n'est jamais rendue à l'écran.
Envisagez de différer le CSS non critique, en chargeant les styles non essentiels de manière asynchrone pour les empêcher de bloquer les opérations du thread principal pendant le chemin de rendu critique.
Retour à JavaScript.
Pour l'évaluation des scripts, le debouncing des gestionnaires d'entrée est utile. Il aide à réduire la fréquence d'appel des gestionnaires d'événements, réduisant ainsi la charge sur le thread principal. Notez que les web workers ont un environnement restreint. Ils ne peuvent pas manipuler directement le DOM ou utiliser certaines API disponibles pour le thread principal.
Enfin, la collecte des ordures peut être optimisée en surveillant l'utilisation de la mémoire. L'utilisation d'outils comme 'measureMemory()' aide à suivre et gérer l'utilisation de la mémoire, réduisant le temps passé sur la collecte des ordures. Une gestion efficace de la mémoire aide à garder le thread principal libre pour des tâches plus critiques.
Lier performance et sécurité
Toutes ces solutions vous aideront à accélérer JavaScript pour obtenir de meilleures performances. cside peut aider en mettant en cache et en optimisant les scripts également.
Mais nous aimerions souligner qu'avant tout, nous sommes axés sur la sécurité. Le fait que nous accélérions les scripts était principalement nécessaire pour l'adoption par nos utilisateurs. Les attaques de la chaîne d'approvisionnement du navigateur sont en hausse. Et les acteurs malveillants ciblent souvent le JavaScript tiers. cside analyse chaque script avant qu'il ne se charge dans le navigateur et bloque tout ce qui est malveillant.
Une approche proactive qui vous sauve, vous et vos utilisateurs, avant que quelque chose de mauvais ne se produise.
Vous pouvez commencer avec cside gratuitement.
