A presentation at Hyvä Meetup in in Rodenrijs, 2651 BT Berkel en Rodenrijs, Netherlands by Edwin Bos
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 **
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
Load Tag Manager on user interaction
Load Tag Manager on 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
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
You have just delivered your new Hyvä shop. On the test environment you had the magic 100 points in Pagespeed Insights, but now a tag manager has been turned on, several extra third-party scripts have been added and you see your score slowly drop and a slow site as a result. How do you deal with thirt-party tags in a smart way and ensure that your webshop remains super fast.
for free. You
can too.