3 nová videa: optimalizujte metriky LCP, CLS a vkládání SVG

Připravili jsme pro vás další video-kurzy, nastříhané z nedávných webinářů Michala Matušky a Martina Michálka.

Jejich prostřednictvím získáte za příjemnou cenu slušné množství znalostí z praxe lidí, kteří se problematice věnují při práci pro klienty. K tomu dostanete podklady v podobě prezentací a odkazů. Přístup k videím je pro vás časově neomezený.

Měření a optimalizace CLS

Cumulative Layout Shift (CLS) udává stabilitu vzhledu stránky během vykreslování a její špatné hodnoty mohou pro uživatele znamenat velmi nepříjemný prožitek při vykreslování stránky.

Ukázka

Obsah

1. Co je CLS a proč je důležité?
   Ukázka z denikn.cz, CLS jako součást důležitých Web Vitals, CLS jako UX metrika.
2. Problém a jeho měření
   Měření pomocí PageSpeed Insights, PageSpeed.cz, důležité rozšíření Web Vitals, nepostradatelná Google Search Console.
3. Co by vás nenapadlo
   Jak přesně se layout shifty počítají, 500 ms hranice pro vyžádané posuny, časté problémy s animacemi.
4. Demo
   Případová studie opravy CLS na webu Deníku N a Slevomatu – měříme, hledáme problémy, ověřujeme hypotézy za pomocí DevTools a dalších nástrojů.
5. Optimalizace
   Držíme plochu s poměrem stran, pozor na asynchronní JS, optimalizace nechtěných posuný vyvolaných fonty, potíže s vkládanou reklamou.
6. Otázky a diskuze
   Diskuze nad weby Revolgy, Autobazar Vysočina a Slevomat. Font Metrics Override Descriptor.

Účastník webináře Jan Bien nám ke kurzu napsal:

U všech webů mám dlouhodobě CLS v zelených číslech, a tak jsem se naivně domníval, že na CLS nic není. … Na kurzu mi Martin ukázal že to zdaleka není tak prosté.

Koupit za 595 Kč

Více informací

Měříme a optimalizujeme LCP

Largest Contentful Paint je možná tou nejdůležitější ze sady metrik rychlosti webu Web Vitals, doporučovaných Googlem.

Ukázka

Obsah

1. Co je LCP
   Důležitost Largest Contentful Paint. LCP v kontextu dalších metrik. Co může a nemůže být „největší obsahový prvek“ a jak jej nalézt.
2. Měříme LCP
   PageSpeed Insights a zmatek v číslech. Měříme lépe na PageSpeed.cz. Proč je Google Search Console nepostradatelná.
3. Demo
   Ukázková pitva a optimalizace dvou obsahových webů a jednoho e-shopu za použití Chrome DevTools a nástrojů Lighthouse, tracingu v Performance tabu.
4. Otázky
   Jak velké zmenšení je potřeba? Úprava designu kvůli LCP. Rozdíl mezi syntetikou a uživatelským měřením.

Účastník webináře Jan Matějů nám napsal:

Aktuální téma - důležitá metrika. Martin hodně ví a umí téma srozumitelně představit, vysvětlovat v kontextu. Inspirativní hodina.

Koupit za 595 Kč

Více informací

Jak správně vkládat SVG na web

Zjistěte, jak vkládat SVG do stránky, optimalizovat soubory a na co si dát pozor v podkladech.

Ukázka

Obsah

1. Vektorový zdroj
   Optimalizace začíná nakreslením ve vektorovém editoru nebo kontrolou podkladů. Základní ověření v Adobe Illustrator. Texty ve vektorových zdrojích. Další tipy na optimalizaci zdroje.
2. Postprocessing optimalizace dat
   Proč mít automatickou optimalizaci? SVGO a další nástroje. Kdy neoptimalizovat automaticky? Stupně preciznosti.
3. Optimalizace implementace
   Externí soubor, URL encoding, inline SVG. Co je kdy vhodnější a co už raději nepoužívat?
4. SVG triky
   Znovupoužitelnost. Jak upravovat už vložené SVG. Kaskáda v SVG. Dědičnost v SVG a další.

Účastník webináře Daniel Střelec nám napsal:

Obdivuji Michala za to, kolik toho dokáže nahustit do hodinového webináře.

Koupit za 595 Kč

Více informací

Objednávka více videí se slevou 10 %

Nezapomeňte, že videa můžete objednat také na jednu fakturu — hromadně se slevou 10 %.

Prohlédněte si všech 18 hodinových videí o rychlosti webu a JavaScriptu, které máme aktuálně v nabídce.