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
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
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
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
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