Reportáž ze SmashingConf Freiburg 2023 🥨

Na začátku nového školního roku jsem navštívil konferenci pořádanou Smashing magazínem ve Freiburgu. Jeden z hlavních sponzorů byla firma SpeedCurve, jejichž nástroj hojně využíváme k monitoringu webů našich klientů v PageSpeed.cz.

Celá konference je zaměřena spíše na tvorbu frontendu, CSS a na webdesign, než na performance webu, ale několik přednášek a vystoupení bylo velmi přínosných i pro mou prácí v PageSpeed.cz

WarmUp s metrikou INP

Hned v neděli po příjezdu jsme vyrazili na menší workshop, který vedl Andy Davies. Andy je Performance konzultant ve SpeedCurve a vyplatí se ho sledovat na platformě X (Twitter), kde přináší dobré tipy právě z oblasti performance (rychlosti webů).

Na workshopu nás Andy uvedl do nové metriky INP, která bude v březnu 2024 nahrazovat stávající metriku FID z kolekce metrik Core Web Vitals. Po rychlém úvodu jsme se dozvěděli, jak INP metriku změřit, dále také jak najít nejslabší místa na webu a také pár tipů, jak INP metriku zlepšit.

Zde je pár základních rad a tipů.

• Metrika INP je velice úzce spjata s metrikou Total Blocking Time.
• Čím máte menší počet DOM elementů, tím lepší je Total Blocking Time.
• Pokud máte nastaveno měření reálných uživatelů na webu (RUM), můžete problémy s INP najít přes nástroj SpeedCurve.
• INP na jednotlivých stránkách webu můžete nalézt také přes Google Search Console.

Pokud nemáte možnost měřit všechny uživatele na webu, můžete hledat problémy s INP ručně.

Andy Davies ladí metriku INP

Postup je asi takový:

• Otevřete anonymní okno prohlížeče. Zapnuté pluginy by mohly ovlivňovat měření.
• Otevřete DevTools.
• Zapněte v záložce Performace nahrávání Timeline a zkuste proklikávat web, případně skrolovat a provádět další interakce.
• Na Timeline potom vidíte jednotlivé interakce a k nim důležité informace.
• Nás zajímají zejména Long Tasky, které po interakcích vznikají.
• Tyto Long tasky je následně potřeba analyzovat, rozdělit nebo odložit.

Jak otestovat další metriky Core Web Vitals se můžete dozvědět také v našem článku od Zuzany Šumlanské.

První den konference

První den jsme sledovali přednášky týkající design systému, přístupnosti na webu, ukázek nových CSS vlastností nebo novinek v DevTools prohlížeče Chrome.

Jecelyn Yeen v přednášce „Modern Web Debugging“ ukázala spousty tipů z DevTools. Mně osobně nejvíce zaujala záložka Quick Source, která zobrazuje rychlý náhled na soubory, které můžete pak přímo pomocí funkce Overrides editovat na svém lokálním disku.

Záložku zapnete přes příkaz Cmd+Shift+P a napíšete „Quick source”.

Quick source v DevTools

Další tip, který mě zaujal, je možnost nahrávání posloupnosti příkazů na webu pomocí funkce Recorder. To umožňuje odeslání ve formátu JSON například kolegovi, který následně dokáže posloupnost příkazů přehrát.

Jak může takové nahrávání probíhat, ukazuje Jecelyn ve svém videu na YouTube.

Druhý den konference

Druhý den nás čekaly techničtější přednášky. Například Christine Vallaure nám v přednášce „Design Beyond Breakpoints“ předvedla spousty novinek z grafického nástroje Figma. Miriam Suzanne nám ve svém vystoupení předvedla, co vše je možné v CSS udělat za pomocí Container Queries a které vlastnosti se teprve chystají.

V čase oběda byla možnost se přihlásit na další mini workshop s Andy Daviesem. Andy tentokrát v hodinovém vystoupení ukázal nejčastější chyby, které kazí Core Web Vitals. Z obecenstva si vybral 3 webové stránky a přímo na nich ukazoval nedostatky. Šlo vesměs o stále se opakující problémy, které zhoršují metriky LCP a CLS.

Čeho se tedy máte na svém webu vyvarovat?

• Nepoužívejte velké množství externích webových fontů.
• Pro webové fonty používejte výhradně formát Woff2.
• Nedávejte lazy loading na obrázek, který je LCP prvkem a je potřeba stáhnout co nejdříve.
• Využívejte priority hints. Obrázku, který chcete upřednostnit přidejte parametr fetchpriority=”high” a zvyšte tím jeho prioritu stažení.
• Odložte stažení a zpracování nepotřebných Javascriptových souborů.
• Hlídejte, aby všechny obrázky měli uvedeny rozměry width a height.

Byla to hezká a praktická ukázka toho, že i drobné úpravy dokáží rychle vylepšit metriky Core Web Vitals LCP a CLS.

Konference se konala v nádherném historickém městě Freiburg na západě Německa. Večery jsme trávili ochutnávkou místního piva a německé kuchyně. Vše bylo výborné a již nyní se těším na nějakou další společnou konferenci.

Freiburg