Reportáž ze SmashingConf Freiburg 2023 🥨

18. 9. 2023

Article

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.

Postup při hledání a ladění INP metriky se stále zdokonaluje. Již nyní pro vás připravujeme obsáhlejší článek o metrice INP.

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 LCPCLS.

Č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 widthheight.

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

Tip: WebExpo 2023 - naše tipy na přednášky o rychlosti webu z největší české konference.

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

Radek Šír

Radek ŠírKonzultant rychlosti a seniorní vývojář v SUPERKODERS s letitým zkušenostmi ze všech koutů frontendu.

Jak je rychlý váš web?

Jak rychlý je váš web v porovnání s vaší konkurencí? To zjistíte
pomocí našeho online testeru.

Test rychlosti mého webu

Další související články k tématu

WebExpo 2023: přednášky o optimalizaci rychlosti

WebExpo 2023: přednášky o optimalizaci rychlosti

Letošní WebExpo je za námi. Bylo to krásné. Bylo to intenzivní.Číst dále

Zpátky v plném výkonu: konference Perf.now() 2022

Zpátky v plném výkonu: konference Perf.now() 2022

Po období covidu se nám vrací velké konference. Na konci října se v Amsterdamu konal třetí ročník Performance.now(), na který jsme se velmi těšili.Číst dále

BFcache: zrychlete uživatelům pohyb v historii prohlížení

BFcache: zrychlete uživatelům pohyb v historii prohlížení

Back/forward cache (nebo BFcache) je optimalizace prohlížeče, která umožňuje okamžitou navigaci zpět a vpřed. Výrazně zlepšuje zážitek z prohlížení, zejména pro uživatele s pomalejšími sítěmi nebo zařízeními.Číst dále