We all want lightning-fast websites and applications, but how do we prioritize our efforts in order to have the biggest impact on website performance? Join our expert team in this webinar as they share best practices when identifying bottlenecks, monitoring optimizations, and communicating the impact of their work to the wider team. You'll learn: - How to use the latest industry metrics to identify poor performance - Where to prioritize your time in order to achieve the biggest performance wins - Best practices for measuring and reporting performance optimizations Proudly brought to you by Raygun Real User Monitoring. Watch the full webinar and read the key takeaways here: https://raygun.com/blog/resolve-frontend-performance-bottlenecks

1. How to easily identify
and resolve front-end
performance bottlenecks

2. ● Intros
● The move to user-centric metrics
● Process overview
○ Identifying performance problems
○ Diagnose the issue
○ Measuring the impact
● Examples
● Q+A
Agenda

3. Quick Poll

4. Ben Harding
Application Team Lead
Sumitra Manga
Public Site Engineer
Meet the presenters:
Nicholas Lane
Product Manager

5. User-centric performance metrics

6. Why are we talking about this?
● Users demanding fast performing software
● Performance is inextricably linked to user experience & business outcomes
● Load time doesn’t paint the full picture

7. What’s new?
● User centric performance metrics are the new standards for performance

8. Identify performance problems

9. ● Trends
● Spikes
● Deployments
● Events/changes
Monitoring

10. ● Zoom in on areas of interest
● Look at different metrics and
outliers
Be curious...

11. Diagnose the issue

12. Get the details
● Drill into a particular page
● Histogram breakdown
● Individual users

13. ● Waterfall chart
● View a specific XHR

14. Prioritize for impact

15. Measuring the impact

16. Track performance changes
● View performance trends and see
the impact of deployments
● Drill into specific metrics where you
hope to have the biggest impact

17. ● Compare time periods
for a specific page

18. ● Also compare waterfall views of that page (before
and after changes) to track changes such as lessen
calls or reduced time to load certain assets

19. ● Latest vs previous deployment
● Browsers types
● Geography for cities and countries
Compare variables

20. Examples

21. Identify & Diagnose:
○ Code being shipped contains whitespaces, comments and unneeded information
Take action:
○ Use a minifying tool
○ Automate into your build process
○ Easy to implement
Measure: Load times for each asset is reduced
Minification

22. Identify & Diagnose
○ New deployment to website has increased page load
○ Drill into what page is causing this, with bias towards pages with highest visitor volume
○ Check waterfall and identify ‘heavy’ assets taking the longest to load
Take action: Optimize assets
○ Compress images
○ Reduce requests and better the user experience load time all at once
○ Make use of the “srcset” attribute
Measure: Deploy and check for performance gains
Image optimization

23. Identify & Diagnose:
○ Waterfall of network requests shows dozens of image requests
Take action:
○ Create a sprite-sheet for images
○ Use SVG symbol for vector assets
Measure:
○ Far less requests on the waterfall
○ Combined images appear at the same time, instead of one-by-one
Reduce number of requests

24. Identify: Website optimizations
Diagnose: Pages that have a lot of scripts and also have high traffic present an opportunity
Take action: Preloading the script
○ Using the rel property in the link element: preload and prefetch
○ Hinting the browser that we’re needing the asset (by the time it calls it, it’s ready to use)
○ Great for fonts!
Measure: Had a big impact on FCP and FP
Preloading the script

25. Identify & Diagnose:
○ Browser is waiting for requests before initially rendering (blocking requests)
○ JavaScript/CSS assets look to be the main offenders
Take action:
○ Marking JavaScript assets as “defer” or “async”
○ Make use of media queries when including CSS files
Measure:
○ Browser no longer waits for assets before initially rendering
Limiting blocking requests

26. Identify: Product page updates resulted in slower FP, FCP
Diagnose: New animations causing slower performance and putting strain on CPU
Take action: Trigger events/animation only once you scroll
○ Calling Intersection Observer API only when user move down the page (don’t forget to disconnect the
function after!)
○ Lazy load images
Measure: CR page performance gains, FP, FCP (no pending assets)
○ Run time performance gains, less pressure on the CPU
Intersection Observer API

27. Ben Harding
Application Team Lead
Sumitra Manga
Public Site Engineer
Questions
Nicholas Lane
Product Manager

28. Thank you!