Písma na webe a rýchlosť: ako ich načítať správne

Ako písma spomaľujú web

• Neviditeľný text: prehliadač čaká na písmo a text medzitým nezobrazí.
• Poskakovanie: najprv sa zobrazí náhradné písmo, potom sa vymení za webové s inými rozmermi a text sa prelomí inak.
• Priveľa súborov: každá hrúbka a kurzíva je samostatný súbor.
• Načítanie z cudzieho servera: prehliadač sa musí najprv spojiť s ďalším serverom.

Ako písma načítať rýchlo

• Formát WOFF2: najúspornejší formát, ktorý podporujú všetky moderné prehliadače.
• Menej rezov: väčšinou stačia dve až tri hrúbky. Variabilné písmo obsiahne všetky hrúbky v jednom súbore.
• Len potrebné znaky: písmo sa dá orezať na znaky, ktoré web používa, pre slovenčinu so znakmi strednej Európy.
• font-display: swap: text sa zobrazí hneď náhradným písmom a vymení sa, keď sa webové načíta.
• Prednačítanie: najdôležitejšie písmo dajte prehliadaču vedieť stiahnuť hneď na začiatku.
• Vlastný server: písma uložené priamo na vašom webe ušetria spojenie s cudzím serverom.

Písma a GDPR

Pri načítaní písma z cudzieho servera, napríklad Google Fonts, sa návštevníkova IP adresa odosiela tomuto serveru. V Nemecku sa tým zaoberal aj súd. Uloženie písma na vlastnom serveri tento problém rieši a zároveň zrýchli web.

Poskakovanie pri výmene písma

Náhradné písmo sa dá pomocou úprav v CSS rozmermi priblížiť webovému, takže výmena je takmer neviditeľná a nezhoršuje CLS.

Pri zrýchlení webu prejdeme aj písma a nastavíme ich tak, aby web zostal pekný a zároveň rýchly.

Autor: Jakub Porubčan, Xirex