Learn how Airbnb worked with the Chrome team to use the prioritized postTask scheduler to build a faster web experience
Overview
The article discusses the implementation of the prioritized postTask scheduler at Airbnb, aimed at enhancing web performance by efficiently scheduling tasks. It highlights the importance of user experience post-page load and provides insights into how this new API can reduce Total Blocking Time and improve responsiveness.
What You'll Learn
1
How to use the prioritized postTask scheduler to improve web performance
2
Why breaking long tasks into smaller ones enhances user experience
3
How to implement a preloading strategy for images using postTask
Prerequisites & Requirements
- Basic understanding of web performance metrics
- Familiarity with Chrome DevTools for performance monitoring(optional)
Key Questions Answered
What is the prioritized postTask scheduler and how does it improve performance?
The prioritized postTask scheduler is an API designed to efficiently schedule tasks in the browser's event loop, allowing developers to prioritize tasks that enhance user experience. By using this API, developers can reduce Total Blocking Time, First Contentful Paint, and Input Delays, thereby improving overall web performance.
How does breaking up long tasks improve responsiveness?
Breaking up long tasks into smaller, manageable tasks allows the browser to remain responsive to user interactions. This approach minimizes the chances of blocking the main thread, leading to a smoother user experience and faster interactions on the web page.
What are the benefits of deferring non-critical tasks?
Deferring non-critical tasks helps prioritize essential user interactions, such as entering search terms. By loading only the necessary scripts initially, the site can enhance perceived performance and responsiveness, ensuring that users can interact with the page without delays.
What is the experimental scheduler.wait and how can it be used?
The experimental scheduler.wait allows developers to pause task execution until a specific milestone or event occurs in the DOM. This feature can be particularly useful for loading third-party scripts after the main content has been rendered, improving initial load performance.
Key Statistics & Figures
Total Blocking Time improvement
nearly 10 seconds
This improvement was observed for a typical mobile web user on average hardware after implementing the postTask scheduler.
Total Blocking Time on search results page
nearly 16 seconds
This was the initial blocking time before the implementation of the postTask scheduler.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Posttask
Used for scheduling tasks efficiently in the browser's event loop.
Frontend
React
Utilized for building user interfaces and managing component states.
Key Actionable Insights
1Implement the prioritized postTask scheduler to enhance user experience on your web applications.By prioritizing tasks that impact user interactions, you can significantly reduce delays and improve the responsiveness of your application, leading to higher user satisfaction.
2Break long tasks into smaller tasks to prevent blocking the main thread.This practice not only improves the perceived speed of your application but also allows users to interact with your site more fluidly, which is crucial for maintaining engagement.
3Use the postTask scheduler to implement a preloading strategy for images in carousels.By preloading images based on user interactions, you can create a seamless experience that feels instantaneous, which is particularly important for visual-heavy applications.
Common Pitfalls
1
Failing to break long tasks can lead to a sluggish user experience.
When tasks take too long to execute without yielding control back to the browser, users may experience delays in interactions, leading to frustration and potential abandonment of the site.
2
Neglecting to cancel queued tasks can result in memory leaks.
If tasks are not properly aborted when components unmount or when users navigate away, it can lead to unnecessary resource consumption and degraded performance over time.
Related Concepts
Web Performance Optimization Techniques
Task Scheduling In Javascript
User Experience Design Principles