Wydajno\u015b\u0107 frontendu to nie tylko szybko\u015b\u0107 \u0142adowania. Wiele firm skupia si\u0119 na czasie pierwszego wyrenderowania (FCP) czy Largest Contentful Paint (LCP), zapominaj\u0105c o cichych zab\u00f3jcach konwersji, kt\u00f3re nawet przy dobrych wska\u017anikach potrafi\u0105 zniech\u0119ci\u0107 u\u017cytkownika. Pracuj\u0105c z klientami, widz\u0119 trzy powtarzaj\u0105ce si\u0119 b\u0142\u0119dy \u2013 pozornie drobne, a kosztowne.<\/p>\n
Technika leniwego \u0142adowania obraz\u00f3w i iframe\u2019\u00f3w to standard. Ale je\u015bli zrobisz to \u017ale \u2013 zamiast przyspieszy\u0107 stron\u0119, spowalniasz interakcj\u0119. Przyk\u0142ad: sklep e-commerce, kt\u00f3ry op\u00f3\u017ania\u0142 \u0142adowanie zdj\u0119\u0107 produkt\u00f3w do momentu scrolla. G\u00f3rna cz\u0119\u015b\u0107 strony \u0142adowa\u0142a si\u0119 b\u0142yskawicznie (\u015bwietny LCP!), ale gdy u\u017cytkownik chcia\u0142 od razu klikn\u0105\u0107 pierwszy produkt \u2013 widzia\u0142 szare pole zamiast zdj\u0119cia. Denerwuj\u0105ce? Bardzo. Koszt? W tym przypadku spadek konwersji o 12% w tydzie\u0144.<\/p>\n
Jak to naprawi\u0107?<\/strong> Ustal priorytety \u2013 obrazy w obszarze widocznym (above the fold) \u0142aduj natychmiast, reszt\u0119 z op\u00f3\u017anieniem. U\u017cyj techniki Webfonty to wygoda, ale te\u017c koszt. Standardowy scenariusz: strona \u0142aduje czcionk\u0119 z Google Fonts, a podczas jej pobierania tekst pozostaje niewidoczny (FOUT lub FOIT). U\u017cytkownik ju\u017c chcia\u0142 klikn\u0105\u0107 przycisk \u201eKup\u201d, ale\u2026 nie widzi, co jest napisane. Czeka, denerwuje si\u0119, wychodzi.<\/p>\n W jednym z projekt\u00f3w znale\u017ali\u015bmy sytuacj\u0119, gdzie wczytywanie ci\u0119\u017ckiego fontu op\u00f3\u017ania\u0142o First Input Delay (FID) o 300 ms. To wystarczy\u0142o, by 5% u\u017cytkownik\u00f3w porzuci\u0142o stron\u0119 przed pierwszym klikni\u0119ciem.<\/p>\n Rozwi\u0105zanie:<\/strong> wczytuj fonty lokalnie, u\u017cywaj Dodatkowa biblioteka do animacji, slider, fancybox \u2013 ka\u017cda z nich to dodatkowe skrypty kt\u00f3re musz\u0105 zosta\u0107 pobrane, sparsowane i wykonane. Na desktopie to cz\u0119sto niezauwa\u017calne \u2013 ale na telefonie \u015bredniej klasy? Potrafi podwoi\u0107 czas interakcji.<\/p>\n Pami\u0119tam audyt dla sklepu z odzie\u017c\u0105, kt\u00f3ry u\u017cywa\u0142 jQuery, Bootstrap JS, biblioteki do parallaksa i trzech r\u00f3\u017cnych slider\u00f3w. Ka\u017cda z tych rzeczy by\u0142a uzasadniona w momencie wyboru \u2013 ale \u0142\u0105cznie tworzy\u0142y blokad\u0119. G\u0142\u00f3wny w\u0105tek przegl\u0105darki by\u0142 zapchany na 2 sekundy, zanim strona sta\u0142a si\u0119 interaktywna. U\u017cytkownicy mobilni mieli wra\u017cenie, \u017ce strona si\u0119 zawiesza.<\/p>\n Jak to naprawi\u0107?<\/strong> Regularnie audytuj zale\u017cno\u015bci. Usu\u0144 nieu\u017cywany kod (tree shaking w bundlerze), zast\u0105p stare biblioteki natywnymi API (np. zamiast jQuery u\u017cywaj Wydajno\u015b\u0107 frontendu to nie sprint, lecz maraton. Nie wystarczy zoptymalizowa\u0107 wska\u017anik LCP \u2013 trzeba patrze\u0107 na ca\u0142o\u015bciowe wra\u017cenie u\u017cytkownika. Zacznij od sprawdzenia, czy Tw\u00f3j frontend nie cierpi na wymienione choroby. Cz\u0119sto ma\u0142a zmiana (np. odpowiednie priorytetyzowanie zasob\u00f3w) daje du\u017cy wzrost konwersji. A je\u015bli potrzebujesz pomocy w audycie \u2013 w JurskiTech ch\u0119tnie zajrzymy pod mask\u0119.<\/p>\n","protected":false},"excerpt":{"rendered":" Wst\u0119p Wydajno\u015b\u0107 frontendu to nie tylko szybko\u015b\u0107 \u0142adowania. Wiele firm skupia si\u0119 na czasie pierwszego wyrenderowania (FCP) czy Largest Contentful Paint (LCP), zapominaj\u0105c o cichych zab\u00f3jcach konwersji, kt\u00f3re nawet przy dobrych wska\u017anikach potrafi\u0105 zniech\u0119ci\u0107 u\u017cytkownika. Pracuj\u0105c z klientami, widz\u0119 trzy powtarzaj\u0105ce si\u0119 b\u0142\u0119dy \u2013 pozornie drobne, a kosztowne. 1. Zbyt agresywne lazy loading \u2013 klient<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[826,265,1003,72],"class_list":["post-2695","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-w-ux","tag-architektura-frontendu","tag-debugowanie-wydajnosci","tag-konwersja-e-commerce"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=2695"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2695\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}loading=\"lazy\"<\/code> z atrybutem fetchpriority=\"high\"<\/code> dla kluczowych element\u00f3w. Testuj na rzeczywistych urz\u0105dzeniach \u2013 nie tylko w narz\u0119dziach deweloperskich.<\/p>\n2. Nieoptymalizowane fonty \u2013 podst\u0119pne op\u00f3\u017anienie interakcji<\/h2>\n
font-display: swap<\/code> z op\u00f3\u017anieniem, rozwa\u017c subsetowanie do znak\u00f3w u\u017cywanych na stronie. Mo\u017cesz te\u017c preconnect do serwera Google Fonts, by skr\u00f3ci\u0107 czas po\u0142\u0105czenia. Ale najlepiej \u2013 ogranicz liczb\u0119 wariant\u00f3w do minimum.<\/p>\n3. Niepotrzebne biblioteki JavaScript \u2013 ciche obci\u0105\u017cenie procesora<\/h2>\n
querySelector<\/code>), dziel kod na ma\u0142e fragmenty (code splitting). I najwa\u017cniejsze \u2013 mierz nie tylko czas \u0142adowania, ale te\u017c czas do pierwszej interakcji (TTI) na realnych urz\u0105dzeniach.<\/p>\nPodsumowanie<\/h2>\n