CDN (tartalomszolgáltató hálózat)

SEO

A lassú válasz csökkenti a feltérképezett oldalak számát. Nagy katalógusnál ez konkrét indexelési veszteség. A gyorsabb kiszolgálás közvetlenül javítja az LCP (Largest Contentful Paint) értékét, mert a hős-kép és a fő CSS hamarabb megérkezik.

AI-értelmezhetőség

A generatív keresők robotjai nem várnak sokáig. Ha az edge blokkolja őket, a tartalmad nem kerül be a válaszokba. A 403-as bot-válasz ugyanolyan súlyos, mint egy rossz robots.txt tiltás.

Üzlet

A külföldi látogató és a mobilhálózat a legérzékenyebb a távolságra. Magyar tárhelyről egy német vagy osztrák vásárló érezhetően lassabban tölt. A CDN ezt a különbséget tünteti el, kódváltoztatás nélkül.

• Vonatkozik: minden nyilvános oldalra, ahol van kép, CSS vagy JS. Vagyis gyakorlatilag mindenre.
• Kiemelten fontos: webshopoknál, sok képet használó oldalaknál és külföldi közönségnél.
• Kevésbé kritikus: kizárólag magyar közönségű, kisméretű bemutatkozó oldalnál. Ott egy jó magyar tárhely és helyes cache (gyorsítótár) fejléc is elég lehet.
• Nem kell: staging és fejlesztői környezetben. Ott a CDN csak megtéveszt, mert eltakarja az origin valódi sebességét.
• SaaS-platformon (Shopify, Unas, Shoprenter) a CDN a szolgáltatás része. Neked a saját feltöltött fájljaid és a külső scriptek maradnak.

1. Nyisd meg a böngésző devtools Network fülét, és tölts újra a gyorsítótár kikapcsolásával.
2. Kattints egy képre vagy CSS-fájlra, és nézd meg a Response Headers blokkot.
3. Keresd a CDN nyomait: cf-cache-status, x-cache, x-served-by, age, server.
4. Parancssorból ugyanez: curl -sSI https://pelda.hu/kep.webp.
5. Futtass egy PageSpeed Insights mérést. Az "Efficient cache lifetimes" és a szerverválasz tétele mutatja a hiányt.

Jó jel

• cf-cache-status: HIT vagy x-cache: HIT a statikus fájlokon.
• Az age fejléc értéke nő, tehát az edge tényleg tárol.
• Hosszú max-age a hash-elt fájlneveken.

Rossz jel

• Minden kérésnél MISS vagy BYPASS.
• Cache-Control: no-cache a képeken és a fontokon.
• Külföldi mérésnél sokkal lassabb TTFB (Time to First Byte), mint belföldiről.
• A botok 403-at kapnak, miközben a böngésző 200-at.

Mit néz ebből a riport

A riport a válaszfejlécekből állapítja meg, hogy van-e CDN a domain előtt, és milyen élettartammal tárol. Külön jelzi, ha a statikus fájlok cache-elhetőség nélkül mennek ki. Azt is vizsgálja, hogy egy AI-botként azonosított kérés kap-e rendes 200-as választ.

WordPress

1. Vidd a domaint egy CDN DNS-e alá, és kapcsold be a proxyt.
2. Állítsd az SSL-módot teljes (strict) értékre, hogy ne legyen átirányítási hurok.
3. Tegyél fel egy cache plugint (például LiteSpeed Cache vagy W3 Total Cache), és kösd össze a CDN purge funkciójával.
4. Zárd ki a cache-ből a /wp-admin, kosár és pénztár útvonalakat.
5. Ellenőrizd a bejelentkezett állapotot: admin-sáv mellett ne szolgáljon ki tárolt HTML-t.

Shopify

A platform saját CDN-en adja a cdn.shopify.com fájlokat, külön beállítás nincs. Amit te tudsz javítani: a feltöltött képek mérete, a sablon fölösleges scriptjei és a nem használt appok.

Unas

A kiszolgálás a platform feladata, nem kapcsolható külön CDN. Töltsd fel a képeket helyes méretben, és ne ágyazz be külső, lassú scripteket a sablonba.

Shoprenter

Itt is a platform kezeli a statikus fájlokat. A te felelősséged a sablonba írt egyedi CSS és JS, valamint a termékképek mérete.

Egyedi fejlesztés

1. Adj minden statikus fájlnak tartalom-hash-t a nevében (app.a1b2c3.js).
2. Ezekre állíts Cache-Control: public, max-age=31536000, immutable fejlécet.
3. A HTML-re rövid élettartam és stale-while-revalidate való.
4. Állítsd be a Vary: Accept-Encoding fejlécet a tömörítés mellé.
5. A deploy pipeline-ba tegyél automatikus cache purge lépést.
6. Engedélyezd a bot-szűrőben a kereső- és AI-botokat.

• CDN lassú origin elé: az első kérés ugyanolyan lassú marad, csak nehezebb debugolni.
• Nincs verziózott fájlnév: purge nélkül régi CSS marad kint, a látogató törött oldalt lát.
• Cache-Control: no-cache a képeken: az edge minden kérést továbbenged, elvész a nyereség.
• Bot-szűrő blokkolja a crawlereket: a tartalom gyors, de a keresők és a modellek nem érik el.
• Bejelentkezett oldal tárolása: rosszabb esetben más látogató kosarát vagy adatait kapja vissza valaki.
• CDN a képoptimalizálás helyett: a méretezetlen fotó az edge-ről is ugyanannyi bájt, modern formátum nélkül nincs érdemi javulás.
• Staging is a CDN mögött: a tesztoldalon félrevezető mérés jön ki, és indexelési kockázat is keletkezik.

Fejlécek ellenőrzése parancssorból:

curl -sSI https://pelda.hu/assets/app.a1b2c3.js | grep -iE 'cache|age|server|x-'

Tipikus jó válasz:

cache-control: public, max-age=31536000, immutable
cf-cache-status: HIT
age: 48213
vary: Accept-Encoding

Nginx oldalon így különítheted el a fájltípusokat:

location ~* \.(js|css|woff2|webp|avif)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location = /index.html {
  add_header Cache-Control "public, max-age=0, s-maxage=300, stale-while-revalidate=60";
}

A hosszú élettartam csak hash-elt fájlnévvel biztonságos. A HTML rövid s-maxage értéket kap, hogy a frissítés gyorsan kimenjen.