Cache in op de prestatiebooster van de BBC

Sep 11, 2025

Procedures

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

Vorig jaar tijdens een gebruikerstestsessie voor de BBC News-app, maakte een van de gebruikers een opmerking die echt bij mij vastzit. Ze verklaarden: "Ik hou van stromen". Ik denk niet dat er een betere samenvatting is van welke prestatie voor onze gebruikers betekent. Op een snelle app of website kan de gebruiker rondstromen, interageren en deelnemen aan de inhoud.

Stroeiende ervaringen zijn ook goed voor eigenaren van de site. Een snel stromend ervaring helpt gebruikers hun doelen te bereiken en op zijn beurt bereiken we de doelen van onze organisaties. Amazon en anderen hebben de sterke link aangetoond tussen prestaties en gebruikersactiviteit: omdat het wachten op pagina's daalt, gaat de hoeveelheid tijd en geld dat de gebruiker doorbrengt omhoog.

Lees meer: Nordvpn Review

Snijd de afstand met een cache

Caches worden gemaakt wanneer een kleine hoeveelheid van iets dichter bij de waarheid is opgeslagen, normaal gesproken om herwerken te voorkomen. Als ik bijvoorbeeld Skittles eet, heb ik de neiging om een paar in mijn hand te gieten en dan van daar te eten. In feite maak ik een cache van kegels in mijn hand omdat het sneller is om ze op die manier te eten dan terug te gaan naar het pakket.

Ditzelfde patroon wordt gebruikt in technologie. Er zijn drie caches die we moeten overwegen:

Server Caches: Cache-gegevens op de server, zoals de resultaten van databasequery's
Netwerkcaches: Caches ingebouwd in het netwerk, soms door de site-operator (bekend als een omgekeerde proxy-cache), maar vaker door ISPS of andere netwerkproviders
Browsercache: de browser slaat bestanden op de harde schijf van de gebruiker voor hergebruik door de gebruiker

Caching kan zorgen voor een enorme prestatieverbetering; Bij de BBC heb ik Caching-prestaties meer dan 20 keer in productiecode gezien. Het is ook gunstig voor site-exploitanten. Met caching kunnen meer gebruikers worden ondersteund door dezelfde hardware. Dit vermindert de kosten in hardware per gebruiker en vermindert daarom de bedrijfskosten van de website.

Ontwerp met de cache in gedachten

Om effectief te zijn, willen we zoveel mogelijk cached-gegevens gebruiken. Om de Skittles-analogie uit te breiden, als ik een blauwe kegel wil, maar ik heb geen blauwe kegels in mijn hand (aka mijn cache), ik zal terug moeten gaan naar het pakket. Dit staat bekend als de 'hit tary'. Het is een 'hit' wanneer het item in de cache en een 'miss' is wanneer het dat niet is. We willen een hoge hit tarief, zodat de cache het grootste deel van de lading neemt.

Een van de eenvoudigste methoden om de hitsnelheid te verhogen is om de variatie te verminderen. Het uitrekken van mijn Skittles-analogie Een beetje, stel je voor dat alle kegels rood waren. Op die manier zou elke kegel in mijn hand een cache-hit zijn; Ik zou nooit meer naar het pakket moeten gaan. Dit op het web toepassen, als we dezelfde pagina kunnen geven aan zoveel mogelijk gebruikers, wordt de cache effectiever omdat er meer verzoeken de cache zullen raken.

Cache HTML voor een korte tijd

A 30-second cache of the BBC News homepage displaying regularly updated content — De Nieuw-startpagina maakt gebruik van een maximale cache-kop van 30 seconden om de inhoud snel zonder te veel belasting te krijgen

Dus dat is de theorie. Laten we praktisch worden. Laten we beginnen met het bekijken van het caching van het verzoek om de HTML. Caching van alle bestandstypen wordt bestuurd met behulp van HTTP-headers. De headers zijn meta-gegevens (gegevens over gegevens) die zijn verzonden van de server naar de browser en zichtbaar voor alle netwerkhardware in -tussen. Om de wereld te vertellen heeft het toestemming om onze pagina's te cachen en om die cache tussen gebruikers te delen, stellen we de volgende header in:

Cache-Control: public, max-age=30

Hier hebben we ook een tijdslimiet ingesteld: de maximale hoeveelheid tijd waarop de cache deze pagina moet hergebruiken voor, in seconden. Voor dit voorbeeld heb ik het tot 30 seconden ingesteld.

Door de pagina in te stellen op 'Public', blijft de browser van de gebruiker (en elke hardware onderweg) een kopie. Dus de eerste lading van de pagina zal een verzoek indienen, maar alle paginabladers zullen de oorspronkelijke reactie hergebruiken, totdat de tijdslimiet is bereikt.

Het effect van netwerkhardware onderweg kan diep zijn. Veel grote netwerken (zoals ISP's) hebben een cache die wordt gedeeld tussen gebruikers. Mobiele operators gebruiken deze techniek ook zwaar - bijvoorbeeld, bijvoorbeeld om beelden te cachen en opnieuw te treffen die meer dan 3G worden geserveerd. Site-operators kunnen ook een HTTP-cache voor hun service plaatsen. Dit is wat we hebben gedaan in de BBC.

Cache statische activa voor eeuwen

A longer-term cache of BBC iPlayer displaying content that is updated only periodically — BBC IPlayer Stores Statische activa voor een jaar - wijzigingen aan de URL zorgt ervoor dat gebruikers nieuwe versies zien prompt

Een techniek die we veel gebruiken bij de BBC is om statische activa (zoals afbeeldingen, CSS en scripts) anders te behandelen op hoe we pagina's behandelen. Caching HTML-pagina's te lang kunnen resulteren in gebruikers die inhoudupdates ontbreken, maar we kunnen profiteren van dit gedrag als het gaat om statische activa.

Bij de BBC sturen we alle statische activa met een maximale leeftijd van 31.536.000 seconden in de cache-header. Dit zorgt ervoor dat de activa 365 dagen in de cache worden opgeslagen. In feite worden activa slechts één keer aangevraagd. Dit is goed voor prestaties, maar slecht voor flexibiliteit als veranderingen in die activa duurt lang om bij de gebruiker te komen.

Om dit te kunnen werken, elke keer dat we een nieuwe versie van een pagina vrijgeven, veranderen we de URL waar de activa worden bewaard. Deze truc betekent dat nieuwe wijzigingen onmiddellijk voor gebruikers worden geplaatst, maar we krijgen nog steeds dezelfde prestatievoordelen.

Laatste woorden

Caching Om de prestaties van de website te verbeteren, zal op hun beurt de lagere bedrijfskosten voor onze websites opdagen en onze gebruikersstroom behouden, wat leidt tot een geweldige gebruikerservaring.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 279 van net, 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Kopen uitgave 279 of Abonneer u op NET

Wilt u andere manieren leren om uw sites een snelheidsboost te geven?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018 — Jason Lengstorf geeft zijn workshop moderne front-end-prestatiestrategieën en -technieken bij Generate New York van 25 27 april 2018

Jason Lengstorf is een ontwikkelaar, ontwerper, auteur en vriendelijke beer. Zijn focus ligt op de efficiëntie en prestaties van mensen, teams en software. Bij IBM creëert hij processen en systemen om het juiste ding te maken ™. Op andere tijden dwaalt hij de aarde op zoek naar nieuwe en betere snacks.

In zijn werkplaats Moderne front-end-prestatiestrategieën en -technieken bij Genereer New York van 25-27 april 2018 Jason vertoont de aanwezigen hoe de waargenomen laadtijden te verbeteren - hoe lang het voelt alsof het nodig is om een pagina te laden - evenals daadwerkelijke laadtijden, met alleen front-end-technieken, waaronder:

Het laadpatroon van de skelet
Betere laden voor statische activa
Trage voortgang
Servicemedewerkers
Betere bouwen van processen en meer!

Genereer New York vindt plaats van 25-27 april 2018. KRIJG NU

Gerelateerde artikelen:

4 tips om de prestaties van uw pagina te verbeteren
7 Deskundige tips voor het spijkeren van webprestaties
3 eenvoudige manieren om uw website te versnellen

Cache in op de prestatiebooster van de BBC

Snijd de afstand met een cache

Ontwerp met de cache in gedachten

Cache HTML voor een korte tijd

Cache statische activa voor eeuwen

Laatste woorden

Wilt u andere manieren leren om uw sites een snelheidsboost te geven?

Procedures - Meest populaire artikelen

Compositing in animatie: leer de basis

Merk typografie: een complete gids

Hoe een kat te tekenen

Voeg meertalige ondersteuning toe aan Angular

Hoe te selecteren met Photoshop's Lasso-tools

Master The Mes Tool

De ultieme gids voor het compositeren van afbeeldingen in Photoshop

Maak een harig 3D-personage van nul

Categorieën