Making Slack Faster By Being Lazy

Software performance is like a series of card tricks: Do less up front. Be really lazy. Prepare in the background. Be one step ahead of the user. Whether doing magic with cards or a browser, it doesn’t hurt to have an ace up your sleeve. ♠️ This two-part series is about our work refactoring part of the Slack desktop client…

Slack logo
Slack
•
Scott Schiller
•14 min read•advanced•
--
•View Original
CDNChefJavaScriptLessLocalStorageReactWebSocket

Overview

The article discusses performance optimization strategies implemented in the Slack desktop client by adopting a 'lazy' approach to data fetching and processing. Key points include the importance of minimizing upfront work, leveraging background preparation, and using user behavior to enhance responsiveness.

What You'll Learn

1

How to optimize data fetching in a web application to improve performance

2

Why lazy loading can enhance user experience in large applications

3

When to implement prefetching strategies based on user behavior

Key Questions Answered

How does Slack improve performance through lazy loading?
Slack improves performance by minimizing upfront data fetching, only loading messages for the active channel instead of all channels. This reduces the number of API calls and enhances the perceived speed of the application, making it feel more responsive to users.
What are the benefits of using the users.counts API in Slack?
The users.counts API allows Slack to quickly determine which channels have unread messages and mentions, enabling the client to update the channel list's state in a single request. This significantly reduces the time taken to display important notifications to users.
What is the impact of performance optimization on load times?
Following optimization efforts, Slack clients experienced a 10% improvement in load times across the board, with extreme cases seeing reductions of up to 65%. This demonstrates the effectiveness of the refactoring strategies employed.

Key Statistics & Figures

Load time improvement
10%
This improvement was observed across all clients following the optimization work.
Maximum load time reduction
65%
This significant reduction was noted in extreme cases, such as during stress tests.

Technologies & Tools

Communication
Websocket
Used for real-time message transport in the Slack desktop client.
Backend
API
Facilitates data fetching for messages and channel states.

Key Actionable Insights

1
Implement lazy loading techniques to enhance application performance.
By loading only necessary data when required, applications can reduce initial load times and improve user experience, particularly in environments with large datasets.
2
Utilize user behavior data to inform prefetching strategies.
Understanding which channels users access most frequently allows applications to prioritize loading those messages, ensuring a smoother experience.
3
Adopt a continuous performance monitoring approach.
Regularly measuring performance metrics helps identify bottlenecks and informs future optimization efforts, ensuring the application remains responsive as usage patterns evolve.

Common Pitfalls

1
Overloading the client with too many API calls at startup can lead to performance degradation.
This happens when the application attempts to fetch data for all channels simultaneously, causing delays and a poor user experience. To avoid this, limit initial data fetching to only what is necessary.
2
Failing to consider user behavior when implementing prefetching strategies.
Without analyzing which channels users access most frequently, prefetching can lead to unnecessary data loading, wasting resources and potentially slowing down the application.