Hvad er HTML cache, og hvordan kan caching hjælpe din hjemmeside?

Caching aflaster serveren og gør siden hurtigere, fordi data ikke skal hentes eller laves forfra hver gang.

Cachingtyper – Mange forskellige cacher

Der findes virkelig mange forskellige måder at cache sider og indhold på. Herunder vil jeg forklare nogle af dem, hvad cachemuligheden bruges til samt hvad det er. God læsning og håber du lærer noget om caching og cacher.

HTML caching

HTML Cache handler om caching af de statiske HTML-filer på en hjemmeside. Når en bruger besøger hjemmesiden, gemmes en kopi af HTML-filen på brugerens enhed eller på en cacheserver. Dette gør det lettere og hurtigere at indlæse hjemmesiden igen, da den ikke behøver at generere HTML-filen hver gang.

Varnish caching

Varnish Cache er et program, der gør hjemmesiden hurtigere. Varnish fungerer som en mellemmand mellem en brugers browser og en webserver. Det gemmer de filer, der ofte bliver hentet, som billeder og CSS-filer, i hukommelsen for at kunne levere dem hurtigt uden at skulle gå tilbage til webserveren.

Browser caching

Browsercache betyder, at filer gemmes på brugerens enhed, når de besøger en hjemmeside. Dette omfatter html, billeder, scripts, CSS-filer osv. Gemte ressourcer kan genbruges, når brugeren besøger hjemmesiden igen, hvilket resulterer i hurtigere indlæsningstider.

Statisk caching

Static cache betyder, at statiske filer gemmes på en server eller et CDN (Content Delivery Network). Disse filer ændres sjældent, og ved at gemme en kopi af dem kan de hurtigt leveres til brugere, når der bliver spurgt efter dem. Eksempler på statiske filer inkluderer billeder, scripts, CSS-filer osv.

Object caching

Object cache handler om caching af objekter eller data i hukommelsen for at opnå hurtigere loadtid. Dette kan omfatte ofte brugte databasedata, API-svar eller andre objekter, der tog tid at hente eller beregne. Ved at gemme en kopi af disse objekter i hukommelsen kan de leveres hurtigere uden at skulle gennemgå den oprindelige proces til at hente eller beregne dem igen. Populære værktøjer til lige netop det er Redis object caching og Memcached.

Du kan derfor ikke rigtig leve uden den ene eller anden form for caching når du gerne vil have en hurtigere hjemmeside.

Hvorfor er HTML cache godt?

HTML cache er godt fordi det gør at siders loadtid og TTFB (Time To First Byte) bliver meget lavere, og browseren derfor begynder sin rendering betydeligt hurtigere. Det opper også hele serverens performance, fordi serveren langt hurtigere er færdig med at behandle siden, og det betyder at hjemmesiden/serveren kan håndtere flere brugere på samme tid.

Et eksempel på hvad html cache gør:

Uden HTML cache ville kim-tetzlaff.dk have en TTFB på ca. 530ms, mens den med HTML cache har en TTFB på ca. 100ms. Selv hvis du har en side hvis TTFB uden HTML cache på som loader på 7000ms, vil den med html cache komme ned under de 200ms.

Hvad gør HTML cache dårligt?

Der er ikke meget der gør HTML cache dårligt, dog er der et punkt som gør det dårligt. Nemlig at folk tror at hvis man har en høj TTFB på 7000ms, så skal man bare smide HTML cache på siden for at løse netop det. Det er en stor fejl, for har man en høj TTFB, har man også større problemer med hjemmesidens hastighed som bør blive løst.

Hvordan fungerer HTML cache?

HTML cache fungerer sådan at når en bruger besøger siden, gemmes HTML svaret i en statisk fil på serveren. Næste gang en bruger så besøger den selv samme side, så tager serveren fat i den statiske fil frem for at gå gennem CMS, database og meget mere for at sende HTML svaret til browseren.

Preload html cache og browser cache

En god metode til at gøre så en side loader hurtigere hos brugeren, er ved at preloade sider og deres indhold. Dette kan både være interne (sider på ens egen hjemmeside) og eksterne sider (sider på andre hjemmesider) man gerne vil preloade. Når man preloader en side, laves der både en page caching på serveren, hvis det er opsat, men der sker også browsercaching, hvilket resulterer i at siden allerede ligger hos brugeren til hvis nu de ønsker at besøge den. Den vil derfor loade super hurtigt.

Metoder til preload af cache

Linkpreloading: denne metode er meget brugt, og alt efter hvordan den er lavet og hvordan den preloader sider, så gemmes der en version på serveren og i browserens cache.

WordPress plugins til HTML caching/Page Caching

Der findes mange plugins som kan hjælpe dig med at lave lige netop HTML caching, men vær obs på at du stadig skal undersøge om der eventuelt ligger andre fejl på siden, som skaber flaskehalse, da HTML caching i mange tilfælde skjuler lige netop det, og så opdager du det først når det er for sent og siden ligger ned.

• WP Rocket pluginet: https://wp-rocket.me/

Skrevet af

Kim Tetzlaff

Programmør og webudvikler · Kim Tetzlaff ApS

• Koder siden 1995
• HTML siden 1996
• WordPress siden 2007
• Oplægsholder, WordCamp Denmark 2013

Hvem

Skrevet af mig, der laver arbejdet: hastighedsoptimering, teknisk SEO og udvikling for egne kunder.

Hvordan

Bygger på den måde, jeg forklarer begrebet på over for kunder i det daglige arbejde. Udgivet 4. januar 2019, senest opdateret 31. oktober 2026.

Hvorfor

Skrevet så du kan forstå ordet, når det dukker op i en rapport eller et tilbud.

Kilder i artiklen

• wp-rocket.me

Mere om mig →Spørgsmål til artiklen? Skriv til mig →