Late to the party

Late to the party Everything about loading third-party scripts

Edwin Bos Lead Front-End @ Cream

Late to the party Everything about loading third-party scripts, like: • • • • • • • conversion trackers visitor behaviour trackers chat widgets YouTube video’s Tag Manager analytics etc.

Late to the party Everything about loading third-party scripts, like: • • • • • • • conversion trackers visitor behaviour trackers chat widgets YouTube video’s Tag Manager analytics etc.

Why performance matter A one-second delay in mobile load times can impact conversion rates by up to 20% * Back in 2006, Amazon found that every 100ms in added page load time cost them 1% in sales **

• Source: SOASTA,The State of Online Retail Performance, U.S., April 2017. ** http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

Why performance matter If a slow experience drives customers away, a fast experience can help attract and keep them

Is 100 points at pagespeed the ultimate goal?

Is 100 points at pagespeed the ultimate goal? Pagespeed Insights a good starting point Better insight with Devtools and tools like WebPageTest

The waterfall

But first the low hanging fruits Scripts in tag manager from old site Scripts that are loaded without a subscription Script that do something, but no important for the business Use native functionalities, like the Share API

Use alternative script Load YouTube with Lite YouTube Embed, 224x faster https://github.com/paulirish/lite-youtube-embed Load Google Analytics 4 with Minimal Analytics 4, just 2kb https://gist.github.com/idarek/9ade69ac2a2ef00d98ab950426af5791?s=09

Avoid render blocking resources

Avoid render blocking resources

Avoid render blocking resources

Avoid render blocking resources

Adobe Typekit example

Preconnect & Prefetch

Pre-connect & Pre-fetch

Host third-party scripts locally This makes a third-party script a rst-party script You can re-download the script every night if they change a lot fi Google Fonts is the best example (but not a script)

Load Tag Manager or scripts on user interaction You can load Tag Manager on rst interaction fi Or set an event for user interaction

Load Tag Manager on user interaction The moment the user has its rst interaction, the JavaScript get loaded. A user interaction is: Touchstart mouseover, wheel scroll keydown fi • • • • •

Load Tag Manager on user interaction

Load Tag Manager on user interaction

Load Tag Manager on user interaction

Load Tag Manager on user interaction

• Source: https://docs.hyva.io/hyva-themes/writing-code/patterns/loading-external-javascript.html

Load Tag Manager on user interaction

• Source: https://docs.hyva.io/hyva-themes/writing-code/patterns/loading-external-javascript.html

Load Tag Manager on user interaction

• Source: https://docs.hyva.io/hyva-themes/writing-code/patterns/loading-external-javascript.html

Set trigger for user interaction

Set trigger for user interaction

Set trigger for user interaction

Set trigger for user interaction

Set trigger for user interaction

Set trigger for user interaction

Load other script on user interaction For example TrustedShops

Load other script on user interaction

Load other script on user interaction

Load chat widget on click How many people do use the chat? Chat widgets are large (500kb - 1MB), created in React or other libraries Load it on click on fake button

Partytown (beta) Get third-party script of the main thread https://partytown.builder.io/

Partytown

Partytown

Client side GTM vs. Server side GTM

GTM server side Browser-based tracking and cookies won’t last long server-side tracking is the future fi It can make third-party script, rst-party scripts

GTM server side Only for tracking, analytics, marketing code You still have scripts that needs JavaScript client side It can get expensive (especially if you’re doing it wrong) Server-side tracking can get very technical, very fast

This is the end, beautiful friend Questions ???

This is the end, beautiful friend https://twitter.com/edwinbos1

Thanks for watching