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

Vzhůru dolů 02.03.2021 00:02 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 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 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. Problém a jeho měření Měření pomocí PageSpeed Insights, PageSpeed.cz, důležité rozšíření Web Vitals, nepostradatelná Google Search Console. 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. 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ů. 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. 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 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. Měříme LCP PageSpeed Insights a zmatek v číslech. Měříme lépe na PageSpeed.cz. Proč je Google Search Console nepostradatelná. 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. 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 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. Postprocessing optimalizace dat Proč mít automatickou optimalizaci? SVGO a další nástroje. Kdy neoptimalizovat automaticky? Stupně preciznosti. Optimalizace implementace Externí soubor, URL encoding, inline SVG. Co je kdy vhodnější a co už raději nepoužívat? 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.