Cache dans le booster de performance de la BBC

Sep 16, 2025

Comment

A cached image of the BBC homepage featuring a selection of news headlines

[dix] [dix] [dix]

[dix]

L'année dernière, lors d'une session d'essais de l'utilisateur pour l'application BBC News, l'un des utilisateurs a fait un commentaire qui s'est vraiment coincé avec moi. Ils ont déclaré: "J'aime couler". Je ne pense pas qu'il y ait un meilleur résumé de la performance signifie pour nos utilisateurs. Sur une application ou un site Web rapide, l'utilisateur peut circuler, interagir et interagir avec le contenu.

[dix]

Les expériences fluides sont également bonnes pour les propriétaires de site. Une expérience fluide rapide aide les utilisateurs à atteindre leurs objectifs et à atteindre les objectifs de nos organisations. Amazon et d'autres ont démontré le lien étroit entre la performance et l'activité de l'utilisateur: comme l'attente des pages baissent, le temps et l'argent que l'utilisateur dépense augmente.

En savoir plus: NordvPN Review

Couper la distance avec un cache

Les caches sont créées lorsqu'une petite quantité de quelque chose est stockée plus près de l'endroit nécessaire, normalement pour empêcher la retravaque. Par exemple, si je mange des quilles, j'ai tendance à verser quelques-uns dans ma main, puis à manger à partir de là. En effet, je crée une cache de quilles dans ma main car il est plus rapide de les manger de cette façon que de retourner au paquet.

Ce même motif est utilisé dans la technologie. Il y a trois caches que nous devons envisager:

[dix]

Caches de serveur: données en cache sur le serveur, telles que les résultats des requêtes de base de données
Caches de réseau: caches intégrées au réseau, parfois par l'opérateur de site (appelée cache de proxy inverse), mais plus souvent par des fournisseurs de restauration ou d'autres fournisseurs de réseautage
Cache de navigateur: le navigateur stocke des fichiers sur le disque dur de l'utilisateur pour la réutilisation par l'utilisateur.

La mise en cache peut apporter une énorme amélioration de la performance; À la BBC, j'ai vu la mise en cache d'augmenter les performances plus de 20 fois en code de production. Il est également bénéfique pour les opérateurs de site. Avec la mise en cache, plus d'utilisateurs peuvent être pris en charge par le même matériel. Cela réduit le coût dans le matériel par utilisateur et réduit donc les coûts d'exploitation du site Web.

Concevoir avec la cache à l'esprit

Pour qu'il soit efficace, nous voulons utiliser des données en cache autant que possible. Pour prolonger l'analogie des quilles, si je veux une quille bleu mais je n'ai pas de quilles bleues dans ma main (aka mon cache), je vais devoir retourner au paquet. Ceci est connu comme le «taux de frappe». C'est un «coup» lorsque l'article est dans le cache et une «Miss 'quand ce n'est pas le cas. Nous voulons un taux élevé de frappe afin que le cache prend la majeure partie de la charge.

L'une des méthodes les plus simples pour augmenter le taux de frappe est de réduire les variations. Étirant un peu d'analogie de ma quilles, imaginez si toutes les quilles étaient rouges. De cette façon, n'importe quel quille dans ma main serait un cache frappé; Je n'aurais jamais besoin de retourner au paquet. En appliquant cela sur le Web, si nous pouvons donner la même page autant que possible des utilisateurs, le cache devient plus efficace car davantage de demandes frappera le cache.

Cache html pour une courte période

A 30-second cache of the BBC News homepage displaying regularly updated content — La page d'accueil des actualités utilise un en-tête de cache de 30 secondes pour obtenir du contenu devant les utilisateurs rapidement sans trop de charger

C'est donc la théorie. Soyons pratiques. Commençons par regarder la mise en cache de la demande de HTML. La mise en cache de tous les types de fichiers est contrôlée à l'aide d'en-têtes HTTP. Les en-têtes sont des métadonnées (données sur les données) envoyées du serveur au navigateur et visibles à tout le matériel réseau entre les deux. Pour dire au monde, il a la permission de cacher nos pages et de partager ce cache entre les utilisateurs, nous définissons l'en-tête suivant:

[dix]

Cache-Control: public, max-age=30

Ici, nous avons également défini une limite de temps: la durée maximale du cache doit réutiliser cette page pour, en quelques secondes. Pour cet exemple, je l'ai défini à 30 secondes.

En définissant la page sur «Public», le navigateur de l'utilisateur (et tout matériel en cours de route) conservera une copie. Donc, la première page de page fera une demande, mais toutes les charges de la page après cela réutiliseront la réponse initiale jusqu'à ce que la limite de temps soit atteinte.

L'effet du matériel réseau en cours de route peut être profond. De nombreux grands réseaux (tels que ISPS) auront un cache partagé entre les utilisateurs. Les opérateurs mobiles utilisent également cette technique fortement - par exemple, pour cacher et recompreter des images servies sur 3G. Les opérateurs de site peuvent également placer un cache HTTP devant leur service. C'est ce que nous avons fait à la BBC.

Actifs statiques de cache pour les âges

A longer-term cache of BBC iPlayer displaying content that is updated only periodically — BBC IPlayer stocke des actifs statiques pour une année - Les modifications de l'URL garantit aux utilisateurs de voir de nouvelles versions rapidement

Une technique que nous utilisons beaucoup à la BBC est de traiter les actifs statiques (comme des images, des CSS et des scripts) différemment de la manière dont nous traitons les pages. La mise en cache des pages HTML trop longtemps peut entraîner des mises à jour du contenu manquant des utilisateurs, mais nous pouvons tirer parti de ce comportement en matière d'actifs statiques.

À la BBC, nous envoyons tous les actifs statiques d'un âge maximum de 31 536 000 secondes dans l'en-tête de cache. Cela garantit que les actifs sont mis en cache pendant 365 jours. En effet, les actifs ne sont demandés qu'une seule fois. C'est bon pour la performance, mais mauvais pour la flexibilité, car les modifications apportées à cet actif prennent beaucoup de temps pour accéder à l'utilisateur.

Afin de contourner cela, chaque fois que nous publions une nouvelle version d'une page, nous modifions l'URL où les actifs sont conservés. Cette astuce signifie que de nouveaux changements sont mis en face des utilisateurs immédiatement, mais nous obtenons toujours les mêmes avantages de la performance.

Derniers mots

La mise en cache afin d'améliorer les performances du site Web sera à terme réduira les coûts d'exploitation pour nos sites Web et préserver le flux de nos utilisateurs, conduisant à une excellente expérience utilisateur.

Cet article a été publié à l'origine dans le numéro 279 de Net, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Acheter numéro 279 ou Abonnez-vous au NET .

Voulez-vous apprendre d'autres moyens de donner à vos sites un boost de vitesse?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018 — Jason Lengstorf donne à son atelier des stratégies de performance et des techniques de performance de première extrémité modernes pour générer New York du 25 avril 2018

Jason Lengstorf est un développeur, designer, auteur et ours convivial. Son objectif est sur l'efficacité et la performance des personnes, des équipes et des logiciels. À IBM, il crée des processus et des systèmes pour faire la bonne chose la chose facile ™. Du tout autre fois, il erre la Terre à la recherche de nouvelles collations.

Dans son atelier Stratégies de performance et techniques de performance frontales modernes à Générez New York du 25 au 27 avril 2018 , Jason affichera les participants à améliorer les temps de chargement perçus - depuis combien de temps il se sent comme il faut charger une page - ainsi que des temps de chargement réels, en utilisant uniquement des techniques de bout, notamment:

Le modèle de chargement de squelette
Meilleure chargement pour les actifs statiques
Chargement paresseux
Ouvriers du service
Mieux vaut construire des processus et plus encore!

Générer New York a lieu du 25 au 27 avril 2018. Obtenez votre billet maintenant .

Articles Liés:

4 conseils pour améliorer la performance de votre page
7 conseils d'experts pour clouer la performance Web
3 façons simples d'accélérer votre site web

[dix] [dix]

[dix]

Cache dans le booster de performance de la BBC

Couper la distance avec un cache

Concevoir avec la cache à l'esprit

Cache html pour une courte période

Actifs statiques de cache pour les âges

Derniers mots

Voulez-vous apprendre d'autres moyens de donner à vos sites un boost de vitesse?

Comment - Most Popular Articles

PUREREF: Comment utiliser l'outil de référence d'image

17 conseils pour dessiner des visages de manga

Dessine le pouvoir de contraste dans l'art

4 étapes pour utiliser des polices variables

Comment rendre des surfaces transparentes réalistes

Affinity Designer: Comment utiliser des contraintes

Créer des visuels 3D interactifs avec trois.js

Comment créer des cheveux de style manga en mouvement

Catégories