Hvad er HTML cache, og hvordan kan caching hjælpe din hjemmeside?
Cache er det at gemme data eller ressourcer på en server eller enhed for at opnå hurtigere levering til brugere. Dette kan omfatte caching af statiske filer, databaseforespørgsler, API-svar, html kode, billeder, video osv.
Caching hjælper med at reducere belastningen på serveren og forbedre ydeevnen for brugere ved at minimere den tid, det tager at hente eller generere data.
Caching typer – Mange forskellige cacher
Der findes virkelig mange forskellige måder at cache sider og indhold på. Herunder vil jeg forklare nogle af dem, hvad cache muligheden 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 cache server. 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 en webapplikationsaccelerator designet til at forbedre hastigheden og ydeevnen på en hjemmeside. Varnish fungerer som en mellemmand mellem en brugers browser og en webserver. Det gemmer ofte anmodede ressourcer, som billeder og CSS-filer, i hukommelsen for at kunne levere dem hurtigt uden at skulle gå tilbage til webserveren.
Browser caching
Brocser cache er processen med at gemme ressourcer 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 er processen med at gemme statiske filer 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 de anmodes om. 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åndterer 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 resultere 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ære 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/
