Overview
The article discusses ten strategies implemented by SlideShare to reduce page load time from an average of 7.5 seconds to 5 seconds. These strategies include optimizing JavaScript loading, using caching techniques, and redesigning the HTML5 player.
What You'll Learn
1
How to load third-party libraries asynchronously to improve page load times
2
Why combining and compressing JavaScript files can enhance performance
3
How to implement lazy loading for user-generated content to optimize resource usage
4
How to redesign a complex HTML5 player for better performance
Key Questions Answered
What techniques did SlideShare use to reduce page load time?
SlideShare implemented several techniques to reduce page load time, including loading third-party libraries asynchronously, combining and compressing JavaScript files, and lazy loading user-generated content. These strategies collectively helped decrease the average load time from 7.5 seconds to 5 seconds.
How did redesigning the HTML5 player impact performance?
Redesigning the HTML5 player allowed SlideShare to improve performance by generating markup on the backend instead of the client side, reducing DOM manipulation. This change, along with effective CSS usage, contributed to a significant reduction in load time.
Key Statistics & Figures
Average page load time
5.03 seconds
This was achieved after implementing the discussed optimizations, down from an average of 7.5 seconds.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Javascript
Used for loading third-party libraries and enhancing the HTML5 player.
Frontend
Html5
The core technology for SlideShare's player, redesigned for better performance.
Key Actionable Insights
1Load third-party libraries after the window.load event to enhance initial page load speed.This approach ensures that essential content is rendered quickly while deferring non-critical scripts, which can significantly improve user experience.
2Use lazy loading for user-generated content to minimize initial load times.By only loading content when users interact, you can reduce the amount of HTML and JavaScript that needs to be parsed initially, leading to faster load times.
3Implement cache busters for assets to ensure browsers cache effectively.This technique helps manage asset updates without forcing users to download unchanged files, optimizing load times and resource usage.
Common Pitfalls
1
Failing to load third-party libraries asynchronously can block page rendering.
This often leads to longer load times, as the browser waits for these scripts to load before rendering the page.
Related Concepts
Performance Optimization Techniques
Javascript Loading Strategies
Html5 Player Design