Optimalizace obrázků a webfontů

Bez optimalizace obrázků a webfontů weby nezrychlíme. Webinář vám ukáže možnosti optimalizací a pomůže s jejich výběrem.
Weby v obrázcích stahují zpravidla nejvíc dat a webfonty mohou překvapivě hodně ovlivnit průběh prvního vykreslení stránky. Naučte se během hodiny základy optimalizace obojího.
1. Metriky (**0:35**)
2. Nástroje (**6:05**)
3. Obrázky, to nejdůležitější (**7:14**)
4. Webfonty, to nejdůležitější (**15:41**)
5. Test webu (**23:14**)
6. Dotazy (**49:30**)
[Prezentace v PDF](www.dropbox.co...) - obsahuje i tipy mimo obsah webináře
[Nástroj PageSpeed Insights od Googlu](developers.goo...)
[Nástroj PageSpeed.cz](pagespeed.cz/)
[Nástroj WebpageTest](www.webpagetes...)
[Vzhůru dolů: Web Vitals](www.vzhurudolu...)
[Vzhůru dolů: Metrika LCP](www.vzhurudolu...)
[Vzhůru dolů: Metrika CLS](www.vzhurudolu...)
[Vzhůru dolů: Lazy loading obrázků](www.vzhurudolu...)
[Vzhůru dolů: Deskriptor font-display](www.vzhurudolu...)
[Vzhůru dolů: Poměr stran obrázků](www.vzhurudolu...)
[Knihovna MozJPEG](github.com/moz...)
[Vzhůru dolů: srcset/sizes](www.vzhurudolu...)
[Vzhůru dolů: Nepoužívejte ikonfonty](www.vzhurudolu...)
Lektor: Martin Michálek
www.vzhurudolu...
www.pagespeed.cz/

[@martinkrsik2208]

Moc moc díky za návod ! Již v půlce videa jsem dostal Lighthouse Performance na 100 % (skočilo ze 70ti :D). Dokonalý. Těším se na další vzdělávací videomanuály pro pokročilejší. Děkujeme ti Martine, že to pro nás děláš.

[@martinkrsik2208]

Konkrétně lazy loading a datové velikosti obrázků byly v řešení, ale explicitní rozměry obrázků a Cumulative Layout Shift 0 vyřešilo výsledek 100% hodnocení. Teď se ještě naučit srcset na obrázky po 200 pixelech, aby to šlo od 200px na full HD podle obrazovky.

[@absolutmachal]

To mám radost. :) Tady jsou další, dříve natočené, webináře. kzbin.info/aero/PLIdlKRR9lxIdE7CmSnbIad2xoPzG3zijg