Hogyan lehet optimalizálni a betöltését Online betűtípus

Saját betűtípusok lehetővé, hogy az oldalon egyedi, hangsúlyozni a tervezés és vonzza a felhasználók figyelmét. De az ára ezeket az előnyöket egy hosszú rakodási hely segítségével saját (egyéni) betűtípusokat. Különösen akkor, ha azok helyét egy távoli gépen. Mit kell tenni?

Az alábbiakban figyelembe vesszük a főbb irányokat, hogy optimalizálja betűtípus hely közelében található a tárhely, a Google API használata a technikákat, hogy csökkentsék a méretét és lusta rakodási betűtípusokat.

Röviden, az utasítás optimalizálását a következő:

1. Hogy a megfelelő betűkészletek (így csak amire szüksége van).
2. Mi helyezzük egy hosting vagy használja a Google Fonts API-t.
3. Konfigurálása cache és tömörítés font fájlokat.
4. Konfigurálása halasztott rendering és használja localStorage.

betűtípusok használata

Saját betűtípusok helyén valószínűleg hiányzik a felhasználó böngészőjének. Ezért meg kell adnia további fájlokat letölteni, amely tartalmazza a technikai információkat a betűtípust (szimbólumok - jele, főleg co-karaktereket és húrok és egyéb adatok). Amint az gyakran előfordul, hogy mindegyik böngésző kell a saját fájlok - Google Chrome érthető formában WOFF és woff2 (legfejlettebb), a régi Android érti csak TTF és IE - EOT.

Ezen felül, akkor úgy vélik, hogy ritka esetekben a betűtípus lehet, hogy már telepítve van a felhasználói eszköz, amely esetben használhatja a helyi irányelvet. Kiterjesztett CSS utasításokat, csatlakoztassa a megfelelő betűtípust a helyszínen fog kinézni (különböző formátumok „hit” a különböző böngészőkben):

Ebben az esetben az összes betűtípus fájlok kerülnek a tárhely. Támogatja az összes általánosan használt böngésző sor betűkészletfájlok minden arc (headset). Lehetőség van, hogy hozzon létre, például betűtípus mókus. A szolgáltatás automatikusan biztosítja a CSS-kód és egy sor fájlokat a tárhely a szerveren.

Másik lehetőség, hogy a szolgáltatás igénybevételéhez a Google Fonts. beszúr egy script szolgáltatás hívás a helyszínre, és attól függően, hogy a böngésző szolgáltatás már adott a megfelelő CSS-kód és a szöveges fájlokat (már lebontott nyelv), támogatása több mint 30 különböző kombinációkban.

De a fő probléma a terhelés saját betűtípust, amely nem oldja meg: a nagy betűk. Néha túl sok. És szinte mindig szükség van rájuk, hogy a szöveg az oldalon (vagyis font letöltés megy a színpadra a „fehér képernyő”, a leginkább bosszantó felhasználók számára). Hogyan gyógyítja meg?

Google Fonts API

Az első és legfontosabb lépés az optimalizálás -, hogy hagyja csak a kívánt betűtípust. font leltár (távolítsa el a nem használt az oldalon, vagy használják a legnagyobb termés ténylegesen használt karakter). Azt is meg kell választani nem csak a betűk, hanem azok változatai (normál, dőlt, félkövér).

Google Fonts API lehetővé teszi, hogy töltse le csak a szükséges opciókat schrifta, valamint letölthető betűtípusok karakterkészletek (amely lehetővé teszi a böngészők nem teljesen betölti a betűtípus, ha nem minden karakternek szükség ahhoz, hogy az oldalon). További jellemzők érdemes megemlíteni és a paraméter text =, amely levágja a karaktereket a betűtípusok letölthetők a szigorúan meghatározott (ha a betűkészlet csak az embléma, akkor nagyon értékes).

Optimalizálása betűméret

• Visszamenőleges kompatibilitás. Ahhoz, hogy maximalizálja felgyorsítja a kivetített szöveg a webhelyén, hogy bármely felhasználó eszköz, meg kell mondani a böngésző, amely megkíméli a betűtípus család lehet használni, ha a saját betűtípus nem áll (még nem töltött vagy rakott, hogy nem támogatott formátum). Ebből a célból az irányelv font-face után betűtípus nevét meg kell adni a legmegfelelőbb alternatíva a rendszert a kötelező végső serif (talpas), sans-serif (groteszk), vagy fix szélességű (egyenlő szélességű). Bár visszafelé kompatibilitás vezet FOUT, de ez az alternatíva jobb, mint egy láthatatlan szöveget az oldalon (Foit).

• betűtípus tömörítés. Ha a statikus nyomás elegendő, hogy készítsen fájlok font fájlokat és elhelyezni őket közvetlenül a font fájlokat. A dinamikus kompresszió ellenőrizze, hogy az összes jelentősebb font formátumok - EOT, TTF, OTF, SVG, WOFF és WOFF2 - kapnak egy sor kompressziós (tömörítési teszt). Ha nem, akkor meg kell adni a szükséges kiterjesztés vagy fájltípus a kompressziós szabályokat. Gzip (vagy zopfli) tömörítés csökkentheti a betűméretet az 15-50%.

• eltávolítása a kőtáblákat. Szöveg megjelenítéséhez a helyszínen általában szükség, nem az összes karakter szerepel az alapértelmezett betűtípus. Némelyikük tartoznak más nyelven (például kínai) egy része - a különleges képességgel, hogy nem használ. Számos eszközt az eltávolítására használt font jele és segédprogramok Windows / Mac. A legnépszerűbb - egy olyan szolgáltatás, betűtípus mókus (csak bővített módban), valamint Subset.py és FontPrep. Google Fonts is lehetővé teszi, ha csak a karakterkészlet használható. Ez optimalizálási módszer csökkenti a kimeneti fájl további 10-50%.

Együtt mindhárom módszer jelentősen felgyorsítja a kijelző egy hely az összes eszköz, függetlenül attól, hogy a szépség a használt betűtípusok és jól automatizálható, például a felhő Ayri.rf használja a második és a harmadik módszerek optimalizálása, csökkenti méretét érkező font fogadó által 20-80%.

Késleltetett terhelési betűtípusok

Számos megközelítés, hogy alkalmaz valamilyen „mágikus” le a betűtípusok, hogy minimalizáljuk a negatív hatásokat.

Az első - a kemény fájlgyorsítás (a rendszeres használók) és base64-reprezentáció (a localStorage, a mobil felhasználók számára). Recepció csak akkor működik, hogy jöjjön vissza a helyszínen, de jelentősen csökkenti a letöltési időt (részletes utasításokat, hogyan kell használni localStorage).

A második - használata betűtípus Loading API (nem minden böngésző támogatja). Amikor az elsődleges oldal betöltésekor, meg tudja mutatni a szöveget a felhasználó font aszinkron le a font - és eltölteni néhány tíz milliszekundum (szinte láthatatlan „lóg ki” a böngésző) hogy dolgozza át az oldalt a font elérhetőségét. Van egy könyvtár automatizálni a folyamatot, az egyikük itt.

Egy mélyebb belevetik magukat a témában azt ajánlom, hogy olvassa el a cikket a Google betűtípusok optimalizálás.