Overview
The article discusses the importance of measuring and optimizing the performance of Single-Page Applications (SPAs) using Real User Monitoring (RUM) at LinkedIn. It highlights the challenges faced in measuring Page Load Time (PLT) and presents various strategies and optimizations that resulted in a 20% increase in application speed.
What You'll Learn
1
How to measure Page Load Time (PLT) accurately for Single-Page Applications using RUM
2
Why occlusion culling improves rendering performance in SPAs
3
When to apply lazy data fetching to enhance user experience
Prerequisites & Requirements
- Understanding of Single-Page Applications and Real User Monitoring concepts
- Familiarity with JavaScript MVC frameworks like Ember, AngularJS, or Marionette(optional)
Key Questions Answered
How does Real User Monitoring (RUM) enhance performance measurement for SPAs?
RUM enhances performance measurement for SPAs by collecting data from real users rather than synthetic environments, allowing for more accurate insights into user experiences and performance metrics like Page Load Time (PLT). This approach helps identify bottlenecks and optimize the application based on actual usage patterns.
What are the challenges of using window.onload() for measuring PLT in SPAs?
The window.onload() event is not reliable for SPAs because it fires too early in 'app launch' mode, not accurately reflecting when users see meaningful content. In 'subsequent' mode, this event does not fire at all, making it difficult to track performance accurately without alternative methods.
What optimizations were implemented based on RUM data to improve LinkedIn's web application?
Optimizations included occlusion culling to defer rendering of off-screen components, which improved rendering times by 50%, and lazy data fetching to reduce the transition phase duration by up to 40%. These strategies enhanced the overall user experience by speeding up the First Meaningful Paint.
Key Statistics & Figures
Performance improvement from optimizations
20%
The new LinkedIn web application became faster by 20% after implementing various RUM-based optimizations.
Reduction in render phase time
50%
The time spent in the render phase improved by 50% at both the 50th and 90th percentiles after implementing occlusion culling.
Improvement in transition phase time
40%
The transition phase improved by up to 40% after applying lazy data fetching techniques.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Ember
Used as a framework for building the LinkedIn web application and implementing performance optimizations.
Programming Language
Javascript
Utilized for building the SPA and implementing RUM strategies.
Key Actionable Insights
1Implement occlusion culling to enhance rendering performance by prioritizing components based on viewport visibility.This technique allows the application to defer rendering of components that are not currently visible, resulting in faster user interactions and improved perceived performance.
2Utilize lazy data fetching to optimize the transition phase and reduce unnecessary data processing.By fetching only the data needed for the First Meaningful Paint initially, applications can significantly decrease load times and improve user experience.
3Automate performance measurement using lifecycle hooks in SPA frameworks to streamline data collection.This reduces the manual effort required for instrumentation and ensures consistent performance tracking across different navigation types.
Common Pitfalls
1
Relying solely on synthetic performance metrics can lead to inaccurate conclusions about user experience.
Synthetic environments do not account for the variability of real-world usage, which can result in missed optimization opportunities that are only visible through RUM data.
2
Failing to automate performance instrumentation can lead to inconsistent data collection.
Manual instrumentation is tedious and error-prone; leveraging framework lifecycle hooks can ensure more reliable and consistent performance metrics.
Related Concepts
Performance Optimization Techniques
Real User Monitoring Best Practices
Single-page Application Architecture