cache inn på BBCs ytelse Booster

Sep 15, 2025

hvordan

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

[1. 3]

I fjor under en brukertestingssesjon for BBC News-appen, fikk en av brukerne en kommentar som virkelig har sittende fast med meg. De erklærte: "Jeg liker å flyte". Jeg tror ikke det er et bedre sammendrag av hva ytelsen betyr for våre brukere. På en rask app eller nettside kan brukeren strømme rundt, samhandle og engasjere seg med innholdet.

Flytende opplevelser er også gode for nettstedseiere. En raskt flytende opplevelse hjelper brukerne med å nå sine mål, og i sin tur oppnår vi våre organisasjoneres mål. Amazon og andre har vist den sterke sammenhengen mellom ytelse og brukeraktivitet: Som ventetiden på sider går ned, går hvor mye tid og penger brukeren bruker opp.

Les mer: Nordvpn Review

Kutt avstanden med en cache

Caches er opprettet når en liten mengde av noe lagres nærmere hvor det er nødvendig, normalt for å hindre omarbeid. For eksempel, hvis jeg spiser skittler, har jeg en tendens til å helle noen i hånden min og deretter spise derfra. I virkeligheten skaper jeg en cache av skittler i hånden min, da det er raskere å spise dem på den måten enn å gå tilbake til pakken.

Dette samme mønsteret brukes i teknologi. Det er tre caches vi må vurdere:

Server caches: Bufret data på serveren, for eksempel resultatene av database spørringer
Network caches: caches bygget inn i nettverket, noen ganger av nettstedet operatør (kjent som en omvendt proxy cache), men oftere av ISPs eller andre nettverksleverandører
Browser Cache: Nettleseren lagrer filer på brukerens harddisk for gjenbruk av brukeren

Caching kan gjøre for en stor prestasjonsforbedring; På BBC har jeg sett caching øker ytelse mer enn 20 ganger i produksjonskode. Det er gunstig for nettstedoperatører også. Med caching kan flere brukere støttes av samme maskinvare. Dette reduserer kostnadene i maskinvare per bruker og reduserer dermed nettstedets driftskostnader.

Design med cachen i tankene

For å være effektiv, vil vi bruke bufret data så mye som mulig. For å forlenge Skittles analogi, hvis jeg vil ha en blå skittle, men jeg har ikke noen blå skittler i hånden min (aka min cache), jeg må gå tilbake til pakken. Dette er kjent som "Hit Rate". Det er en "hit" når varen er i hurtigbufferen og en "savner" når det ikke er det. Vi ønsker en høy hit rate slik at cachen tar det meste av lasten.

En av de enkleste metodene for å øke hitraten er å redusere variasjonen. Stretching min skittles analogi litt, forestill deg om alle skittler var røde. På den måten ville noen skittle i hånden min være en cache hit; Jeg ville aldri trenge å gå tilbake til pakken. Påfør dette på nettet, hvis vi kan gi samme side til så mange brukere som mulig, blir cachen mer effektiv, da flere forespørsler vil slå hurtigbufferen.

Cache html for en kort stund

A 30-second cache of the BBC News homepage displaying regularly updated content — Nyhetshjemmesiden bruker en 30-sekunders maksimal-alders cache header for å få innhold foran brukere raskt uten for mye belastning

Så det er teorien. La oss bli praktisk. La oss begynne med å se på Caching forespørselen om HTML. Caching av alle filtyper styres ved hjelp av HTTP-overskrifter. Overskriftene er metadata (data om data) sendt fra serveren til nettleseren og synlig for all nettverksmaskinvare i mellom. For å fortelle verden har det tillatelse til å cache våre sider og dele den cachen mellom brukere, mener vi følgende topptekst:

Cache-Control: public, max-age=30

Her har vi også satt en tidsbegrensning: Maksimum tid Cachen bør gjenbruke denne siden for, i løpet av sekunder. For dette eksemplet har jeg satt den til 30 sekunder.

Ved å sette siden til 'Public', vil brukerens nettleser (og hvilken som helst maskinvare underveis) holde en kopi. Så den første sidelasten vil gjøre en forespørsel, men alle siden laster etter det, vil gjenbruke det opprinnelige svaret, til fristen er nådd.

Effekten av nettverksmaskinvare underveis kan være dyp. Mange store nettverk (for eksempel ISPer) vil ha en cache som deles mellom brukere. Mobiloperatører bruker også denne teknikken tungt - for eksempel til cache og rekomprimerer bilder som serveres over 3G. Nettstedoperatører kan også plassere en HTTP-cache foran deres tjeneste. Dette er hva vi har gjort på BBC.

Cache statiske eiendeler i årevis

A longer-term cache of BBC iPlayer displaying content that is updated only periodically — BBC iPlayer butikker Statiske eiendeler i et år - endringer i nettadressen sørger for at brukerne ser nye versjoner omgående

En teknikk vi bruker mye på BBC, er å behandle statiske eiendeler (som bilder, CSS og skript) annerledes på hvordan vi behandler sider. Caching HTML-sider for lenge kan resultere i brukere som mangler innholdsoppdateringer, men vi kan dra nytte av denne oppførselen når det gjelder statiske eiendeler.

På BBC sender vi alle statiske eiendeler med en maksimal alder på 31.536.000 sekunder satt i cache header. Dette sikrer at eiendelene er bufret i 365 dager. I virkeligheten blir eiendeler bare forespurt en gang. Dette er bra for ytelse, men dårlig for fleksibilitet, da endringer i den eiendelen vil ta lang tid å komme til brukeren.

For å kunne jobbe rundt dette, hver gang vi slipper en ny versjon av en side, endrer vi nettadressen der eiendelene holdes. Dette trikset betyr at nye endringer blir satt foran brukere umiddelbart, men vi får fortsatt de samme ytelsesfordelene.

Endelige ord

Caching for å forbedre nettstedets ytelse vil igjen redusere driftskostnadene for våre nettsider og bevare brukerens flyt, noe som fører til en flott brukeropplevelse.

Denne artikkelen ble opprinnelig publisert i utgave 279 i Net, verdens bestselgende magasin for webdesignere og utviklere. Kjøpe utgave 279. eller Abonner på netto .

Ønsker du å lære andre måter å gi nettstedene dine på en hastighetsøkning?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018 — Jason Lengstorf gir sin verksted moderne front-end ytelsesstrategier og teknikker på genererer New York fra 25 27. april 2018

Jason Lengstorf er en utvikler, designer, forfatter og vennlig bjørn. Hans fokus er på effektivitet og ytelse av mennesker, lag og programvare. På IBM skaper han prosesser og systemer for å gjøre det rette den enkle tingen ™. På alle andre ganger vandrer han jorden på jakt etter nye og bedre snacks.

I hans verksted moderne front-end ytelsesstrategier og teknikker på Generer New York fra 25-27 april 2018 Jason vil vise deltakere Hvordan forbedre oppfattede lastetider - hvor lenge det føles som det tar å laste inn en side - så vel som faktiske lastetider, ved hjelp av bare front-end-teknikker, inkludert:

Skjelettet Laster mønsteret
Bedre lasting for statiske eiendeler
Lat lasting
Servicearbeidere
Bedre bygge prosesser og mer!

Generer New York finner sted fra 25-27 april 2018. Få din billett nå .

Relaterte artikler:

4 tips for å forbedre sidens ytelse
7 ekspert tips for spiking web ytelse
3 enkle måter å øke hastigheten på nettstedet ditt

cache inn på BBCs ytelse Booster

Kutt avstanden med en cache

Design med cachen i tankene

Cache html for en kort stund

Cache statiske eiendeler i årevis

Endelige ord

Ønsker du å lære andre måter å gi nettstedene dine på en hastighetsøkning?

hvordan - Mest populære artikler

Bygg en klientportal med Wordpress

Steg-for-trinn: Hvordan etterligne oljemaling i Corel Painter

Lag skyer med fumefx for 3ds maks

Colourise Greyscale Arbeid i Photoshop

Legg til en glitcheffekt på nettstedet ditt

Alder et fotografi i Photoshop CC

Få tak i det våt-i-våte malerieteknikken

Hvordan forbedre ytelsen til e-handelsplasser

Kategorier