Web-vitals

vue3-toastify lądował w entry chunku każdej strony — także tych, które nigdy nie pokazują toasta. Composable z dynamicznym importem przeniósł go do osobnego chunka ładowanego przy pierwszym użyciu, zdejmując 22 KB z entry.js i 9 KB z entry.css.

Odkryliśmy, że nasz pipeline optymalizacji obrazów generował idealne wartości srcset, które przeglądarka całkowicie ignorowała. Naprawą okazał się pojedynczy atrybut HTML, który od lat traktowaliśmy jako opcjonalny.

Powtarzalny radial-gradient, który świetnie wyglądał w projekcie, zamienił moją stronę w ociężałego potworka. Oto jak namierzyłem winowajcę i naprawiłem go inline SVG w data URI — zero różnicy wizualnej, płynne 60 klatek na sekundę.