Tento příspěvek je ve vývoji a bude průběžně aktualizován. Některé techniky jsou specifické pro prohlížeč a jsou experimentální. Děkujeme, že jste se podívali!
Zdá se, že většina webů dnes používá jiná než výchozí písma a kdo za to může? Systémová písma jsou všechna docela nudná a vlastní písma dodávají designu webu trochu lesku a svěžesti. Problém s používáním vlastních písem je však v tom, že mohou skutečně zpomalit načítání vašeho webu. Soubory písem jsou velké, mohou vyžadovat samostatné soubory písem pro tučné písmo a kurzívu a mohou blokovat vykreslování, pokud je vývojář neobejde. Dovolte mi, abych vám ukázal strategii pro rychlejší načítání písem!
1. Umístěte písma na CDN
Jedním jednoduchým řešením pro zvýšení rychlosti webu je použití CDN, a to se neliší u písem. Je důležité zajistit, aby CDN mělo správné nastavení CORS, jak jsem probíral v Servisní písma z CDN:
# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
Pokud nastavení CORS CDN není správně nakonfigurováno, zobrazí se v konzole chyby AJAX / chyby mezi doménami.
2. Použijte neblokující načítání CSS
Moje kolegyně z Mozilly Stephanie Hobson se se mnou podělila o načítání CSS bez blokování vykreslování, což nastiňuje strategii, jak zabránit načítání CSS blokovat vykreslování. Je to vlastně geniální:
<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';"> <link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media='all';">
V podstatě pomocí media=none nechme prohlížeč stáhnout šablonu stylů bez blokování vykreslování, takže po načtení šablony stylů nastavte media na požadované nastavení pak vykreslí obrazovku tak, jak má. Pěkné!
Poznámka:Měl jsem s touto technikou ve Firefoxu několik problémů, ale ještě jsem nepřišel na přesné zdůvodnění, protože někdy se žádný problém nevyskytuje. Přesné podrobnosti a podporu naleznete v příspěvku Keitha Clarka.
3. Samostatné selektory písma
Pokud se písmo nenačte do doby jeho použití, uživatel uvidí (nic, druh) prázdné místo, dokud se písmo nenačte. To samozřejmě není dobré, pokud se písma nenačítají. Uživatel bude minimálně zatížen pár sekundovým zíráním do prázdného prostoru. Nejlepší je zachovat deklarace vlastních písem chráněné pomocí třídy, která se přidá do těla po načtení písem:
h1 { font-family: Arial, serif; } /* basic system font */
.fontsloaded h1 { font-family: 'MySpecialFont', serif; } /* custom system font */
<link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >
Pomocí výše uvedené strategie deklarace písem se nejprve načte systémové písmo a teprve po načtení vlastního písma bude povoleno, takže se na obrazovce po žádnou dobu nezobrazí prázdný obsah. Pro nastavení font-family doporučuji vytvořit Stylus/Sass/Less mixin nastavení, aby se uživatelský volič nastavil automaticky.
Scott Jehl ve svém příspěvku Font Loading Revisited with Font Events popisuje, že události načítání písem jsou mnohem efektivnější. Prosím, přečtěte si to!
4. Ukládání písem do localStorage
Věděli jste, že můžete ukládat písma v localStorage? Blázen, že?! Podívejte se na tento příspěvek, který podrobně popisuje proces a dokonce poskytuje kód, jak to udělat!
Rychlost na webu zabíjí a výše uvedené strategie zvýší rychlost načítání vlastních písem a CSS. Všechna řešení jsou snadno implementovatelná, jen si musíte udělat čas!