Une introduction sur la mise en cache stratégique du contenu dynamique à la périphérie : comment cela fonctionne et pourquoi c’est mieux que les CDN traditionnels.
En ce qui concerne les performances, la plupart des CDN font certaines choses bien : ils fournissent des fichiers statiques rapidement, fournissent une surcharge réseau pour les périodes de pointe de trafic et protègent contre les attaques DDoS au niveau du réseau. Historiquement, cela signifiait une augmentation tangible des performances et de la sécurité pour les ressources telles que les images, les vidéos et autres contenus statiques. Au fur et à mesure que les technologies Web ont évolué, les avantages mentionnés ci-dessus ne sont essentiellement que les enjeux de table qui ont été établis lorsque les CDN ont été intégrés aux solutions de diffusion Web courantes.
Le problème est que l’architecture CDN a été développée il y a des années. L’architecture du site Web a changé à pas de géant, mais la plupart des CDN ne se sont pas adaptés à l’évolution du paysage.
Si vous lisez ceci, vous avez un site qui est probablement architecturé avec une certaine quantité de contenu dynamique rendu côté serveur. Si vous utilisez un CDN hérité, vous êtes probablement habitué à voir quelque chose comme ça dans vos en-têtes de réponse lorsque vous affichez les outils de développement de votre navigateur.
cdn-cache : pass
Substituez la valeur de cette paire en fonction de votre fournisseur : pass, Miss ou Dynamic-content. Tout cela signifie la même chose.
« Cette réponse vient de votre origine parce que c’était trop compliqué. »
Et qu’est-ce que cela signifie pour les performances de votre site ? Cela signifie que vous sacrifierez la vitesse parce que votre contenu dynamique provient presque toujours de votre origine simple et simple. Vos pages de catégorie et de produit, articles et requêtes API sont envoyées directement à votre origine presque 100% du temps. La plupart des CDN souffrent du même fléau. Si vous avez de la chance, vous pouvez insérer environ 10 à 11 % des réponses dynamiques de votre serveur dans votre cache périphérique. Vous constaterez rapidement que vous n’avez pas assez de contrôle granulaire pour affiner vos règles de mise en cache afin de créer un site Web qui se charge instantanément et ressemble à une application native.
Bienvenue à Edgio
Chez Edgio, nous nous vantons du deuxième plus grand CDN de la planète avec plus de 300 POP dispersés dans le monde et 250 TBS de capacité. Nous sommes sécurisés, performants et partout dans le monde. Mais comme nous l’avons dit précédemment, ce ne sont que les enjeux de table. Chez Edgio, nous abordons le problème du CDN sous un angle différent. Au lieu d’être liés à des règles vieilles de vingt ans, nous avons construit un CDN réactif et flexible pour les vingt prochaines années et au-delà. Nous avons développé le premier CDN configurable par code au monde qui offre à vos développeurs et aux membres de votre équipe DevOps la flexibilité et le contrôle granulaire dont ils auront besoin pour livrer des sites Web en moins d’une seconde.
Ce n’est pas magique, c’est l’avenir des CDN et c’est disponible dès maintenant
À ce stade, vous pensez probablement que cela ressemble à de la magie, eh bien cela pourrait se sentir ainsi, mais ce n’est pas le cas, c’est l’avenir de la diffusion d’applications web. Au lieu de séparer vos équipes DevOps et Engineering, nous les rassemblons en vous permettant d’intégrer votre logique CDN dans vos environnements locaux, de production et de mise en scène.
Mettez facilement en cache ce que vous voulez, pour combien de temps vous voulez
Chaque configuration Edgio commence par un dépôt de code que vous possédez et contrôlez. Chaque déploiement est unique et atomique, ce qui signifie que vous pouvez revenir à n’importe quelle version en moins d’une minute. Vous êtes libre de déployer la configuration parallèlement à votre projet ou de la maintenir dans un workflow séparé. La plupart de nos clients finissent par intégrer leurs règles CDN dans leur pipeline ci/CD et leur flux de développement normal. Il en résulte une vitesse de développement accrue sans sacrifier les performances et le contrôle. Gérez votre CDN comme vous le faites votre base de code.
J’ai l’habitude de publier mes modifications de configuration dans un portail ou en faisant des requêtes API. En quoi Edgio est-il différent ?
Ne vous inquiétez pas, nous avons des points de terminaison API et une interface utilisateur traditionnelle disponibles quand vous le souhaitez, mais pour maximiser pleinement votre taux de réussite du cache, les performances du site et la vitesse du développeur, vous voudrez commencer à utiliser EdgeJS. Plongeons dedans.
Lorsqu’un projet est initialisé, vous commencerez avec un fichier de configuration simple qui inclut un jeu de règles recommandé. Votre configuration est écrite en JavaScript, le langage de développement le plus populaire de la planète, et déployée en quelques secondes avec notre CLI. Un fichier définit vos serveurs d’origine.
module.exports = {
backends: {
origin: {
domainOrIp: "example.com",
hostHeader: "example.com",
},
},
Ajoutez vos points de terminaison API, vos compartiments média ou toute autre origine dont vous avez besoin. Facilement et avec quelques lignes de code.
Qu’en est-il de cette flexibilité de mise en cache ?
Bonne question, c’est là que le plaisir commence. Nous ajoutons un autre fichier afin que vous puissiez configurer vos routes et écrire quelques règles de mise en cache. Créez des règles pour votre contenu et définissez vos règles de mise en cache de périphérie, de navigateur et de service worker comme bon vous semble.
Commençons par ces actifs statiques que les CDN gèrent si bien.
.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60
},
browser: {
maxAgeSeconds: 60 * 60 * 24,
},
})
proxy('origin')
}
)
Avec une règle, nous avons établi quelque chose comme ceci pour toute demande:
“Si nous voyons une requête avec une extension de fichier correspondante, mettez-la en cache sur Edgio et le navigateur du client pendant vingt-quatre heures.”
Si vous essayez cela à la maison, vous pouvez cliquer autour de votre site localement et regarder pendant que nous mettons en cache et livrons des images, vos images, polices, CSS et JS. Ouvrez une fenêtre incognito pour être certain que le cache de votre navigateur est vide et afficher vos résultats de cache localement. Oui localement. Pas besoin de déployer cela pour voir cela fonctionner. Vous savez exactement comment votre code interagira avec notre CDN.
Qu’en est-il du contenu dynamique que vous avez mentionné ?
OH, ne vous inquiétez pas, nous n’avons pas oublié. Nous ne sommes qu’à 10 minutes et nous faisons correspondre ces CDN hérités. Maintenant, nous allons allumer les post-brûleurs et les laisser dans la poussière. Supposons que vous souhaitiez ajouter une route pour un contenu dynamique.
router.match('/products/:productId', ({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24
staleWhileRevalidateSeconds: 60 * 60
}
})
proxy('origin')
})
Et traduit cela signifie ce qui suit:
« Mettre en cache toutes les pages de produits pendant une journée.
Lorsque ce cache est expiré, servez l’ancien pendant une heure pendant que nous cherchons une nouvelle version. »
Maintenant vous avez vu la flexibilité et comprenez les bases. Espérons que vous imaginez quel impact le déploiement de votre CDN sur Edgio peut avoir sur la vitesse et les performances de votre site. Vous pouvez facilement définir vos propres routes et leur attribuer des règles de mise en cache. Mais que pouvez-vous faire d’autre avec la plateforme applications d’Edgio et EdgeJS ?
- Transférer les demandes vers un autre chemin sur votre origine,
- Demandes de modification
- Modifier les réponses
- Manipuler les cookies
- Servez des fichiers statiques
- Route vers les fonctions sans serveur
- Revenez au rendu côté serveur
- Redirections
- Blocage du trafic
- Purge sélective avec des clés de cache personnalisées
- Ou transformez entièrement la réponse de votre origine.
C’est à vous de décider comment vous allez tirer parti de la technologie de nouvelle génération d’Edgio et les exemples ci-dessus ne sont que la pointe de l’iceberg. En fait, chez Edgio, nous sommes constamment à la recherche de la performance, nous avons donc décidé de faire un pas plus loin, au-delà des limites et dans le navigateur de votre visiteur avec notre solution unique de préchargement HTML et d’actifs.
Pour savoir comment éliminer virtuellement les temps de réponse du réseau et transformer complètement votre site Web en lui donnant l’impression d’une application native, consultez notre article de suivi : réduire les taux de rebond et améliorer l’expérience du site avec Predictive Prefetch par Edgio.
