Zrychlujeme web – Jak pracovat s fonty?

Lukáš Ptošek   21. 1. 2020


Používáte na stránkách různá písma? Jestli máte nadpisy v Lato, popisy produktů v Open Sans a patičku v Roboto, nejspíš si zbytečně zpomalujete web. Prozradím, jak načítání fontů zrychlit a jak vyzrát na jejich „problikávání.“

Vítejte u dalšího pokračování čtyřdílného seriálu o zrychlování webu na frontendu. Pokud jste tu noví, doporučuju číst od začátku:

  1. Co ovlivňuje rychlost webu a jak ji měřit
  2. Formáty obrázků a lazyloading
  3. Jak pracovat s fonty
  4. CSS soubory a JavaScripty

Jak fonty fungují?

V minulém díle jsme vyladili načítání obrázků, zapomenout ale nesmíme ani na fonty. Nezdá se to, ale každá rodina písma a její varianty (tučné, kurzíva) vaši stránku zbytečně zatěžují a zpomalují načítání. Pojďme si proto říct, jak webové fonty nejlépe používat. Pro pořádek začneme základní terminologií:

Font - kompletní sada znaků abecedy jedné velikosti a jednotného stylu. Např. Arial, Times New Roman, Verdana, Roboto atd.

Řez - varianta základního typu písma. Může jich být více a používají se pro vyznačování slova nebo i delšího textu. Ve webové terminologii se značí po stovkách od 100 do 900, kdy hodnota 400 představuje normální/základní písmo. Výše jsou tučnější písma, níže tenčí.

Na web tak například vybereme font Roboto a k němu si zvolíme několik řezů, nejčastěji 400 a 700 (tučné). Čím více fontů a řezů zvolíme, tím více toho bude muset prohlížeč zpracovat, a web bude pomalejší.

Na webu doktorkladivo.cz jsme se snažili fonty a řezy co nejvíc sjednotit, vyhodili jsme tedy ty, které se používaly jen v pár nadpisech. Aktuálně máme jen jeden (Ubuntu) se čtyřmi řezy – 300 (tenké), 400 (normální), 500 (střední) a 700 (tučné).

Osobně se při výběru fontů držím těchto pravidel:

  • Maximálně jeden volitelný font s počtem řezů podle potřeb designu.
  • Jako záložní font vždy používám systémové písmo. Více si můžete přečíst v článku Marcina Wicharyho.
  • Volitelné fonty většinou beru z Google fonts, ale hostuju je u sebe na serveru. Proč? Je to rychlejší a bezpečnější.

Nezapomeňte zkontrolovat, jestli používáte všechny specifikované fonty.

Vyzrajte na Google fonty

Hádám, že když chcete vložit font na web, jdete na stránky Google fonts a vyberete písmo, které se vám líbí. Následně vygenerujete odkaz jako na příkladu níže, a vložíte ho do kódu stránek buď přes @import (horší varianta), nebo přes link (lepší varianta):

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

S tímhle vygenerovaným Google kódem končí bohužel většina lidí.

Jde to udělat i mnohem lépe. Odkaz vygenerovaný Googlem totiž není font, ale styl plný @font‑face deklarací.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

Všimněte si, že se @font‑face nejdřív snaží načíst lokální písma, a pokud nic nenajde, začne je stahovat z Google serveru. Máme tu tedy dvě dotazování na dva servery, lokální ověření, a až poté se něco stáhne. Taky vám přijde, že je to moc kroků? Pojďme to zrychlit.

Dočasné nebo jediné řešení problému

Pokud si nemůžete dovolit větší webový zásah nebo zatím chcete nasadit dočasnou úpravu, doporučuji preconnect. Použijte předchozí část kódu, a vložte ho před link s fontem.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link ref="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Dotaz na font bez preconnectu se připojuje na Google servery až ve chvíli, kdy ho budete potřebovat. Než naváže se serverem spojení a začne stahovat konkrétní data, nějaký čas to trvá (viz grafy níže z článku Sii Karamalegos). Preconnect vytvoří již předpřipravené spojení, takže jakmile budete chtít stahovat, nemusíte na nic čekat.

Před úpravou – uplynulo 8 sekund a stále čekáme

Po úpravě – po 6 sekundách máme staženo

Hostované fonty na vlastním (našem) serveru

Za nejrychlejší a nejbezpečnější řešení považuji hostování volitelných fontů na svém serveru. Proč?

  • Přeskočíte dotazování na Google servery a snížíte prodlevu.
  • Pokud Google servery vypadnou, polovina webů bude bez fontů. Váš ne.
  • Bude to prostě rychlejší. Věřte mi!

Stažení a příprava dat

Jak asi tušíte, vybraný Google font budete muset stáhnout. Ochudíte se tím sice o automatické aktualizace, ale ruku na srdce, kolikrát za rok přibude do české abecedy nové písmeno nebo znak? Kdyby se náhodou nějaké písmo začalo špatně zobrazovat (nenapadá mě, jak by k tomu mohlo dojít), stačí stáhnout novou verzi fontu.

Doporučuji nástroj google-webfonts-helper. V levém sloupci najdete vybraný font, a poté naklikáte správnou znakovou sadu (české znaky jsou v latin-ext) a řezy.

Níže máte na výběr Best Support nebo Modern Browsers. Best Support vám dá formáty WOFF, WOFF2 a navíc TTF, EOT a SVG pro starší prohlížeče. Za mě to jsou zbytečná objemná data. Modern Browsers vám dá jen formáty WOFF WOFF2, což bohatě stačí. Všechny prohlížeče umí WOFF přibližně od roku 2010, takže nefungující fonty u starších verzí budou ten nejmenší problém - nebude na nich fungovat mnohem víc věcí než jenom vzhled písma.

Zvolte tedy Modern Browsers a vygenerovaný kód vložte na webu co nejvýše, nejlépe jako první zápis v CSS souborech. Můžete si ještě předem upravit název složky, odkud se budou fonty stahovat, ale to už je na vás. Font do ní stáhněte a rozbalte.

Magická optimalizace

Teď budete muset dát vše dohromady tak, aby to fungovalo. Přesunutí fontů na vlastní server neřeší vše – chcete, aby se načetli ještě dřív, než se zpracuje CSS soubor. Toho dosáhnete atributem preload.

PRELOAD je typ načtení, které vám umožní přinutit prohlížeč, aby poslal žádost (request) na zdroj (css, font, js a další), aniž by blokoval onload událost stránky.
- z článku od Addy Osmani

Preloadovat budete jenom WOFF2 formát. Proč? Funkci preload zatím neumí všechny prohlížeče. Pokud ji prohlížeč umí, automaticky zvládá i WOFF2. Před vložením CSS souboru vložte do HTML přibližný kód jako níže. Pojďme si říct, co vše znamená.

<link rel="preload" as="font" type="font/woff2" href="/fonts/roboto-v13-latin-ext_latin-regular.woff2" crossorigin="crossorigin"> 

<link rel="preload" as="font" type="font/woff2" href="/fonts/roboto-v13-latin-ext_latin-700.woff2" crossorigin="crossorigin">
//vložené CSS soubory
  • rel="preload" - předpřipraví data na spuštění;
  • as="font" - řekneme prohlížeči, co budeme stahovat. Bez „as“ vám dá nízkou prioritu, a ničeho nedocílíte;
  • href="xxx" - cesta k  fontu;
  • type="font/woff2" - jaký formát budete stahovat;
  • crossorigin - je vyžadováno, protože písma se načítají pomocí anonymního režimu CORS.

A to je vše. Písma se nám přednačtou a v CSS jsme je zadefinovali pomoci @font‑face. V CSS (např. na HTML element) už stačí jen napsat:

html {
   font-family: 'Roboto', 'Trebuchet MS', 'Helvetica', 'Sans-Serif';
}

Oprava blikání písma

FOIT (flash of invisible text) a FOUT (flash of unstyled text) neboli problikávání textu během načítání může být pěkně nepříjemné. Na Doktoru Kladivo jsme eliminaci problikávání neřešili, do naší @font‑face deklarace (kód, který jsme vkládali na začátek CSS) jsme přidali font‑display: swap. Zaručí, že pokud se webový font nenačte do 0,1 sekundy, naskočí místo něj systémový. Až se webfont stáhne, tak se automaticky vymění.

Co to vyřeší? Na pomalých připojeních nemusíte koukat na bílou obrazovku a čekat, až se načtou fonty, ale asi o 3 sekundy dřív uvidíte systémové písmo. Blikání fontu navíc hrozí jen při prvním načtení, pak už je vše stažené v cachi.

Výsledky

Vzhledem k tomu, že nemáme jednotlivá data, ale jen komplexní úpravu zrychlení webu, přidávám alespoň ukázkové grafy Sii Karamalegos. Zrychlení se může pohybovat kolem jedné až dvou sekund + budete kompletně nezávislí na Google serverech.

Fonty přes Google s preconnectem - skoro 5 sekund

Fonty lokálně na našem serveru i s optimalizaci - 3,5 sekundy

Web fonty jsou jedny z prvních věcí, které se na webu stahují – neztrácejte proto zbytečně čas načítám. Udělejte si rychlý audit stránek a zjistěte, jaké fonty/řezy používáte a v jakém počtu. Pokud je některý řez jen v pár textech, zkuste ho nahradit písmem, které už používáte jinde. U nás se třeba řez 100 používal jen na třech položkách, kompletně jsme ho proto nahradili řezem 300. To samozřejmě platí jen pokud váš font není designovka, která musí korespondovat s brandingem.

Přišly vám moje rady užitečné? Přečtěte si i posledního díl o stahování CSS souborů a problematických JavaScriptech.

Zařazeno v Vývoj

7 komentáře

  1. Cache

    Nemá to Google náhodou takhle, protože se font načte z cache? Roboto je dnes všude a když ho stahnu na jednom webu, tak druhým uz nemusím, protože ho už mám. Narozdíl od tvého způsobu, který ho toho vždy.
    Pokud se pletu, tak mě prosím oprav 🙂 díky

      1. Autor Lukáš Ptošek

        Zdravím,

        dalo by se říct, že má a navíc tam je trošku více kouzel s dalším doručením pro dané prohlížeče atd. Je potřeba si vždy změřit jestli se to vyplatí. Někdy může být i to stažení navíc rychlejší než navázání s Google servery, ale po použití preconnectu bude rozdíl menší.

        Ono si teď říkám, že možná byla chyba pro ukázku použít Roboto, ale na eshopu se používá Ubuntu font, který není tak častý jak Roboto a nebo Open Sans.

        Zkoušeli jsme obě varianty a vlastní hostování nám vyšlo rychlejší. Navíc se rychlostní skóre odráží do výkonu reklam viz první článek. Při testech se vždy používá žádná cache a tam vždy vyhraje vlastní hostování.

        Tak či tak, každý projekt může vyžadovat trošku jiné specifika a požadavky tudíž se musí balancovat které řešení se zvolí.

        Tak snad jsem odpověděl na vaše otázky.

        Lukáš Ptošek

  2. Swap

    Ahoj Lukáši,
    vše jsme udělal dle tvého návodu a PageSpeed mi píše, že bych měl zajistit, že text b ude viditelný, tedy mě odkazují na stránku, kde je se zmiňují o SWAPU do @font-face, který, ale v CSS mám. Jediné v čem vidím rozdíll, že na zmíněné ukázce je krom lokálního načítání fontů ještě jasko další zdroj… Jen tam nevím kde vykouzlit adresu, protože je jiná než, kterou si mohu vzít z webu fonts.google.com

    1. Autor Lukáš Ptošek

      Zdravím,

      o jaký web se jedná? Podívám se na to. Zkusím pak lépe poradit s odpovědí.

      Lukáš Ptošek

  3. Fonty na wordpress

    Zdravím, Lukáši,

    díky za super návod. Mám prosbu, web mám na wordpressu a postupoval jsem takto:
    Stáhl jsem fonty, vložil kód přes administraci WP do Custom CSS.
    Fonty jsem nahrál do složky wp_content a adresáře fonts.
    Dále jsem chtěl přidat atribut preload, protože jsem hledal nejlehčí cestu, šel jsem do Google Tag Manager a vybral Vlastní html. Tady jsem ale narazil, GTM mi píše „Byl nalezen neplatný kód HTML, CSS nebo JavaScript“.
    Věděl byste, co dělám špatně?
    Díky moc za pomoc.

    1. Autor Lukáš Ptošek

      Zdravím,

      super že jste se pustil do zrychlování webu. Bohužel vám nemůžu doporučit přidání přes GTM. Je tam až moc nevýhod než výhod. Ano je to pohodlnější, ale rozhodně to nebude rychlejší.

      Osobně nepracuji s GTM a Wordpresem tudíž vám nemůžu poradit úplně přesně, ale problematika je taková. CSS by se měli načítat jako první a pokud byste toto chtěli načítat přes GTM tak javascript vám zablokuje další načítaní webu a celkově to zpomalí a to nechcete.

      V mém připadě to funguje nějak takhle. Dám preload na fonty, stáhnout se CSS a pak se zobrazí fonty.

      U vás nevím jak by to přesně vypadalo ale představuji si to nějak takhle: Stáhne se GTM, GTM si stáhne potřebné věci. Stáhne se preload zápis fontu (co přesně to udělá to netuším a jestli se to vůbec spustí) A PAK se stáhne CSS, tudíž mezitím se budete dívat v horším případě na nenastylovanou stránku. Ano na to GTM můžete použít Async, defer atd, jenže to vykonání skriptu se posune někdy na později a preload zápis pak postrádá smysl. Tady touhle problematikou se budu lehce zabývat v posledním 4. díle a měl by vyjít brzo 🙂

      Tady to předávání přes prostředníky je jen další zdržování a to u rychlosti nechceme.

      Snad jsem poradil dobře a povede to k úspěchu 🙂
      Lukáš Ptošek


Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *