Az oldalsebesség SEO-ra gyakorolt hatásáról eltérő vélemények vannak, abban viszont mindenki egyetért, hogy a gyorsabb oldal jobb felhasználói élményt nyújt. Miközben számos módszer van a betöltési sebesség javítására, az egyik legkézenfekvőbbet talán többen elhanyagoltuk: a betűtípus betöltését saját szerverről.
Mire is jó ez a technika? Növeli az oldal sebességét a kérések csökkentésével. Az alábbi ábra jól mutatja, hogy mi a különbség a Google CDN használata és a saját szerverről történő betöltés között.
Persze, a fő cél nem a tökéletes PageSpeed Insights pontszám elérése, de látható, hogy az eddig is gyors oldal, most szinte tökéletes:
Egyértelmű, hogy nyerünk azzal, ha helyileg töltjük be a betűtípusokat. De hogyan is csináld? Az alábbi útmutatóban láthatod azt a módszert, amit én használok. Röviden a lépések:
- A kívánt betűtípus beszerzése és a CSS előállítása.
- A betűtípus feltöltése a szerverre.
- A betűtípus behívása CSS-el.
Készítsd el a betűtípust a megfelelő formátumban
Először is létre kell hoznod a kívánt betűtípust a szükséges formátumban, hogy tárolni tudd a szervereden. Sajnos a Google csak .ttf formátumban (TrueType) teszi elérhetővé a betűtípusokat a hivatalos oldalán, neked viszont más formátumokban is kell, például .woff és .woff2-ben is. Ezért egy alternatív módszerre van szükség.
1. lépés: Látogasd meg a Google Webfonts Helper honlapot
Mivel tehát a Google-től nem tudjuk letölteni az egyébként ingyenes betűtípusokat, én a Google Fonts Helper weboldalt használom. Ez egy ingyenes oldal, a betűtípusok használata sem kötött semmilyen regisztrációhoz.
2. lépés: Válaszd ki a betűtípust
Az oldal bal felső sarkában található keresőmezőbe gépeld be a keresett betűtípus nevét, majd válaszd ki a megfelelőt. Ezután pipáld ki a “latin” és a “latin-ext” jelölőnégyzeteket is, hogy a magyarban lévő ékezetes betűk is rendesen megjelenjenek majd az oldaladon. (Ha az adott betűtípusnak nincsenek magyar ékezetes karakterei, akkor innen sem tudod letölteni.)
3. lépés: Válaszd ki a stílusokat
A 2. pontban válaszd ki, hogy milyen stílusú karaktereket szeretnél megjeleníteni az oldaladon. Természetesen az adott betűtípushoz elérhető stílusok jelennek itt meg. Ha például csak 300-as, 600-as és 900-as betűket töltesz le, akkor csak azokkal tudsz majd operálni. Az italic a dőlt stílust jelenti.
Én most a példa kedvéért 300-900-ig mindent letöltök.
4. lépés: Válaszd ki a formátumot
Most azt kell eldöntened, hogy milyen böngészőkre készíted fel a honlapodat: szeretnéd a régi és az új böngészőket is kiszolgálni, vagy csak a modern böngészőkben jelenjen meg biztosan a kívánt betűtípus.
Ha mindegyik böngészőben szeretnéd megjeleníteni a betűtípust, akkor válaszd a Best Support lehetőséget. Ha a modern böngészőkre mész, akkor kattints a Modern Browsers lehetőségre. (Sok szakértő szerint a .woff és .woff2 formátum elegendő [Modern Browsers].)
5. lépés: Add meg az elérési útvonalat
Ennél a lépésnél láthatod, hogy a honlap elkészítette a CSS-t. És ezzel el is érkeztél talán a legkritikusabb részéhez az egész folyamatnak. Meg kell adni azt a pontos elérési útvonalat, ahonnan a CSS behívja a betűtípust. Ha mindent végigcsináltál, de a font nem töltődik be, akkor valószínűleg itt lesz a hiba.
Szerencsére az oldal készítői gondoskodtak segítségről, így nem kell manuálisan beírni minden sorba a relatív útvonalat. A következő elérési útvonalat írd be a lenti képen látható, kékkel kijelölt mezőbe: /wp-content/uploads/fonts/
A fenti képek összehasonlításából látható, hogyan változik az útvonal. Itt két dologra hívnám fel a figyelmet: 1. Ne hagyd le a perjeleket, és 2. ne használj szóközöket.
6. lépés: Töltsd le a betűtípust
A következő lépés sokkal egyszerűbb. Kattints a nagy kék gombra, és töltsd le a Google Font .zip fájlját.
Töltsük fel és adjuk hozzá a honlaphoz
1. lépés: Másold a CSS-t
Még mindig a Google Fonts Helper weboldalon vagyunk. Kattints a CSS-t tartalmazó kóddobozba, és másold a teljes kódot.
2. lépés: Add a CSS-t az oldaladhoz
Számos módszerrel hozzáadhatod a CSS-t az oldaladhoz. Én az ingyenes Code Snippets plugin segítségével tettem meg. Egyszerűen másold be a kódot egy snippetbe úgy, hogy a kékkel bekeretezett sorokkal kezdődjön. Ez azért szükséges, mert ebben a pluginban PHP kódrészleteket lehet hozzáadni, nekünk viszont CSS-ünk van most.
Fontos még a kékkel aláhúzott részlet is. Bár a CSS-t legenerálta a Google Fonts Helper oldal, a @font-face és a src közé be kell illesztenünk a következő sort: font-display: swap;
3. lépés: Töltsd fel a betűtípust a szerverre
A .zip fájlt már letöltöttük, ezért csak annyi a dolgunk, hogy feltöltsük a /wp-content/uploads/fonts/ mappába cPanelen keresztül vagy FTP-vel. Bármilyen módszert is használsz, a Fonts mappát létre kell hoznod, ha nem létezik még a szerveren.
Én ebben a példában cPanelen keresztül töltöm fel a fájl. A fenti mappában kijelöltem a fájlt, majd a kicsomagolásra kattintottam.
A felugró ablakban megerősítettem a szándékomat, hogy a Fonts mappába kívánom kicsomagolni a .zipet, majd a folyamat lefutott. Ha nem látod elsőre a kicsomagolt állományt, lépj egy szinttel feljebb, majd vissza a Fonts mappába. Ez a végeredmény egy része:
Ha több betűtípust is használsz az oldaladon, akkor menj végig a fenti lépéseken újra.
Bónusz lépés
Ha olyan szoftverrel készíted a honlapokat, ami nem kapcsolja ki automatikusan a Google Fontok CDN-ről történő betöltését még akkor sem, ha helyi szerverről töltöd be azokat, akkor ezt tedd meg manuálisan. Oxygen Builder esetében például kövesd az alábbi lépéseket a WordPress admin felületén:
- Menj az Oxygen > Settings menüpontra a bal oldali navigációs sávon.
- Válaszd a fenti fülek közül a Bloat Eliminatort.
- Vedd ki a pipát a Disable Google Fonts sorból.
- Kattints a Save Changes gombra.
Zárszó
Ebben a posztban azt mutattam be, hogyan csökkentem az oldal betöltési sebességét a betűtípus saját szerverről történő betöltésével. Ez egy manuális módszer, pluginnal is biztosan megoldható, de én nem szívesen használok plugint abban az esetben, ha tartós eredmény érhető el néhány sor kóddal is.
Milyennek találtad ezt a leírást? Van amit másképp csinálnál? Írd le kommentben!
Forrás: Mohammed Wasim Akram – Easiest Way to Self-Host Google Fonts on Your Personal Server (syncwin.com)