ESI förklarade: cache sidan, anpassa bitarna
Det klassiska cache-dilemmaet: sidan är 99% identisk för alla, men den 1% - användarnamnet, vagnen räknas - gör hela saken otäck. ESI är en av två vägar ut, och det är inte alltid den rätta.
Edge Side Inkluderar kan du cachelagra en sida i sin helhet samtidigt som du markerar små regioner som separata fragment kanten fyller i per besökare - en vagn räkna, en hälsning, en personlig banner. Varje fragment får sina egna cacheregler, så att en sida kan kombinera innehåll som cachas för en dag, innehåll som cachas för en minut och innehåll som aldrig cachas alls. Det huvudsakliga alternativet är att hämta dessa fragment på klientsidan, och vilken som vinner beror på om fragmentet påverkar layouten.
Här är en frustration som alla som cachar dynamiska webbplatser känner väl till. En sida är i princip identisk för alla besökare – samma layout, samma produkter, samma kopia – förutom ett litet personligt hörn. Varukorgen räknas i rubriken. Hejsan, Sara. Och på grund av det ena hörnet blir hela sidan markerad som omöjlig att spara och byggs om från grunden för varje begäran.
Det är en dålig handel, och det finns två etablerade vägar ut ur den. ESI är den äldre och den är fortfarande den bättre under specifika omständigheter, som är värda att veta exakt.
Så fungerar ESI
Ursprunget returnerar en sida som innehåller platshållartaggar istället för de dynamiska delarna:
<header>
<esi:include src="/fragments/cart-summary" />
</header>Den sidan – platshållare och allt – cachas vid kanten som ett normalt svar som kan cachas. När en besökare begär det, tjänar kanten det cachade skalet och hämtar varje fragment och ersätter det innan det skickas. Begäran om fragment innehåller besökarens cookies, så att den kan anpassas och ha sina egna cacheregler oberoende av sidan.
Den viktiga konsekvensen är att en sida nu kan innehålla flera olika cachestrategier samtidigt. Skalet cachar för en dag. Ett "trendande just nu" block cachar i sextio sekunder och delas av alla. Fragmentet i vagnen är personligt och cachas aldrig. Allt samlat på kanten, allt levererat som ett enda HTML-dokument.
ESI kontra hämta den i webbläsaren
Det uppenbara alternativet är att lämna ett tomrum i HTML-koden och fylla den med JavaScript efter att sidan har laddats. Det fungerar, det är enklare att bygga, och för många fall är det rätt svar.
Skillnaden som avgör det är om fragmentet finns i HTML när det når webbläsaren.
| ESI | Hämta på klientsidan | |
|---|---|---|
| Presenteras i initial HTML | Ja, ja | Nej |
| Orsakar layoutskift | Nej | Ja, om inte utrymmet är reserverat |
| Extra rundresa i webbläsaren | Ingen | Ett per fragment |
| Fungerar utan JavaScript | Ja, ja | Nej |
| Synlig för krypare | Ja, ja | Ibland, otillförlitligt |
| Komplex tillämpning | Kantkonfiguration krävs | Vanligt frontarbete |
| Långsamt fragment fördröjer sidan | Ja – det blockerar svaret | Nej sidan visas först |
Läs de två sista raderna tillsammans, eftersom de är handeln. ESI ger dig ett komplett dokument utan layoutskift och ingen extra tur och retur, på bekostnad av att sidan bara är så snabb som dess långsammaste fragment. Hämta på klientsidan ger dig en sida som återges omedelbart oavsett vilket innehåll som kommer för sent och flyttar saker.
Så oOm fragmentet påverkar layouten eller är viktigt för en sökrobot ska du använda ESI. En personlig hjältebanner som ändrar sidans höjd bör inte komma 400 millisekunder sent - det är ett kumulativt Layout Shift-problem som du har skapat avsiktligt. Om det är en liten detalj i ett hörn, hämta den på klientsidan. En korgräkningsbricka i rubriken rättfärdigar inte kantkonfiguration.
Felläget att designa mot är ett fragment som hänger. Eftersom ESI monteras innan du svarar, gör en fragmentslutpunkt som tar tre sekunder hela sidan tar tre sekunder - även om skalet var en cacheträff. Ställ in en aggressiv timeout på varje fragment och definiera vad som återger om det inte uppfylls, så en kämpande fragmenttjänst försämras till en saknad vagnräkning snarare än en oanvändbar webbplats.
Där den förtjänar sin plats
Bra passform
- Sidor med hög trafik och ett eller två personliga inslag
- Fragment som påverkar layouten ovanför vikningen
- Avsnitt med verkligt olika färskhetsbehov på en sida
- Webbplatser som måste fungera utan JavaScript
Inte värt det
- Sidor som är personliga överallt
- Små märken och räknare i hörnen
- Sidor med låg trafik där cachelagring sparar lite
- Allt med en enkel apport hanterar tillräckligt
ESI är ett specialiserat verktyg och det ska kännas som ett sådant. Om du når det på en sida där tre fjärdedelar av innehållet är per besökare, kämpar du mekanismen - den sidan är verkligen dynamisk och bör behandlas som sådan.
Vanliga frågor
Vad är ESI (Edge Side Includes)?
ESI är ett markeringsspråk som låter en cachad sida innehålla platshållartaggar för dynamiska fragment, som CDN-kanten hämtar och ersätter innan svaret returneras. Detta gör att en sida kan cachas i sin helhet medan små personliga regioner - en vagn räkna, en användare hälsning - monteras per besökare, var och en med sina egna oberoende cache regler.
När ska jag använda ESI i stället för en apphämtning på klientsidan?
Använd ESI när fragmentet påverkar layouten eller behöver vara synligt för sökrobotar, eftersom ESI-innehåll finns i HTML-koden som når webbläsaren och inte orsakar någon layoutförskjutning eller ytterligare rundtur. Använd en klientsida för små detaljer som inte påverkar layouten, där enkelheten i vanlig front-end kod uppväger fördelen och en sen ankomst är ofarlig.
Har ESI sakta ner sidan leverans?
Det kan den, eftersom fragment samlas innan svaret skickas, så sidan är bara så snabb som dess långsammaste fragment. En slutpunkt för ett fragment som hänger kommer att försena en sida som annars var en cacheträff. Konfigurera alltid en kort timeout per fragment tillsammans med reservinnehåll, så ett misslyckat fragment försämras graciöst istället för att blockera hela svaret.
Kan olika delar av en sida ha olika cachetider med ESI?
Ja, och det är dess främsta fördel. Sidskalet kan cachas för en dag, ett trendande produktfragment i sextio sekunder och delas mellan alla besökare och ett vagnfragment cachas inte alls. Kanten sätter ihop dem till ett enda HTML-svar, så att ett dokument kombinerar flera cachelagringsstrategier.
Inramningen är värd att behålla: ESI är inte en cacheteknik så mycket som en monteringsteknik. Det låter dig sluta behandla en sida som en enda cachebar enhet och börja behandla den som flera - vilket vanligtvis är en mycket mer exakt beskrivning av vad sidan faktiskt är.
Se hur NordicCDN gör detta för din webbplats:
Mads har arbetat inom IT – mestadels som värd – sedan han var 16. Han tog tidigt del i ett SaaS-företag och hjälpte till att växa fram till förvärvet av Visma, har byggt och drivit datacenternätverk och fungerat som CTO för ett danskt datacenter. Han startade NordicCDN för att göra snabb och säker infrastruktur enkel att använda.
