A webes betűtípusok elfogadása az interneten továbbra is felgyorsul. 2014 óta a 300 000 legnépszerűbb webhely 37% -a használ webes betűtípust. A Webfonts használatára példa a The Guardian vagy a BBC, amely az elmúlt tizenkét hónapban 2x + növekedést jelent. Vannak azonban más nagyon fontos helyek, amelyek a rendszer betűtípusait használják, mint például a Washington Post, az ABC, az El Mundo vagy az El País, mivel ezek olyan betűtípusok, amelyek nagyon gyorsan betöltődnek, amikor a rendszerben vannak. A betűtípus már telepítve van az eszköz operációs rendszerére. Optimalizálja a webes betűtípusokat egy webhely betöltése közben. Tudom, hogy használnia kell a webes betűtípusokat?

optimalizálja

A rendszer betűtípusai széles körben elérhetőek, de ettől kevésbé egyediek is. Egyéni vagy kiskereskedelmi betűkészlet használatával exkluzívabb élményt kínálunk. A tipográfia elengedhetetlen a jó tervezéshez, a márkaépítéshez, az olvashatósághoz és az elérhetőséghez.

Természetesen ez nem lehet olyan meglepő, mint a legtöbben. A tipográfia mindig is fontos része volt a jó tervezésnek, a márkaépítésnek és az olvashatóságnak megfelelő betűtípusok további előnyöket nyújtanak: a szöveg választható, kereshető, nagyított és nagy DPI-barát. Pontos és következetes szöveget kap, amely a képernyő méretétől és felbontásától függetlenül megjelenik. A webes betűtípusok kielégítő dizájnt, felhasználói élményt és teljesítményt nyújtanak. A webes betűtípusok használata egyedülállóbb élményt nyújt. Ha a vállalati tipográfiáról is van szó, akkor megerősítjük márkánk identitását.

De minden nem szép és költségekkel jár. Figyelembe kell venni a lehetséges technológiai korlátokat, és megoldásokat kell találni rájuk. A legfontosabbak: Nem minden böngésző kompatibilis, a letöltési idő, az adatfogyasztás és a megjelenítés minősége régi eszközök és böngészők használatakor. Ezenkívül a betűkészlet-kérelmek külső erőforrások, amelyek időt töltenek a böngésző renderelésével az oldal festésekor, és garantálni kell, hogy a hajtogatott szöveg látható legyen a betöltés során, elkerülve a láthatatlan szöveg vagy a Foit villanását.

Ebben az útmutatóban segítünk egy kis kutatás-fejlesztésben a döntések meghozatalában. Mivel a kérdésre nincs egyértelmű válasz.

Optimalizálja a webes betűtípusokat egy webhely betöltésekor. Tudom, hogy használnia kell a webes betűtípusokat?

A válasz attól függ. Ha márkanevet szeretnél, akkor igen. De teljesítményének okán nem szabad engedélyeznie két vagy legfeljebb három egyéni betűtípus betöltését az oldalára. Mivel szembemennek az oldal WPO-jával, és technológiai korlátaikkal és mellékhatásaik vannak. Hogy ha nagyon optimalizálni kell őket.

A webes betűtípusok optimalizálása az általános teljesítménystratégia kritikus része. Mindegyik betűtípus további erőforrás, és egyes betűtípusok blokkolhatják a szöveg megjelenítését, amely a láthatatlan szöveg vagy a Foit flash effektusát okozza.

A @ font-face használata az egyedi webes betűtípusok betöltésére a modern böngészők nagyszerű tulajdonsága, hogy webhelyeinknek egyedi esztétikát adjon. Ezenkívül léteznek már a közösségi hálózatok ikonjainak, házainak, nyilainak webes betűtípusai, amelyekkel elkerülhető, hogy a Sprites képeket be kell tölteni az internetre. Mivel vektor, a zoom nem jeleníti meg a képekkel együtt haladó képpontokat.

Ha egyedi betűtípusokat használ az interneten, a szokásos @ font-face technikákkal és egy URL-lel tölti be, lelassíthatja a betöltési sebességet, és akadályozhatja a tényleges és a felhasználó által észlelt teljesítményt is. Vannak olyan módszerek, amelyek óvatosan alkalmazva megpróbálják minimalizálni a FOIT hatást, és helyesen egyensúlyba hozni a használhatóságot, a teljesítményt és a stílust, vagyis elveszítünk némi kompatibilitást.

A következő képen. Látjuk, hogy egy böngésző hogyan tölt be egy weboldalt.

Miután megtudtuk, hogy látjuk, hogy problémánk van a webes betűtípussal, ahányszor a WPO (Web Performance Optimization) munkája eldob minket.

A böngésző kéri a HTML dokumentumot
A böngésző megkezdi a HTML válasz elemzését és a DOM felépítését
A böngésző észleli a CSS-t, a JS-t és más erőforrásokat, és feldolgozza a kéréseket
A böngésző elkészíti a CSSOM fát, miután megkapta az összes CSS tartalmat, és a DOM fával kombinálva elkészíti a megjelenítési fát
A betűtípus-kérelmeket akkor dolgozzuk fel, ha a megjelenítő fa jelzi, hogy mely betűváltozatokra van szükség a megadott szöveg megjelenítéséhez az oldalon
A böngésző végrehajtja az elrendezést és a tartalmat a képernyőn festi
Ha a betűtípus még nem érhető el, előfordulhat, hogy a böngésző nem jelenít meg szöveges képpontokat

A @ font-face problémája.

A CSS @ font-face deklaráció az internetes egyedi betűtípusok hivatkozásának szokásos módja:

Könnyű, de sajnos a legtöbb böngésző alapértelmezett kezelése a @ font-face alkalmazásból problémás. Ha egy külső webes betűtípusra hivatkozunk a @ font-face használatával, akkor a legtöbb böngésző az adott betűtípust használó szöveget teljesen láthatatlanná teszi a külső betűtípus betöltése közben.

Az IE azonnal megjeleníti a szöveget a tartalék betűtípussal, és a betöltött fájl befejezése után visszatér.
A Firefox legfeljebb 3 másodpercig képes renderelni a betűtípust, miután tartalék betűtípust használ, és miután a betűkészlet letöltése befejeződött, a letöltött betűtípussal újra megjeleníti a szöveget.
A Chrome és a Safari a betűtípusok felfüggesztését a betűtípus letöltésének befejezéséig felfüggesztették. Ez azt jelenti, hogy üres web maradhatunk.

A tipográfia lassú betöltése fontos rejtett következményekkel jár, amelyeket figyelembe kell venni, mivel ez késleltetheti a szöveg megjelenítését: a böngészőnek fel kell építenie a megjelenítési fát, amely a DOM és CSSOM fától függ, mielőtt megtudná, hogy a betűtípus melyik erőforrásait használja. meg kell adnia a szöveget.

Ezért a betűkészlet-kérelmeket más fontos erőforrásokra halasztják, és a böngésző nem biztos, hogy csak akkor tud szöveget renderelni, ha az erőforrást lekérik.

A betűtípus-megjelenítés a felhasználó böngészőjében is időigényes. Ha régi okostelefonja vagy mobilja van, akkor ez egy kicsit tovább tarthat. Ha a betűtípus még nem érhető el, előfordulhat, hogy a böngésző nem jelenít meg szöveges képpontokat. FOIT hatás. Amikor a betűkészlet elérhető, a böngésző lefesti a szöveg pixeleket.

Az oldal tartalmának első festése között, amelyet közvetlenül a megjelenítő fa létrehozása után lehet elvégezni, és a betűtípus erőforrás kérés között keletkezik az az üres szövegprobléma, amelyben a böngésző megjelenítheti az oldal elrendezését és kihagyhatja a szöveget . A tényleges viselkedés a böngészőtől függően eltérő:

A Chrome, a Safari a betűkészlet letöltéséig megőrzi a szöveg megjelenítését.
A Firefox legfeljebb 3 másodpercig megtartja a betűtípus-megjelenítést, majd alternatív betűtípust használ. amint a betűkészlet letöltés befejeződött, újra letölti a szöveget a letöltött betűtípussal.
Az IE azonnal megjeleníti az alternatív betűtípust, ha a kért betűtípus még nem érhető el, és újra megjeleníti, amikor a betűtípus letöltése befejeződik.

Jó érvek szólnak a különböző megjelenítési stratégiák mellett és ellen. Van, akit a kettős renderelés zavar, míg mások inkább az eredményeket látják azonnal, és nem bánják az oldal visszafolyását a betűtípus letöltése után. Ez mozgásokat okoz a képernyőn, mivel a használt biztonsági rendszer betűtípusa eltér az eredeti betűtípustól és a sortávolságtól.

Néhány böngésző előre meghatározott ideig (általában három másodpercig) vár a betűtípus betöltésére, mielőtt feladnák és megjelenítenék a szöveget a fontcsalád-tartalék segítségével. De mint egy hűséges kiskutya, úgy a WebKit böngészők (Safari, Android alapértelmezett böngésző, Blackberry) is örökké (jó, gyakran 30 vagy több másodpercig) várnak a forrás visszatérésére. Ez azt jelenti, hogy az egyéni betűtípusok egy lehetséges webhely meghibásodási pontját jelentik.

Ez az, ha az egyéni betűtípusokat gyorsítótárba helyezzük és gyorsan megjelenítjük, de az első oldalnézet észlelt sebessége kritikus a felhasználó megtartása szempontjából. Meg kell mérlegelni a márkát, hogy fenntartsa.

A betűtípust tartalmazó CSS-kérelem nem akadályozhatja a megjelenítési oldalt. Ahelyett, hogy egy külső stíluslapban hivatkoznánk a betűtípusokra URL-en keresztül, próbálja meg aszinkron módon betölteni a betűtípusokat és a betűtartalmakat - később ezt a The Guardian-ban elmagyarázzuk.
A betűkészleteket be kell állítani annak biztosítása érdekében, hogy az összecsukás látható legyen a betöltés során, elkerülve a láthatatlan szöveg villanását vagy a foitot.

Mi a helyzet a megjelenítési sebességgel, a WPO-val? Mindig hallottuk a WPO guruktól, hogy a webes betűtípusok teljesítménybüntetéssel járnak. A betűtípusok további kritikus erőforrást jelentenek az oldalon, ezért igen, befolyásolhatják az oldalak renderelési sebességét. Ez azt jelenti, hogy csak azért, mert az oldal webes betűtípusokat használ, még nem jelenti azt, hogy lassúnak kell lennie. De mivel senki sem ad kemény pesétákat. A több fájl és a nagyobb súly mindig több időt ad.

Négy fő pont határozza meg a webes betűtípusok teljesítményének hatását az oldalon:

Az oldalon használt betűtípusok és betűsúlyok teljes száma. Két vagy háromnál többet nem ajánlott.
Az oldalon használt betűtípusok teljes bájtmérete. A forrást optimalizálni kell,
A forráserő-transzfer késése.
A betűtípus letöltésének kezdete.

Az oldaltervezőnek minimalizálnia kell a használatát. Ha több forrást használunk, annál több kérés érkezik és több bájt keletkezik. Az UX általános gyakorlata az, hogy a felhasznált betűtípusok számát a lehető legkisebbre kell csökkenteni, ami szintén összhangban áll a teljesítménycéljainkkal. Első lépés: használja a webes betűtípusokat, de rendszeresen ellenőrizze a betűhasználatot, és próbálja távol tartani. A másik rész az, hogy az internetes betűtípust optimalizálni kell a súlyában, a tervező meg fogja tenni, vagy Ön optimalizált Google betűtípusokat használ, másrészt elmagyarázzuk, hogyan lehetne javítani a betűtípus betöltését.

A webes betűtípus karakterjelek sorozatából áll, vagyis betűk vagy szimbólumok leírására szolgáló vektoros alakzatokból. Ezért egy adott betűtípus fájl méretét két egyszerű változó határozza meg: az egyes karakterjelek vektorútjának összetettsége és egy adott betűtípus karakterjelének száma. Például az Open Sans, amely az egyik legnépszerűbb webes betűtípus, 897 karakterből áll, köztük latin, görög és cirill betűkből. Kerülnie kell a nem használt nyelvek karaktereit. A tervezőnek le kell egyszerűsítenie a vektoros alakzatokat, és tömörítenie kell a betűtípust, hogy ne súlyozza túl sokat.

A betűtípus kiválasztásakor vegye figyelembe, hogy milyen karakterkészletek támogatják. Ha egy oldal tartalmát különféle nyelvekre kell lefordítania, akkor olyan betűtípust kell használnia, amely ugyanazt a megjelenést és élményt kínálja a felhasználók többségének.

Négy betűtípus-formátumot használnak az interneten: EOT, TTF, WOFF és WOFF2. Sajnos ezen sokféle lehetőség ellenére nincs egyetlen univerzális formátum, amely minden böngészőben működik, mind a régi, mind az új böngészőben: az EOT csak az IE-vel működik, a TTF részben IE-kompatibilis, a WOFF nagyobb kompatibilitással rendelkezik, de néhány régebbi böngészőben nem érhető el, és A WOFF 2.0 támogatás még mindig számos böngészőben megvalósul, és csak az újabbak támogatják. Milyen panoráma. A betűtípus betöltése több fájlt is betölt, hogy megtekinthesse azokat a legtöbb böngészőben. Meglátjuk, hogyan lehet javítani egy feltételes terheléssel, amely a javascript to segítségével észleli a felhasználó böngészőjét

Mennyi időbe telik, amíg a látogató letölti a webes betűtípus-erőforrást az Ön webhelyére? A kérdés megválaszolásának legjobb módja az, ha műszerezi webhelyét az erőforrás-szinkronizálási API-n keresztül, amely lehetővé teszi számunkra a DNS, TCP és az időadatok átadását az egyes betűtípusokhoz - mint egy bónusz, a Google Fonts nemrégiben engedélyezte az időzítési erőforrásokat. Itt egy példa részlet jelentési forrás késleltetései a Google Analytics számára a jelentésekhez:

A betűtípus-erőforrások szállításának optimalizálására tett legjobb próbálkozásaink ellenére néha a felhasználónak csak rossz a kapcsolata a túlterhelt kapcsolat, a rossz vétel vagy számos egyéb tényező miatt. Ebben az esetben a kritikus erőforrások - beleértve a betűkészlet letöltését is - blokkolhatják az oldal megjelenítését, ami csak tovább ront a helyzeten. Ennek kezelésére, különös tekintettel a webes betűtípusokra, a különböző böngészők különböző módszereket használtak:

Az IE azonnal megjeleníti a szöveget a tartalék betűtípussal, és a betöltött fájl befejezése után visszatér.
A Firefox legfeljebb 3 másodpercig képes renderelni a betűtípust, miután tartalék betűtípust használ, és miután a betűkészlet letöltése befejeződött, a letöltött betűtípussal újra megjeleníti a szöveget.
A Chrome és a Safari a betűtípusok felfüggesztését a betűtípus letöltésének befejezéséig felfüggesztik.

a böngésző csak akkor kezdeményezheti a betűkészlet-kérést, ha mind a DOM, mind a CSSOM megvan, és fel tudja oldani az aktuális oldalhoz szükséges betűtípusokat.

A webes betűtípusok számos előnyt kínálnak: jobb olvashatóság, hozzáférhetőség (kereshető, kiválasztható, nagyított), márkajelzés, és ha jól csinálják, gyönyörű eredmények. Nem az a kérdés, hogy használjuk-e a webes betűtípusokat, hanem az, hogy hogyan optimalizáljuk azok használatát. Ennek érdekében egy gyors működésű ellenőrzőlista:

Ellenőrizze a forrás használatát, és mindig tartsa a logikán belül. Tegye optimalizáltá a betűkészleteket - lásd: Google Web Fonts csalások. A karakterjelek görbéjét csökkenteni kell.
Optimalizálja az átviteli késést minden forrásnál.
Optimalizálja a felesleges JS eltávolítását a webes betűtípusok előtt vagy után, vagy használja a betűtípus aszinkron betöltésére.
Töltsön el egy kis időt a Betűtípus-események betöltése API-val, hogy megértse a webes betűtípusok működését.
Az, hogy az oldal betűtípust használ, még nem jelenti azt, hogy jól és mértékletesen elvégezve lassítani fogja. Egy jól optimalizált webhely jobb és gyorsabb élményt kínál, például ikonkép használatával sok kép elkerülése érdekében,

A Google Fonts ingyenes és nyílt forráskódú, amely lehetővé teszi a webhelyek közötti gyorsítótárazást. A sávszélességet a szerverén is mentheti. Valójában a top 40 Google betűtípust több mint 100 000 domain osztja meg. Más szavakkal, egy népszerű internetes betűtípus használatával biztosíthatja, hogy sok felhasználó tárolja azt böngészőjének gyorsítótáraként. Például a Sans betűtípust széles körben használják és olvashatóak. Minél szélesebb körű az elfogadás, annál nagyobb a gyorsítótár-találatok valószínűsége és annál jobb a teljesítmény. De mi van, ha saját márkát akarok a márkámhoz. Ne essen kétségbe, vannak módok a terhelés javítására.

A CSS gyorsítótár és a betűtípus gyorsítótár előnyeinek kihasználása gyors és egyszerű telepítést tesz lehetővé. Gyors böngészési élményt nyújt, nagyon közel a rendszerforráshoz. Ha egy globális CDN-nel, optimalizált fájlformátumokkal, valamint nagy globális és megosztott gyorsítótárral kombinálja, javul a teljesítmény. Itt az ideje tudni:

Hogyan használjuk felelősen a webes betűtípusokat, vagy kerüljük a @ font-face-palm alkalmazást?

A láthatatlan szöveg villanásának (FOIT) legyőzése elkerülhető Javascript loadCSS függvény használatával.

A stílustalan szöveg villanása (FOUT) egy módja a betűtípus fokozatos festésének, amikor letöltötte és a lehető leghamarabb meglátja.

Példa a láthatatlan szöveg villanásának (FOIT) legyőzésére a loadCSS segítségével.

Szintén nagyon érdekes trükk a HTTP nyomkövetés mentéséhez, ha a forrást a CSS-be a 64-es bázisba töltjük be, nem pedig URL-re.

Példa /url/to/woff.css és /url/to/ttf.css

Ha hozzáadjuk a böngésző észlelését, betöltjük a szükséges fájltípust

A font-face definíciót tartalmazó CSS-kérelem nem akadályozhatja az oldal megjelenítését. Ahelyett, hogy egy külső URL-címmel hivatkoznánk a betűkészletekre egy külső stíluslapon keresztül, próbálja meg aszinkron módon betölteni a betűtípusokat és a betűtartalmakat. Most megmutatjuk, hogy ez hogyan sikerült. A betűs utasításokat be kell állítani annak biztosítása érdekében, hogy a tartalék szöveg látható legyen a betöltés során, elkerülve a láthatatlan szöveg villanását vagy foit.

A tökéletességhez nagyon közel álló javascriptet hagyunk neked

Végül, és ez már megjegyzendő, a tipográfiát nemcsak a gyorsítótárba menthetjük, hanem egy modern böngésző Helyi tárolóját is használhatjuk. A Guardian és a BBC használja. Ez már a WPO és a SEO paranoiája. A webes betűtípust egy Json-ba kell helyezni, hogy kihasználhassa azt a tényt, hogy a böngésző korábban betölti, és a felhasználó böngészőjében tárolva hagyja, hogy ne kelljen további kéréseket benyújtania. Ez akkor lehetséges, ha a saját tulajdonú webes betűtípus betöltésének optimalizálása a becsület bejegyzése.

Hagyjuk Önnek a The Guardian megvalósítását. A technikusnak és a tervezőnek ezt követően mentálhigiénés klinikán kell lennie 🙂

Következtetésként mérsékelten elvesztettük a webes betűtípusoktól való félelmet.