„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
•
0 likes•267 views
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.
Recommended
Recommended
More Related Content
Similar to „To my ne, to oni!“ – komponenty třetích stran a rychlost webu
Similar to „To my ne, to oni!“ – komponenty třetích stran a rychlost webu (20)
More from Martin Michálek
More from Martin Michálek (20)
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
- 1. „To my ne, to oni!“ Komponenty třetích stran a rychlost webu Martin Michálek @machal
- 2. vrdl.cz/martin Martin Michálek: Konzultant k rychlosti webu
- 4. Web Analytika Reklama 37 % Simon Hearne a HTTP Archive Počet requestů třetích stran na mediánu webů:
- 5. Změřit Vyřešit Komunikovat @machal Jak na third parties?
- 6. Změřit Vyřešit Komunikovat @machal Jak na third parties?
- 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ůř.
- 16. Změřit Vyřešit Komunikovat @machal Jak na third parties?
- 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á.
- 18. Případ druhý: FreshChat smarty.cz S chatovacími widgety to bývá složité. Hned po nasazení FreshChat na e-shopu Smarty vylétla čísla nahoru.
- 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
- 21. U mě je to rychlý, ty nulo!
- 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.
- 26. Případ třetí: Smartsupp autodoplnky-obchod.cz Na Smartsupp se technika zástupného obrázku (placeholderu) použít nedá. Aktivně totiž komunikuje se zákazníkem.
- 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
- 38. Změřit Vyřešit Komunikovat @machal Jak na third parties?
- 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)