Third-parties nám zpomalují weby. To víme. Ale skutečně jsme jako vývojáři proti nim tak bezbranní, jak si občas myslíme? V přednášce si ukážeme jak identifikovat problematické komponenty třetích stran a jak minimalizovat jejich dopady na rychlost webu.
7. Měříme třetí strany: Lighthouse
https://web.dev/measure/
Zajímavou analýzu komponent třetí strany nabízí už Lighthouse.
8. Měříme třetí strany: Lighthouse
Umí i podrobnější analýzu, například o čase, který potřebují jednotlivé JS. Aktuální
nevýhodou je kategorie „Other“, kam toho hodně mizí. Ale autoři to řeší.
9. Měříme třetí strany: WebpageTest
https://www.webpagetest.org/
badthirdparty.com zpomalimeweb.cz
rychlyweb.cz
WebpageTest toho nabízí hodně. Třeba srovnání testů. Udělejte jeden test
standardně a druhý pak s blokováním konkrétní třetí strany.
10. Měříme třetí strany: WebpageTest
https://www.webpagetest.org/
Do URL se na obrazovce časové osy dá přidat čárka. WebpageTest vám
pak vyrobí srovnávací test.
11. with 3P
without 3P
Měříme třetí strany: WebpageTest
https://www.webpagetest.org/
Taková data jsou skvělý podklad pro argumentaci směrem ke klientovi
nebo přímo vývojářům třetí strany.
12. Měříme třetí strany: Chrome DevTools
web.dev/identify-slow-third-party-javascript/
V Chrome DevTools si zapněte zobrazování „third party badges“. Identifi-
kujete tak snáze, které 3P patří requesty, jež vidíte v „Network“.
13. Měříme třetí strany: Chrome DevTools
web.dev/identify-slow-third-party-javascript/
Podobně jako v Lighthouse pak v záložce „Performance“ můžete získat
čísla o času, který v hlavním vlákně spotřebují jednotlivé JS.
14. Měříme třetí strany: SpeedCurve
speedcurve.com/blog/third-party-blame-game/
Pro mě osobně je ale nejcennější SpeedCurve. Zde například vidíme graf
celkové zátěže webu třetími stranami a její vývoj v čase.
15. Měříme třetí strany: SpeedCurve
speedcurve.com/blog/third-party-blame-game/
Na tomto grafu SpeedCurve ukazuje čas, který jednotliví dodavatelé 3P
ubírají prohlížeči v hlavním vlákně. Čím vyšší je červená část, tím hůř.
17. Případ první: Targito
Někdy je možné skripty a styly 3P komponenty odstranit. Ve spolupráci
s Targito zde klient dokázal odstranit 3P CSS a JS. Targito ale stále používá.
20. Případ druhý: FreshChat
První odpověď podpory:
„…looks like the widget loads fine. I do not see
any slowness in the page or the chat widget
loading.“
smarty.cz
22. Případ druhý: FreshChat
smarty.cz
Vývojář Adam Košťálek to ovšem vyřešil elegantně. Namísto widgetu je zde obrázek.
Widget se načte, až po kliknutí, když jej uživatel potřebuje.
28. Případ třetí: Smartsupp
autodoplnky-obchod.cz
V e-mailové komunikaci ovšem autoři píší, že si jsou problému vědomi a že jej
aktuálně intenzivně řeší. Nová verze widgetu je už v přípravě. Těšíme se!
29. Případ čtvrtý: Disqus
Disqus je komentářová služba. S weby se rozhodně nepáře, dokáže na pozadí
stáhnout klidně kolem 2,5 MB.
31. Případ čtvrtý: Disqus
Řešení? Líné načtení (lazy loading) až po rozkliknutí komentářové sekce.
V tomto případě by to mohlo ušetřit slušný objem dat.
33. Speciální případ
Většina vývojářů GTM nemá v oblibě a viní jej z negativních dopadů na rychlost webu.
Není to ale prostě jen výborný nástroj, který se občas používá špatně?
36. Speciální případ: GTM
• GTM je obvykle úplně v pohodě
• Problém jsou až komponenty do něj vkládané
• Sleduj dobu provádění skriptu a timeline
• Sleduj události (gtm.js, gtm.dom, gtm.load)
• GTM/GA debug Chrome extension
• Ukaž čísla a komunikuj
37. Shrnutí řešení
• Třeba to tam nemusí být…?
• async/defer
• Placeholder
• Odložené načtení (klik, scroll, šablona, zařízení…)
• Preconnect (<link href="…" rel="preconnect">)
• Selfhosting (viz ušetření 1,7s na Optimizely)
• Komunikace
39. Komunikace
• Osvěta, než je pozdě (klient, marketéři…)
• Problém? Hlaš to klientovi (on platí)
• Autoři third-party (čísla, dokumentace, pomoc s řešením)
• Pomoz ostatním vývojářům (publikuj, přidej do 3PW)