Improving Third-Party Web Performance

The most important and hardest thing to achieve when tackling web performance is trying to instil a performance culture. Third-parties make things even more difficult and that's why teams must work together, across the business, to break down those silos and tackle third-party problems head on.

Transcript

1. Improving third-party web performance
2. PERFORMANCE A large number of requests can affect page load and interactivity BROKEN EXPERIENCES Breaking page layouts and creating a janky user experiences SECURITY External scripts could capture user input on secure pages PRIVACY Third-party data processors may not be GDPR compliant 2
3. TECHNOLOGY Working with third-party providers for web enhancements EDITORIAL Highly dynamic and engaging content with external embeds MARKETING Bespoke pages, A/B testing and tracking pixels Challenges come from across the business... ADVERTISING External requests to large amounts of content ANALYTICS Multiple JavaScript includes for tracking user behaviour 3
4. Web Performance Working Group Auditing Dashboarding Monitoring Technical Improvements
5. 5 Team Dashboards Consider making web performance visible and relevant for each team within the organisation
6. Regular audits are important 6 REQUEST MAP DATA SHEETS http://requestmap.webperf.tools/ https://bit.ly/2KWT5WN
7. Audit regularly and keep a history of requests Tag Managers
8. ASYNC/DEFER Improve first paint metrics, remove single points of failure and design for resilience because JavaScript requests will fail SHORT TASKS A long task is any task that takes the browser longer than 50ms to perform. This will cause delay to user input so should be avoided SMALL BUNDLES The introduction of HTTP/2 allows for more requests between a client and server. Smaller JavaScript files mean they can be executed faster Technical improvements
9. 9 Monitoring Milestone timings - Start render, First CPU Idle Quantity based - Asset sizes (HTML, JS, Images) Rules based - Lighthouse score
10. 10 • Have a documented procedure in place • Define metrics that are important to you • Create an easy to use testing framework • https://3rdparty.io/ Testing third-party tag requests
11. Big brands that third-party providers want to work with have the ability to improve the web for everyone. Work directly with providers 11
12. The end result
13. Reducing number of third-parties over time
14. Deferring third-party scripts
15. Long Task Time - 71% reduction
16. First Ad Loaded - 40% improvement
17. Some future considerations... Aligning business metrics and goals Consider a proxy of third-parties via CDN A server-side tag manager for more control Challenge third-party providers to improve Faster development feedback 17
18. Thanks! Does anyone have any questions? linkedin.com/in/garethclubb @digitalclubb
19. Further reading • The Cost of JavaScript in 2018 - https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 • Identifying, Auditing, and Discussing Third-Parties - https://csswizardry.com/2018/05/identifying-auditing-discussing-third-parties/ • The 7 Habits of Highly Effective Performance Teams - https://www.youtube.com/watch?v=SE0HhF4TO0Q • Measuring The Impact of 3rd-Party Tags with WebPageTest - https://andydavies.me/blog/2018/02/19/using-webpagetest-to-measure-the-impact-of-3rd-party-t ags/ • Questions to Ask Your Third-Parties - https://simonhearne.com/2015/questions-to-ask-your-third-parties/