L'une des premières choses que je recommande à mes clients pour accélérer les sites Web semblera d'abord un paradoxe: vous devez placer des ressources statiques sur votre hébergement, abandonnant l'infrastructure CDN tierce. Dans ce court article et, je l'espère, très simple, je veux souligner les inconvénients du stockage de vos fichiers statiques «sur le côté» et les formidables avantages de les héberger sur mon hébergement.
De quoi je parle?
Il est courant pour les développeurs de cliquer sur le lien vers des actifs statiques, tels que des bibliothèques ou des plugins, qui se trouvent sur des sites et des ressources CDN. Un exemple classique est jQuery.
Il y a un certain nombre d'avantages évidents, mais mon objectif plus loin dans l'article est d'exposer cette approche et de montrer que les inconvénients sont beaucoup plus répandus.
(Tout d'abord, considérez les avantages).
- C'est pratique. Cela nécessite très peu d'efforts pour connecter les fichiers. Copiez la ligne de code HTML et vous avez terminé. C'est facile.
- Nous avons accès au CDN. code.jquery.com est fourni par StackPath, c'est un CDN. En vous connectant au contenu de cette ressource, nous obtenons gratuitement une livraison de qualité CDN.
- Les fichiers utilisateur peuvent déjà être mis en cache. Si website-a.com est lié à code.jquery.com/jquery-3.3.1.slim.min.js et que l'utilisateur va d'ici à website-b.com, qui est également lié à code.jquery.com/jquery-3.3 .1.slim.min.js , alors l'utilisateur aura ce fichier dans le cache.
Risque: baisse de vitesse et échecs
Je n'entrerai pas dans trop de détails dans ce post. J'ai un article complet sur la viabilité d'un tiers et les risques liés aux retards et interruptions. Qu'il suffise de dire que si vous avez des ressources critiques liées à des fournisseurs tiers, et si le fournisseur souffre de plantages et d'une baisse de vitesse ou de pannes, c'est une très mauvaise nouvelle pour vous. Vous en souffrirez aussi.
Si vous avez des CSS bloquant le rendu ou des JS synchrones hébergés sur des ressources tierces, allez-y et transférez-les immédiatement dans votre propre infrastructure. Les actifs critiques sont trop précieux pour être laissés sur des serveurs tiers.
Risque: Résiliation du service
Il s'agit d'un événement beaucoup moins courant, mais que se passe-t-il si le fournisseur décide qu'il doit arrêter le service? C'est exactement ce que Rawgit a fait en octobre 2018, jusqu'à présent (au moment de la rédaction), une recherche brute sur le code GitHub fournit toujours plus d'un million de liens vers le service, qui est actuellement fermé, et près de 20000 sites actifs continuent de fonctionner. référez-vous-y.
Risque: vulnérabilités de sécurité
Une autre chose à laquelle il faut prêter attention est une simple question de confiance. Si nous apportons du contenu à partir de ressources tierces sur notre page, nous devons espérer que les fichiers que nous recevons sont exactement ce que nous attendons de recevoir, et ils font exactement ce que nous attendons d'eux.
Imaginez le mal qui pourrait être fait si quelqu'un pouvait prendre le contrôle d'un fournisseur tel que code.jquery.com et commencer à fournir du contenu compromis ou malveillant. Ça fait peur d'y penser!
Intégrité des sous-ressources
Nous devons rendre hommage à tous les fournisseurs tiers mentionnés jusqu'ici dans cet article, ils font tout pour garantir l'intégrité de la sous-ressource (Subresource Integrity - SRI). SRI est le mécanisme par lequel le fournisseur fournit le hachage (techniquement, un hachage suivi d'un encodage Base64) du fichier spécifique que vous attendez et avez l'intention d'utiliser. Le navigateur peut alors vérifier que le fichier que vous avez reçu correspond exactement à ce que vous avez demandé.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
Encore une fois, si vous devez absolument connecter du contenu statique à une ressource tierce, assurez-vous que SRI est actif. Vous pouvez vous connecter SRI vous-même.
Reckoning: Network Negotiations
L'un des coûts les plus importants et les plus urgents que nous encourons est celui de l'ouverture de nouvelles connexions TCP. Chaque nouvelle ressource que nous devons visiter nécessite d'ouvrir une connexion, ce qui peut être très coûteux: résolution DNS, négociation TCP, négociation TLS, qui contribuent tous, et l'histoire s'aggrave à mesure que la connexion tarde.
Je vais donner un exemple tiré directement de la propre page de démarrage de Bootstrap. Ils demandent aux utilisateurs de joindre quatre fichiers.
Ces quatre fichiers sont situés sur trois ressources différentes, c'est-à-dire que nous devons ouvrir trois connexions TCP. Combien cela coûte-t-il? Eh bien, avec une connexion assez rapide, le contenu de ces fichiers statiques sur le côté est de 311 ms, soit 1,65 fois plus lent que lors de leur placement sur votre propre hébergement.
En contactant trois sources différentes pour la maintenance des actifs statiques, nous perdons collectivement les 805 ms inutiles pour les approbations du réseau.
D'accord, ce n'est pas si effrayant, mais Trainline, mon client, a constaté que lorsque le retard a été réduit de 300 ms, les visiteurs ont payé 8 millions de livres supplémentaires par an. C'est un moyen assez simple de gagner 8 millions.
En déplaçant simplement nos ressources vers votre domaine, nous éliminons complètement le coût des connexions supplémentaires.
Pour une connexion plus lente, avec un délai plus long, l'histoire est bien pire. Pour la 3G, la version tierce est plus lente que 1,765 s. Je pensais que c'était destiné à rendre notre site plus rapide.
Lorsque vous vous connectez avec un retard important, le coût total du réseau est de 5,037 monstrueux. Ce qui peut être complètement évité.
Le déplacement de fichiers vers notre propre infrastructure réduit le temps de téléchargement de 5,4 s à 3,6 s.
Si ce n'est pas une bonne raison d'héberger vos ressources statiques, je ne sais pas quoi apporter d'autre.
Se connecter
Naturellement, tout l'intérêt de ma présentation ici est que vous ne devez pas publier de ressources statiques sur le côté si vous êtes en mesure de le faire sur votre hébergement. Cependant, si vos mains sont en quelque sorte liées, vous pouvez utiliser la préconnexion de Resource Hint pour ouvrir de manière proactive une connexion TCP à une ou des sources spécifiques: De plus, leur déploiement en tant qu'en-têtes HTTP sera encore plus rapide.
Remarque Même si vous utilisez la préconnexion, le temps perdu ne diminuera que légèrement: vous devez toujours ouvrir les connexions appropriées et il est peu probable que les coûts soient jamais justifiés, en particulier pour les connexions lentes.
Reckoning: perte de priorité
Le deuxième calcul se présente sous la forme d'une optimisation au niveau du protocole, ce qui nous manque lorsque nous divisons le contenu en domaines. Si vous utilisez HTTP / 2, ce qui doit être fait, vous avez accès à la priorisation.
Tous les flux (donc les ressources) avec la même connexion TCP conservent la priorité, et le navigateur et le serveur travaillent en tandem pour construire l'arborescence de dépendances de tous ces flux priorisés, afin que nous puissions renvoyer les ressources critiques plus rapidement et éventuellement retarder la livraison des moins importantes.
Remarque Techniquement, en raison de la fusion des connexions HTTP / 2, les demandes peuvent être hiérarchisées les unes par rapport aux autres sur différents domaines, à condition qu'elles partagent la même adresse IP.
Si nous distribuons nos ressources sur différents domaines, nous devons ouvrir plusieurs connexions TCP uniques. Nous ne pouvons pas croiser les priorités pour ces connexions, c'est-à-dire que nous perdons la capacité de livrer des fichiers d'une manière bien réfléchie.
En hébergeant tout le contenu sur un seul hébergement, nous pouvons construire une arborescence de dépendances plus complexe. Chaque thread a son propre ID, car ils appartiennent à la même arborescence. Si nous fournissons autant de contenu que possible à partir d'un domaine, nous pouvons laisser HTTP / 2 faire son travail et hiérarchiser les actifs plus complètement dans l'espoir d'une réponse plus rapide.
Mise en cache
Dans l'ensemble, les hôtes de ressources statiques semblent assez bien faire pour définir des directives max-age à longue durée de vie. Cela est logique car le contenu statique sur les URL versionnées (comme indiqué ci-dessus) ne changera jamais. Cela rend très sûr et rationnel l'application d'une politique de cache raisonnablement agressive.
Cependant, ce n'est pas toujours le cas et en plaçant indépendamment vos ressources, vous pouvez développer des stratégies de mise en cache beaucoup plus individuelles.
Mythe: mise en cache inter-domaines
Plus intéressant est la possibilité de mettre en cache des actifs entre domaines. Autrement dit, si de nombreux sites sont liés à la même version de jQuery, située sur le CDN, les utilisateurs ont sûrement déjà ce fichier particulier sur leur ordinateur. Quelque chose comme le partage de ressources d'égal à égal. Il s'agit de l'un des arguments les plus courants pour utiliser un fournisseur d'actifs statique tiers.
Malheureusement, aucune preuve publiée ne vient étayer ces affirmations: il n'y a aucune raison de croire que cela est vrai. À l'inverse, une étude récente de Paul Calvano laisse entendre que le contraire peut être vrai:
Il existe un écart notable entre l'âge du cache de ressources CSS et les polices Web de premier et de troisième niveau. 95% des polices tierces datent de plus d'une semaine, contre 50% des polices tierces de moins d'une semaine. Cela fournit de bonnes raisons pour les polices Web auto-hébergées.
En général, il semble que le contenu tiers soit mis en cache pire que le sien.
Plus important encore, Safari a complètement désactivé cette fonctionnalité en raison de problèmes d'abus de confidentialité, de sorte que la technologie de cache partagé pourrait ne pas fonctionner au moment de la rédaction de cet article pour 16% des utilisateurs dans le monde.
En bref, bien que cela soit théoriquement bon, rien ne prouve que la mise en cache interdomaine soit en quelque sorte efficace.
Accès CDN
Un autre avantage répandu de contacter un fournisseur de ressources statiques est qu'il est susceptible d'utiliser une infrastructure puissante avec des capacités CDN: distribution mondiale, évolutivité, faible latence et haute disponibilité.
Étant donné que cela est absolument vrai, si vous vous souciez de vos performances, vous devez exécuter votre propre contenu à partir du CDN. Avec le niveau des prix d'hébergement actuels, il y a très peu d'excuses pour lesquelles vous ne l'utilisez pas pour vos ressources.
En d'autres termes: si vous pensez avoir besoin d'un CDN pour votre jQuery, vous aurez besoin d'un CDN pour tout.
Hébergez des ressources statiques sur votre hébergement
En fait, il y a très peu de raisons de laisser vos ressources statiques dans l'infrastructure de quelqu'un d'autre. Les avantages possibles sont souvent un mythe et même si ce n'est pas le cas, les compromis n'en valent tout simplement pas la peine. Le chargement des ressources à partir de différentes sources est beaucoup plus lent. Au cours des prochains jours, passez dix minutes à auditer vos projets et prenez le contrôle de toutes les ressources statiques tierces.