Weboldalad sebességének növelése: Betűtípusok helyi tárolása a gyorsabb betöltésért és jobb SEO-ért

A betűtípusok helyi tárolása azt jelenti, hogy a weboldaladon használt betűtípus fájlokat nem külső szolgáltatótól, hanem saját tárhelyedről, szerveredről vagy saját CDN-edről szolgálod ki. Ha helyesen alkalmazod, csökkentheti a DNS-keresések, TLS-kézfogás és külső kérések miatti késleltetést, így gyorsabbá teszi az oldal betöltődését; különösen a Core Web Vitals mutatók, a felhasználói élmény és a SEO szempontjából hozhat mérhető előnyt. A legjobb eredmény érdekében csak a szükséges betűvastagságokat használd, részesítsd előnyben a WOFF2 formátumot, preloadold a kritikus betűtípusokat, és a CSS-ben alkalmazd a font-display: swap beállítást.

Sok weboldal a tervezés során észrevétlenül használ Google Fonts, Adobe Fonts vagy a témával érkező távoli betűtípus-hivatkozásokat. Bár elsőre kényelmes megoldásnak tűnik, minden látogató böngészőjében plusz domain név feloldás, kapcsolat létrehozás és fájlletöltés zajlik le. Mobil hálózatokon 100-300 ms kis késleltetésnek tűnik, de több betűtípus család és súly esetén ezek összeadódva jelentősen lassíthatják az oldal megjelenését. Ezért a helyi betűtípus-tárolás nem csupán egy technikai részlet, hanem a gyorsabb, kontrolláltabb és fenntarthatóbb webes teljesítmény kulcsa.

Ebben az útmutatóban végigvesszük, mit jelent a betűtípusok helyi tárolása, mikor érdemes alkalmazni, hogyan valósítható meg WordPress vagy egyedi fejlesztésű oldalak esetén, valamint mely hibákat kerüld el a 2026-os SEO szabványok szerint. Emellett gyakorlati tippeket adunk, hogyan tervezd meg a betűtípus-optimalizációt egy gyors és biztonságos Hostragons tárhelyen. A hosting kiválasztása az alapja a teljesítménynek; a betűtípus-optimalizáció pedig a finomhangolás, amivel még tovább javíthatod azt. További infrastruktúra lehetőségekért nézd meg a Hostragons web hosting csomagok ajánlatát.

Mi az a betűtípusok helyi tárolása?

A betűtípusok helyi tárolása azt jelenti, hogy a weboldal által használt betűtípus fájlokat a saját szervereden vagy tárhelyeden tárolod, és onnan szolgálod ki a látogatóknak. Például ahelyett, hogy Google Fonts-ról hívnád be az Inter, Roboto vagy Montserrat betűtípusokat, letöltöd a szükséges WOFF2 fájlokat, és feltöltöd őket a weboldalad /fonts vagy /assets/fonts könyvtárába. Ezután a CSS fájlban az @font-face szabállyal megadod ezek elérési útját. Így a böngésző az oldal betöltésekor nem külső szolgáltatókhoz fordul, hanem közvetlenül a te domain-edről tölti be a betűtípusokat.

Ez a megközelítés különösen fontos teljesítmény, adatvédelem és kontroll szempontjából. Te határozod meg, milyen formátumban szolgálod ki a betűtípusokat, milyen cache idővel, mely súlyokat töltöd be, illetve mely oldalakon használod őket. Ha például csak 400 és 700 súlyokat használsz, akkor nem kell feleslegesen tárolnod 300, 500, 600 vagy 800 súlyú fájlokat. Ezáltal csökken a teljes fájlméret és a CSS is átláthatóbbá válik.

Gyakorlati szinten a self-host fonts megvalósításának három fő összetevője van: optimalizált betűtípus fájl, helyes CSS definíció és hatékony szerver oldali cache-elés. Ha ezek közül valamelyik hiányzik, a várt sebességnövekedés korlátozott lehet. Például ha a WOFF2 helyett régi TTF fájlt használsz, akkor jóval nagyobb lesz a fájlméret. Ha a cache fejlécek nem megfelelőek, a látogató minden oldalbetöltéskor újra letölti ugyanazt a betűtípust. Ha pedig a preload hibásan van beállítva, a böngésző feleslegesen adhat nagyobb prioritást egyes fájloknak.

Miért fontos a betűtípus-optimalizáció a SEO szempontjából?

A Google a felhasználói élményt közvetlen és közvetett jelekkel is figyelembe veszi rangsorolási algoritmusaiban. A weboldal sebessége, mobilbarátsága, interakciós késleltetése és vizuális stabilitása kiemelt szerepet kap. A betűtípusok hatással lehetnek a Largest Contentful Paint (LCP), a Cumulative Layout Shift (CLS) és az észlelt betöltési idő mutatóira. Ha például a főcím vagy az elsőként megjelenő szöveg speciális betűtípussal jelenik meg, és a betűtípus fájl késve töltődik be, az késleltetheti az LCP értéket.

2026-ban a SEO megközelítése egyre inkább a tartalom minősége mellett a technikai hozzáférhetőségre is fókuszál. A Googlebotnak hozzá kell férnie az erőforrásokhoz, a felhasználóknak pedig gyorsan és stabilan kell látniuk az oldal tartalmát. A külső betűtípus-szolgáltatók késése, ország-specifikus elérési problémák vagy időszakos DNS hibák a te kezedből kikerülő tényezők. A betűtípusok helyi tárolása csökkenti ezt a bizonytalanságot.

Vegyünk egy példát: egy 1,8 MB-os vállalati weboldalon négy különböző Google Fonts család, nyolc súly és két variáns használata esetén a betűkérések mérete 450-700 KB között mozoghat. Még ha ezek közül egy rész nem is jelenik meg az első képernyőn, a böngésző a CSS miatt kérheti őket. Ha ugyanazt a dizájnt két betűtípus családdal, három súllyal és WOFF2 subsettel optimalizáljuk, a betűk fájlmérete 90-180 KB-ra csökkenhet. Ez a különbség különösen 4G hálózaton és gyengébb teljesítményű eszközökön érezhető.

Külső betűtípus-szolgáltató vagy helyi tárolás – melyik a jobb?

Nincs egyetlen mindenki számára megfelelő megoldás. Egyes projektekben a külső betűtípus szolgáltató elegendő lehet, míg másoknál a helyi tárolás jelentősen jobb eredményt hoz. Az alábbi táblázat segít gyorsan áttekinteni a legfontosabb különbségeket a döntéshez.

Összefoglalva: ha teljes kontrollt és jobb sebességet szeretnél, a helyi tárolás erősebb választás. Ugyanakkor ne gondold, hogy ez pusztán annyi, hogy letöltöd a fájlokat és feltöltöd a szerverre. Hibás fájlformátum, felesleges súlyok vagy helytelen CSS beállítás könnyen ronthatja a teljesítményt ahelyett, hogy javítaná.

Hogyan hat a betűtípusok helyi tárolása a weboldal sebességére?

A betűtípus fájlok általában kicsinek tűnnek, mégis kritikus erőforrássá válhatnak a betöltési láncban. A böngésző először letölti a HTML-t, majd a CSS fájlokat, amelyek között megtalálja a betűtípusokat is. Ha a címsor, navigáció vagy a szöveg speciális betűtípust igényel, a böngésző addig vár, amíg a betűtípus fájl betöltődik, mielőtt megjeleníti a szöveget. Ez fehér képernyőt, láthatatlan szöveget vagy hirtelen betűtípus-váltást eredményezhet.

A teljesítményt három mérőszámmal érdemes vizsgálni. Az első a LCP (legtöbb tartalmat tartalmazó elem megjelenési ideje), a második a CLS (vizuális eltolódás, amit a betűtípus változása okozhat), a harmadik pedig az INP (interaktivitás érzékenysége), amelyben a betűtípusok közvetlenül nem fő okok, de a nehéz CSS és felesleges erőforrások leterhelhetik a fő szálat és így közvetetten befolyásolhatják.

Az ideális betűtípus-optimalizációs stratégia a következőket célozza: az első képernyőn használt betűtípus fájl mérete 100 KB alatt legyen, felesleges variánsok ne töltődjenek be, a fájlokat hosszú idejű cache-hez konfiguráld, és a kritikus betűtípusokat szükség esetén preloadold. Egy webáruház termékoldalán, ha csak 400 és 700 súlyokra van szükség a címsor, ár és CTA szövegekhez, akkor 9 különböző súly betöltése fölösleges. Az e-kereskedelmi oldalad sebességének további javítására ajánljuk a Magas teljesítményű tárhely megoldások oldalunkat.

Mely betűtípus formátumokat használjuk helyi tároláshoz?

Miért a WOFF2 a legjobb választás?

A modern weben a leghatékonyabb betűtípus formátum a legtöbb esetben a WOFF2. Ez a formátum kiváló tömörítési arányt kínál, és a legtöbb friss böngésző támogatja. A TTF vagy OTF fájlok inkább asztali vagy dizájn célokra alkalmasak, de weboldalon általában túl nagyok. Az EOT és hasonló régi formátumok ma már csak nagyon elavult böngészők miatt fontosak.

Például ugyanannak a betűtípusnak a TTF fájlja 300 KB körüli lehet, míg a WOFF2 verziója 80-120 KB között mozog. Több súly használata esetén ez a méretkülönbség megsokszorozódik. Éppen ezért helyi tároláskor mindig webre optimalizált WOFF2 fájlokat használj.

Érdemes variable fontot használni?

A variable font egyetlen fájlban több súlyt vagy stílus variációt tartalmazhat. Ha a dizájnod nagyon sok súlyt használ (például 300-tól 800-ig), akkor ez praktikus lehet. Ugyanakkor, ha csak 400 és 700 súlyokra van szükséged, két különálló statikus WOFF2 fájl gyakran kisebb összméretet eredményez. A döntéshez teszteld a fájlméreteket, az általad használt variációk számát és a böngésző támogatottságot.

Egy tapasztalt teljesítmény-optimalizáló így áll hozzá: először sorold fel, hogy a dizájnban ténylegesen mely betűtípus súlyokat használod. Ezután hasonlítsd össze a statikus és variable megoldások összesített méretét. Válaszd azt, amelyik kisebb, egyszerűbb és stabilabb. A design döntések mellett a mérések eredményei is részei kell hogy legyenek a tervezési folyamatnak.

Hogyan valósítsd meg a betűtípusok helyi tárolását?

Az alábbi lépések alkalmazhatók WordPress, egyedi PHP, Laravel, Node.js alapú projektek és statikus oldalak esetén is. A logika mindenhol ugyanaz: távolítsd el a felesleges betűtípusokat, optimalizáld a szükséges fájlokat, szolgáld ki őket saját szerverről, majd teszteld az eredményt.

1. Ellenőrizd a jelenlegi betűtípus-használatot

Első lépésként nézd meg, hogy a weboldalad honnan tölti be a betűtípusokat. A Chrome DevTools Hálózat (Network) fülén a “font” szűrővel listázhatod az összes betűtípus kérést. Emellett a PageSpeed Insights, WebPageTest vagy Lighthouse riportokban is ellenőrizd a render-blokkoló erőforrásokat és a harmadik fél kéréseket. Kérdezd meg magadtól: hány betűtípus családot használsz? Hány súly töltődik be? Mely domainekről érkeznek? Az első képernyőn valóban mind szükséges?

Sok esetben a téma, az oldalépítő és a bővítmények külön-külön töltenek be betűtípusokat. Például a téma Roboto-t hív meg, az oldalépítő Montserrat-t, egy űrlap plugin pedig Open Sans-t. Ez vizuálisan talán észrevehetetlen, de jelentős teljesítményterhet eredményez. Az egyik legnagyobb javulás az, ha egy egységes betűtípus rendszert alakítasz ki, és csökkented a betűtípus családok számát.

2. Töltsd le és egyszerűsítsd a szükséges betűtípus fájlokat

Először is ellenőrizd a kiválasztott betűtípus licencfeltételeit. Nyílt forráskódú betűtípusoknál általában engedélyezett a helyi tárolás, de kereskedelmi betűtípusoknál lehetnek domain-korlátozások vagy megjelenítési licenckorlátok. Miután tisztáztad a licencet, töltsd le csak a szükséges súlyokat és stílusokat. A magyar nyelvhez fontos, hogy a Latin Extended karakterkészlet (pl. “á, é, í, ó, ö, ő, ú, ü, ű, í”) teljes legyen, így a betűtípus helyesen jelenik meg.

Ha tovább akarsz optimalizálni, készíthetsz subsetet, azaz eltávolíthatod a használaton kívüli karakterkészleteket. Magyar és angol nyelvű oldal esetén általában a Latin és Latin Extended elég, míg ha nem használsz cirill, arab vagy görög karaktereket, azokat érdemes kihagyni a fájlból. Multinyelvű oldalaknál óvatosan bánj ezzel, nehogy a szöveg megjelenése sérüljön. Többnyelvű projektekhez a Domain választás és többnyelvű weboldal útmutató cikkünk is hasznos lehet.

3. Tedd a betűtípus fájlokat megfelelő mappába

Rendszerezd a betűtípus fájlokat átlátható mappastruktúrában, például /assets/fonts/inter/inter-400.woff2 vagy /assets/fonts/inter/inter-700.woff2. Használj könnyen érthető fájlneveket, és érdemes verziószámot is beszúrni, például inter-400-v2.woff2, hogy cache frissítéskor ne legyen gond a régi verziókkal.

Feltöltheted a fájlokat a hosting vezérlőpultján keresztül, FTP-vel vagy Git alapú automatizált deploy segítségével. A fájl jogosultságokat állítsd 644-re, a mappákét 755-re, hogy mindenki számára olvasható legyen. Ha nem megfelelőek a jogosultságok, a böngésző 403-as hibát ad, és a rendszer betűtípust használja helyette. A szerver MIME típus beállításánál ügyelj arra, hogy a WOFF2 fájlok tartalomtípusa font/woff2 legyen.

4. Definiáld az @font-face szabályokat a CSS-ben

A betűtípusok helyi tárolásának központi eleme az @font-face szabály. Egy egyszerű példa: @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }. A vastagabb változathoz külön @font-face szabályt kell írni, például font-weight: 700 értékkel.

Különösen fontos a font-display: swap érték. Ez lehetővé teszi, hogy a böngésző addig a rendszer betűtípussal jelenítse meg a szöveget, amíg a saját betűtípus betöltődik. Ez jelentősen csökkenti a láthatatlan szöveg problémát. Ugyanakkor a swap miatt kis vizuális eltolódás előfordulhat, ezért érdemes a fallback betűtípust a saját betűtípushoz hasonlóan választani. Például az Inter mellé jó választás lehet az Arial vagy a system-ui.

5. Preloadold a kritikus betűtípusokat

A preload egy erős jelzés a böngészőnek, hogy egy erőforrást minél előbb töltsön be. Az első képernyőn látható főcím és törzsszöveg betűtípusát érdemes preloadolni, mert ez javíthatja az LCP értéket. Azonban nem szabad minden betűtípust preloadolni, mert az a böngésző sávszélességét elvonhatja kritikus képek vagy CSS elől, így ronthatja a teljesítményt.

Általános szabály: csak az 1-2 legfontosabb, az első képernyőn biztosan megjelenő betűtípus fájlt preloadold. Például ha a fő szöveg 400, a főcím 700 súlyú betűtípust használ, akkor ezek jöhetnek szóba. Ha egy blog részoldalon az italic betűtípus nem látszik az első képernyőn, azt ne preloadold. A preload után a Network fülön ellenőrizd, hogy valóban korán töltődik-e be a betűtípus, és nincs-e duplikált letöltés.

6. Állítsd be a cache és tömörítési szabályokat

A betűtípus fájlok statikus erőforrások, amelyek ritkán változnak. Ezért hosszú idejű böngésző cache beállításokat érdemes használni. A leggyakoribb beállítás a Cache-Control: public, max-age=31536000, immutable, ami egy éves gyorsítótárazást engedélyez, miközben a fájl nem változik. Verziószámozott fájlnevekkel biztonságosan frissítheted a betűtípusokat anélkül, hogy a böngésző régi verziót használná.

A WOFF2 már alapból tömörített formátum, ezért nem várható nagy plusz tömörítés Brotli vagy Gzip használatával. Azonban a szerver statikus fájl kiszolgálásának sebessége fontos. Ha Hostragons tárhelyet használsz LiteSpeed, NVMe diszk és helyes cache konfigurációval, akkor a betűtípus fájlok nagyon gyorsan érkeznek meg a böngészőhöz. Az SSL helyes beállítása pedig segíti az HTTP/2 és HTTP/3 protokollok előnyeinek kihasználását; erről a SSL Tanúsítvány Telepítése és HTTPS Útmutató cikkben találsz részletes információt.

Betűtípus helyi tárolása WordPress oldalak esetén

WordPress esetén a betűtípus optimalizáció a témától, bővítményektől és oldalépítőktől függően változó lehet. Először is ellenőrizd, hogy a témád képes-e letiltani a Google Fonts hívásokat. Sok modern téma kínál ilyen opciót a tipográfiai beállítások között. Az Elementor, Gutenberg blokk bővítmények vagy slider pluginok is saját betűtípus beállításokkal rendelkezhetnek. Fontos, hogy ne töltődjön be ugyanaz a betűtípus többször különböző forrásokból, ezért minden érintett elemet nézz át.

A legtisztább megoldás, ha gyerek témában tárolod a betűtípus fájlokat, és azokat a témád stílusfájljába importálod CSS-sel. Van lehetőség bővítmények használatára is helyi betűtípus kezelésére, de a túl sok bővítmény általában lassítja az oldalt. Ha bővítményt választasz, ellenőrizd, hogy friss, kompatibilis PHP verzióval és cache pluginokkal működik-e.

Fontos, hogy WordPress oldalon bármilyen változtatás előtt készíts biztonsági mentést. A betűtípus hívások eltávolítása közben könnyen megsértheted az ikon betűtípusokat vagy az admin felület stílusait. Különösen WooCommerce esetén teszteld a kosár, fizetés és fiók oldalakat. Ha professzionális, gyors WordPress tárhelyet keresel, ajánljuk a WordPress tárhely csomagok oldalunkat.

Technikai SEO és Core Web Vitals ellenőrző lista

Betűtípus optimalizálás után nem elég csak azt ellenőrizni, hogy az oldal betöltődik-e. Mérned kell, összehasonlítani a korábbi és új értékeket, és valós felhasználói körülményekhez közeli teszteket kell végezni. Az alábbi lista gyakorlati segítséget nyújt a kezdéshez.

• Ellenőrizd a Network fülön, hogy eltűntek-e a Google Fonts, fonts.gstatic vagy egyéb külső betűtípus kérések.
• Tartsd a betűtípus fájlok számát 2-4 között, ha lehetséges.
• Győződj meg róla, hogy WOFF2 formátumot használsz, és a fájlméretek elfogadhatóak.
• Teszteld a font-display: swap vagy szükség esetén az optional értéket.
• Csak az első képernyőn használt legkritikusabb betűtípusokat preloadold, ne túl sokat.
• Ellenőrizd a Cache-Control fejlécek hosszú idejű gyorsítótárazásra való alkalmasságát.
• Teszteld, hogy a magyar ékezetes karakterek minden böngészőben helyesen jelennek-e meg.
• Mobilon futtasd a PageSpeed Insights, Lighthouse és WebPageTest teszteket, és hasonlítsd össze az eredményeket az optimalizáció előttivel.

Ne támaszkodj egyetlen mérésre, mert a hálózati körülmények, a szerver terheltsége és a teszt helyszíne is befolyásolja az eredményeket. Legalább három mérést végezz, és nézd az átlagos tendenciát. Ha például az LCP 2,8 másodpercről 2,3-ra csökken, az jelentős javulás. Ha a CLS nő a betűtípus optimalizáció után, akkor nézd át a fallback betűtípus választást és a font metrikákat.

Gyakori hibák

Túl sok betűtípus család használata

A leggyakoribb hiba a túl sokféle betűtípus használata. Ha egy oldal címsorához egy, a törzsszöveghez más, a gombokhoz harmadik, az idézetekhez negyedik fontot használsz, az jelentős teljesítményveszteséget okoz. A legtöbb professzionális weboldal egy-két betűtípus családdal erős vizuális arculatot tud kialakítani. A tipográfiai következetesség nemcsak a sebesség miatt fontos, hanem a márka megítélését is erősíti.

Rossz fallback font választás

Ha a betűtípus betöltése előtt a rendszer betűtípusa nagyon eltér a végleges betűtípustól méretben vagy formában, az vizuális eltolódásokat okoz, ami növeli a CLS értéket. A fallback betűtípust úgy válaszd meg, hogy magasságában, betűszélességében és sortávolságában hasonlítson a helyi betűtípusra. Jó opciók lehetnek a system-ui, Arial, Helvetica vagy Georgia, de mindig teszteld a dizájnnal együtt.

Minden betűtípust preloadolni

A preload nagyon hasznos eszköz, de rossz használata ártalmas lehet. Ha az összes betűtípus súlyt előtöltöd, az felboríthatja a böngésző prioritási sorrendjét, és az LCP érték romolhat, különösen hero képes oldalaknál. Csak az első képernyőn ténylegesen használt 1-2 betűtípus fájlt kezeld preloadként, a többit ne.

Licencfeltételek figyelmen kívül hagyása

Nem minden betűtípus ingyenes vagy korlátlan felhasználású. Kereskedelmi betűtípusok esetén lehetnek domain, megjelenítési vagy tárolási korlátozások. Ha olyan betűtípust teszel közzé a szervereden, amire nincs engedélyed, az jogi kockázatot jelenthet. A betűtípusok publikálása előtt mindig archiváld a licenc szövegét és dokumentáld a projektben.

Biztonság, adatvédelem és infrastruktúra szempontjai

A betűtípusok helyi tárolása nemcsak a sebességről szól, hanem adatvédelmi és biztonsági előnyökkel is jár. Külső betűtípus szolgáltatók használata esetén a látogatók böngészője harmadik fél domainjeire küld kéréseket, ami bizonyos iparágakban, például az adatvédelmi szabályozások (GDPR, KVKK) miatt problémás lehet. Helyi tárolásnál a betűtípus kérések a saját domaineden keresztül mennek, így a forgalom átláthatóbb.

Infrastruktúra oldalról elengedhetetlen a HTTPS használata. Ha a betűtípus fájlokat nem biztonságos http protokollon hívod meg, az mixed content hibákhoz vagy böngésző blokkokhoz vezethet. A domain helyes DNS beállítása, SSL tanúsítvány megléte és a tárhely teljesítménye kulcsfontosságú. Új projekt indításakor a Domain ellenőrzés és regisztráció, biztonságos kommunikációhoz a SSL tanúsítványok és gyors kiszolgáláshoz a Hostragons hosting megoldások oldalakat ajánljuk.

Ha CDN-t használsz, ellenőrizd a betűtípus fájlokra vonatkozó CORS beállításokat. Amennyiben a betűtípusokat más aldomainről szolgálod ki, szükséges lehet az Access-Control-Allow-Origin fejléc konfigurálása. Ellenkező esetben a böngésző nem tölti be a betűtípust. Egy domainről szolgáltatás sok kis- és középvállalkozás számára egyszerűbb és hibamentesebb megoldás.

Hogyan mérd a teljesítményjavulást?

A sikeres optimalizáció bizonyítéka a mérés. Először rögzítsd az aktuális állapotot: a betűtípus kérések számát, összméretét, LCP, CLS és teljes betöltési idő értékeit. Ezután végezd el a helyi tárolás bevezetését, majd ugyanazokat az oldalakat és eszközöket használva mérd újra az adatokat. Külön mérd az induló oldal, blogbejegyzés, kategória és esetleg termékoldalakat.

Egy példa: egy blog oldal induláskor 6 betűtípus kéréssel és 420 KB betűtípus adatmennyiséggel, optimalizáció után pedig 2 kérésre és 96 KB-ra csökkenhet ez. A mobil Lighthouse teljesítmény pontszám 72-ről 86-ra javulhat, az LCP pedig 3,1 másodpercről 2,4-re csökkenhet. Ezek nem garantált eredmények, hiszen a képek, JavaScript és szerver válaszidő is befolyásolja a végeredményt, de a betűtípus optimalizálás általában gyorsan és hatékonyan javítható terület.

A valós felhasználói adatokat a Chrome User Experience Report, Search Console Core Web Vitals vagy RUM (Real User Monitoring) eszközök szolgáltatják. A labor tesztek problémakereséshez jók, de a valós felhasználói adatok mutatják meg az optimalizáció tényleges hatását. Nagy forgalmú oldalakon érdemes az éles változtatást először staging környezetben tesztelni, majd alacsony kockázatú időszakban bevezetni.

Mini terv: Betűtípus optimalizáció 60 perc alatt

Ha kevés az időd, az alábbi lépésekkel gyorsan elkezdheted az optimalizációt. Az első 10 percben a DevTools segítségével listázd a betűtípus kéréseket és készíts képernyőképet. A következő 10 percben határozd meg, mely betűtípus családokat és súlyokat használ a dizájn ténylegesen. 15 perc alatt töltsd le a szükséges WOFF2 fájlokat, ellenőrizd a magyar karakterkészletet, és töltsd fel őket az /assets/fonts mappába.

Ezután 15 perc alatt írd meg a CSS @font-face definíciókat, alkalmazd a font-display: swap értéket, és távolítsd el a külső betűtípus hívásokat. Az utolsó 10 percben teszteld mobilon, ellenőrizd a Network fülön, hogy nincs külső betűtípus kérés, és nézd meg több böngészőben is. Később jöhetnek a haladó beállítások, mint a cache, preload és subset finomhangolás.

Ez a terv különösen hasznos kisvállalkozások, blogok és vállalati bemutatkozó oldalak számára, ahol gyors eredmény kell. Nagy e-kereskedelmi vagy SaaS projektek esetén érdemes a betűtípus optimalizációt a teljes dizájn rendszerrel, komponens könyvtárral és deploy folyamattal összehangolni.

Összegzés

A betűtípusok helyi tárolása jól megvalósítva hatékonyan javítja a weboldal sebességét, a felhasználói élményt és a technikai SEO minőségét. A legfontosabb lépések: WOFF2 formátum használata, felesleges betűsúlyok eltávolítása, font-display beállítása, kritikus betűtípusok preloadolása és erős cache fejlécek alkalmazása. Ez az optimalizáció önmagában nem old meg minden teljesítmény problémát, de gyors, megbízható és mérhető javulást hozhat.

Milyen jó a tárhelyed, az határozza meg, mennyit profitálsz a finomhangolásból. Ha gyorsabbá és biztonságosabbá szeretnéd tenni az oldalad, nézd meg a Hostragons tárhely, domain és SSL szolgáltatásait, és építsd be a betűtípus optimalizációt a teljes weboldal teljesítménytervedbe. Ne siesd el: mérj, javíts, majd ellenőrizz a felhasználói élmény alapján.

Gyakran ismételt kérdések

Mindig gyorsabb a betűtípusok helyi tárolása, mint a Google Fonts?

Nem mindig. Ha a külső szolgáltatás jól cache-elt, WOFF2 formátumot használ, kevés fájllal dolgozik és a szerver jól reagál, akkor általában kiszámíthatóbb és gyorsabb. Ugyanakkor helytelenül konfigurált helyi tárolás esetén lassabb is lehet a betöltés, mint egy optimalizált külső megoldás.

Melyik betűformátumot használjam self-host esetén?

Modern weboldalaknál a WOFF2 a legjobb választás, mert kicsi és széles körben támogatott. A TTF vagy OTF fájlok általában túl nagyok és kevésbé alkalmasak webre.

Hány betűtípus súlyt érdemes használni?

A legtöbb oldalnak elegendő a 400 és 700 súly. Egyes dizájnokban 500 vagy 600 is lehet, de minden plusz súly növeli a fájlméretet és a betöltési időt. Felesleges súlyokat érdemes eltávolítani.

Font-display: swap használata kötelező?