Overview
The article discusses the optimization of LinkedIn's My Network tab by reducing latency and enhancing user experience through architectural changes and a new domain model. Key improvements include a unified API endpoint and prebuilt caching strategies that significantly decrease load times and enhance member engagement.
What You'll Learn
1
How to unify multiple API endpoints into a single endpoint for improved performance
2
Why prebuilding cohorts during initial load can reduce latency significantly
3
How to implement a render model for flexible UI updates
Prerequisites & Requirements
- Understanding of API design and frontend development principles
- Familiarity with caching mechanisms(optional)
Key Questions Answered
What were the main challenges faced in optimizing the My Network tab?
The main challenges included fragmented data processing between Mobile and Web clients, which led to visual disruptions, and the engineering complexity of onboarding new cohorts. These issues necessitated a more coordinated API handling and UI rendering approach to enhance the user experience.
How did the new architecture improve the My Network tab's performance?
The new architecture unified multiple API endpoints into a single endpoint, allowing for pagination and faster responses. This change, along with prebuilding cohorts in cache, reduced the P99 latency of the initial call by approximately 40%, significantly enhancing the loading experience.
What results were achieved after the optimization of the My Network tab?
Post-optimization, the My Network tab saw a 43% reduction in 90th percentile latency, a decrease in cost to serve by seven figures, and improved member engagement. Additionally, Largest Contentful Paint (LCP) improved by 12%, and first input delay decreased by 90% on the web.
Key Statistics & Figures
P99 latency reduction
40%
Achieved through prebuilding cohorts and optimizing API calls.
90th percentile latency reduction
43%
Post-optimization of the My Network tab.
Cost to serve reduction
seven figures
Significant savings achieved after the optimization.
Largest Contentful Paint (LCP) improvement
12%
Improved performance metrics after the changes.
First input delay reduction
90%
Enhanced responsiveness on the web post-optimization.
Technologies & Tools
Backend
API
Used for unifying data retrieval processes and improving performance.
Backend
Caching
Implemented to reduce latency and improve data serving speed.
Key Actionable Insights
1Implementing a unified API endpoint can streamline data retrieval processes and enhance performance.This approach reduces the complexity of managing multiple endpoints and allows for better coordination between frontend and backend systems, ultimately leading to a smoother user experience.
2Utilizing caching effectively can significantly decrease latency and improve application responsiveness.By prebuilding data and storing it in cache, applications can serve content faster, which is crucial for maintaining user engagement in high-traffic environments.
3Adopting a render model can simplify frontend updates and reduce the need for extensive client-side logic.This strategy allows for easier adjustments to UI components without requiring changes across multiple client implementations, thus speeding up the development process.
Common Pitfalls
1
Failing to coordinate API calls can lead to visual disruptions and a poor user experience.
When multiple independent API calls are made without synchronization, it can result in UI elements appearing out of order, confusing users and degrading the overall experience.
2
Overcomplicating client-side logic can hinder performance and slow down development.
By moving heavy business logic to the API and simplifying client requirements, teams can achieve better performance and faster iteration cycles.