Miért érdemes CDN-t használni a képekhez?

Amikor egy látogató Tokióból nyitja meg az oldalát, és a szerver Párizsban van, minden képnek több ezer kilométernyi tengeralatti kábelen kell átjutnia, mielőtt megjelenik a képernyőjén. Az eredmény kiszámítható: magas késleltetés, lassan töltődő képek és növekvő visszafordulási arány. Pontosan ezt oldja meg a CDN.

Mi is valójában a CDN

A CDN a Content Delivery Network rövidítése, magyarul tartalomkézbesítési hálózat. Világszerte földrajzilag elosztott szerverek hálózata, amelynek feladata a statikus fájlok — képek, videók, CSS, JavaScript — másolatainak tárolása, és azok kiszolgálása a kérést küldő látogatóhoz legközelebb lévő szerverről.

A Cloudflare több mint 300 jelenléti pontot (PoP) üzemeltet világszerte. A Fastly-nek több mint 60 van, az Amazon CloudFrontnak több mint 400. Amikor valaki São Paulóból tölti be az oldalát, nem az amszterdami szerverhez csatlakozik: a hozzá legközelebb lévő CDN-csomóponthoz kapcsolódik, amely milliszekundumok alatt kézbesíti a képet.

Amikor egy képet először kérnek le egy adott régióból, a CDN az origin szerverről lekéri és helyben gyorsítótározza. Az adott régióból érkező összes további kérést közvetlenül a gyorsítótárból szolgálják ki. Az origin szerver egyáltalán nem kerül bevonásra.

A valódi teljesítményhatás

Az adatok tanulmányonként eltérnek, de a nagyságrend következetes: a CDN 40-70%-kal csökkenti a képek betöltési idejét az origin szervertől távol lévő látogatók számára. Nemzetközi közönségű webhelynél ez a különbség egy 1,2 másodperc alatt megjelenő oldal és egy 3,8 másodpercig töltő oldal között.

Nem csupán felhasználói kényelemről van szó. A Google 2021 óta beépíti a Core Web Vitals-t a rangsorolási algoritmusába, és a három fő metrika közül kettő — a Largest Contentful Paint (LCP) és a Cumulative Layout Shift (CLS) — közvetlenül függ a képek betöltési sebességétől. A 2,5 másodperc feletti LCP rontja a helyezéseket. A CDN az egyik leghatékonyabb eszköz az e küszöb alá kerüléshez.

Amit a CDN a gyorsítótáron túl tesz

A modern CDN-ek sokkal többet tesznek, mint fájlokat tárolnak és kiszolgálnak. A Cloudflare Images, a Cloudinary és az imgix mind kínál menet közbeni képtranszformációt: automatikus átméretezés, konverzió WebP-re vagy AVIF-re az észlelt böngésző alapján, adaptív tömörítés a kapcsolat minőségétől függően. Ahelyett, hogy ugyanannak a képnek tíz verzióját kellene fenntartani a szerveren, egyszer tölt fel, a CDN pedig minden kéréshez a megfelelő változatot generálja.

Egy másik gyakran alábecsült előny: védelem a forgalmi csúcsok ellen. Ha az egyik cikke virálissá válik és egy óra alatt 50 000 látogatót vonz, az origin szerver valószínűleg nem látja 200 kérésnél többet — a többit a CDN gyorsítótára nyeli el. CDN nélkül ez a fajta csúcs elegendő lehet egy megosztott tárhelyszolgáltatás vagy egy kis VPS leállításához.

HTTP/2 és tartós kapcsolatok

A CDN-ek általánosan támogatják a HTTP/2-t, és egyre inkább a HTTP/3-at (QUIC) is — olyan protokollokat, amelyek lehetővé teszik a multiplexálást: több fájl párhuzamos küldését egyetlen TCP-kapcsolaton keresztül, nem pedig sorban egymás után. Egy 20 képet tartalmazó oldalon a HTTP/1.1 és a HTTP/2 közötti betöltési idő különbség elérheti a 60%-ot. A megosztott tárhely nem feltétlenül támogatja a HTTP/2-t, vagy rosszul konfigurálja: a CDN-ek alapértelmezés szerint helyesen implementálják.

Melyik CDN-t válassza felhasználás szerint

Korlátozott költségvetésű személyes webhelyhez vagy bloghoz a Cloudflare ingyenes csomagja lefedi a legtöbb igényt. Az ingyenes szinten nem transzformálja natívan a képeket, de gyorsítótározza és a globális hálózatáról kiszolgálja őket.

Sok képet kezelő platformokhoz — e-kereskedelmi oldalak, portfóliók, hírportálok — a Cloudinary vagy az imgix a referencia. Mindkettő hatékony menet közbeni transzformációkat, teljes API-t és natív integrációt kínál a főbb keretrendszerekkel. A Cloudinary könnyebben elérhető a nem technikai felhasználók számára; az imgix-et a fejlesztőcsapatok inkább a rugalmassága miatt részesítik előnyben.

Az Amazon CloudFront és a Fastly összetettebb infrastruktúrákhoz szól, ahol a CDN egy nagyobb DevOps-folyamat egyik összetevője.

CDNJelenléti pontokKéptranszformációIngyenes szintIdeális
Cloudflare300+Igen (fizetős)IgenMinden méretű webhely
Cloudinary200+Igen (natív)Igen (25 kredit/hó)E-kereskedelem, média
imgix80+Igen (natív)NemFejlesztőcsapatok
Amazon CloudFront400+Lambda@Edge-en keresztül12 hónap (AWS free tier)AWS infrastruktúra
Fastly60+Fastly IO-n keresztülNemNagy platformok

A valódi költség

A CDN-ek árazási modellje általában az átvitt adatmennyiségen (havonta GB vagy TB) és a kérések számán alapul. A Cloudflare figyelemre méltó kivétel: az ingyenes csomag nem számít fel sávszélességet, ami kis webhelyek számára nyilvánvaló választássá teszi. A Cloudinary "kreditekben" számol fel díjat, amelyek lefedik a tárolást, a transzformációkat és a sávszélességet — az ingyenes szint 25 havi kreditet tartalmaz, elegendő egy közepes méretű webhelyhez.

Egy havonta 10 GB képet kiszolgáló webhely esetén a hagyományos CDN, például a CloudFront költsége az európai régióban havi körülbelül 0,85 dollár. Ez elhanyagolható a teljesítménynövekedéshez és az origin szerver terheléscsökkentéséhez képest.

A CDN nem luxus, amely a nagy platformok számára van fenntartva. Amint a közönség túllép a közvetlen földrajzi zónán, vagy az oldalak több mint öt-hat képet tartalmaznak, az előnyök mérhetők, a költség pedig sokszor nulla vagy ahhoz közel van.