Optimalizálja a webes betűtípusokat egy webhely betöltésekor
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?
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.