Optymalizacja frontendu
Technika opóźniania skryptów zewnętrznych (3rd party scripts)
Skrypty zewnętrzne to temat, który zawsze mnie drażnił... Ilekroć spędzałem mnóstwo czasu na optymalizacji frontendu strony lub aplikacji, którą tworzyłem, zawsze przychodził później taki moment, kiedy klient zażyczył sobie dodatkowe 3rd parties - Google Tag Manager, jakiś Intercom chat, Hubspot, formularze Marketo i wydajność znacząco spadała...
I co wtedy? Z pięknego wyniku audytu wydajności WWW nici... Do tego ten długi Time to Interactive.
Tutaj zawsze jednak biznes wygrywał. Po co komu strona WWW, która nie przynosi korzyści? Przykładem była też moja własna strona, na której od zawsze wyświetlam reklamy Google Adsense. Wtedy posłusznie sypałem głowę popiołem i stwierdzałem, że wynik Performance w Lighthouse na poziomie 51/100 jest nienajlepszy (raczej kur**sko tragiczny!), ale... hajs z reklam musi się zgadzać. Rozumiałem zatem klientów, którzy nie zwracali uwagi na performance, a moje obawy, że strona jest wolna, szły w niepamięć.
Postanowiłem to zmienić!
Natrafiłem na genialny artykuł na blogu Gatsby'ego o OPÓŹNIANIU SKRYPTÓW ZEWNĘTRZNYCH. Wyobraź sobie, że wchodzisz na stronę WWW, nie ładujesz żadnych skryptów, a ładujesz & uruchamiasz je dopiero po 1 sekundzie, od momentu interakcji na stronie.
Co to daje? Na jednej z moich stron (tej, na której mam Google Adsense), Time To Interactive obniżyłem z 11.5 s. do 3 SEKUND! Rozumiesz? 3 S-E-K-U-N-D!
Żeby uczynić wdrożenie takiego rozwiązania mega łatwym i przyjemnym, stworzyłem moje własne rozwiązanie - prosty kod JSowy, który "w locie" podmienia tag na <script> i wykonuje je dopiero od momentu interakcji na stronie.
Tak, wiem... pewnie brzmi to dla Ciebie trochę obco, dlatego nagrałem film wideo na Youtube, w którym wszystko tłumaczę.