Webfonty sú prínosom pre vývojárov tém. Otvárajú rozsiahlu krajinu potenciálnych typov písma – ďaleko od starých zlých čias, keď bolo na výber len niekoľko bezpečných webových fontov. Webfonty však majú nevýhody: najvýznamnejšie je inflácia hmotnosti stránky. Pri mnohých témach sú písma vo veľkosti na druhom mieste po obrázkoch. Navyše, keďže písma z Google Fonts, Typekit a ďalších webových služieb písiem sú načítané útržkom Javascriptu, môžu blokovať vykresľovanie stránky na neurčitý čas.
Vplyv načítania webových fontov je možné minimalizovať rozumnou optimalizáciou.
Asynchrónne načítanie
Predtým, než budeme diskutovať o akýchkoľvek optimalizáciách, predstavím vám malý šikovný nástroj s názvom Web Font Loader. Je to pomôcka Javascript vyvinutý predovšetkým spoločnosťou Adobe a niekoľkými ďalšími poskytovateľmi písiem a obsahuje niekoľko užitočných funkcií na optimalizáciu písma. Použijeme ho na niekoľko našich optimalizácií.
Keď sa webové písma načítajú, blokujú vykresľovanie zvyšku stránky — ak sa písmo načítava niekoľko sekúnd, výsledkom je nežiaduce oneskorenie, kým používateľ uvidí niečo užitočné.
Alternatívou k tomuto blokovaciemu správaniu je asynchrónne načítanie. Pri asynchrónnom načítavaní súboru sa vykresľovanie neblokuje a písmo sa načíta vždy, keď bude k dispozícii. Nevýhodou asynchrónneho načítavania je záblesk neštylizovaného textu, ktorý môžu návštevníci vidieť počas načítavania písma, ale existujú spôsoby, ako minimalizovať vplyv FOUT.
Používatelia Typekit nemusia robiť nič, aby získali asynchronné písma, okrem toho, že používajú najnovšiu verziu kódu na vloženie Typekit. Písma strojopisu sa teraz načítajú štandardne asynchrónne.
Písma Google možno nastaviť tak, aby sa načítali asynchrónne pomocou nástroja Web Font Loader. Ak chcete načítať písma Google asynchrónne, zahrňte do hlavičky témy nasledujúce položky s príslušnými zmenami pre zásobník písiem.
Podrobnejšiu diskusiu na túto tému nájdete na Blog Lockdown Design.
Podnastavenie
Podmnožina je proces načítania len tých typov písma, ktoré potrebujete. Napríklad, ak pravdepodobne potrebujete iba západné znaky, nie je potrebné sťahovať súbory s písmom pre iné ako západné jazyky. To isté platí pre rôzne hrúbky písma. Ak nepotrebujete skrátenú verziu písma, nezahŕňajte ju do sťahovania. Je možné výrazne uhryznúť z doby sťahovania, ak si dávate pozor, čo sťahujete.
Ak vo svojej téme WordPress používate písma Typekit, pri zostavovaní súpravy ich môžete podmnožiť — zrušte začiarknutie akéhokoľvek typu písma, ktoré nepotrebujete.
Pre Google Fonts prichádza opäť na pomoc Web Font Loader. Ak chcete podnastaviť písmo pomocou nástroja Web Font Loader, upravte kód na vloženie takto.
WebFont.load({
google: {
rodiny: [‘Source Sans Pro:400:latin’]
}
});
Ukladanie do vyrovnávacej pamäte v miestnom úložisku
V ideálnom prípade by používatelia museli stiahnuť písma iba raz, pretože pri ďalších návštevách by sa načítali z vyrovnávacej pamäte prehliadača. V praxi sa ukladanie do vyrovnávacej pamäte prehliadača stretáva s problémami, najmä na mobilných zariadeniach.
Smashing Magazine vyvinul metódu pákového efektu lokálny obchod do vyrovnávacej pamäte písma. Existuje niekoľko upozornení na tento prístup, z ktorých najdôležitejšia je požiadavka, aby súbory fontov existovali na vašom serveri, čo môže byť nákladný návrh.
Ak máte záujem pokračovať v tejto metóde optimalizácie, Smashing Magazine publikoval a podrobný popis procesu.
