Awesome Web Performance

   

A curated list of awesome resources, tools, and tips to improve web performance.

Contents

• General Resources
• Performance Metrics
• Performance Tools
• Optimization Techniques
• Performance Budgeting
• Case Studies
• Blogs & Newsletters
• Books
• Talks & Videos
• Communities
• Courses & Tutorials

---

General Resources

• Web Performance 101 - Introduction to web performance.
• Google Web Fundamentals: Performance - Comprehensive guide to web performance.
• MDN Web Docs: Performance - Web performance documentation by Mozilla.

Performance Metrics

• Core Web Vitals - Google's essential metrics for user experience.
• Lighthouse Metrics - Google Lighthouse metrics for web performance.
• TTFB (Time to First Byte) - Explanation and importance of TTFB.

Performance Tools

• Google Lighthouse - Automated tool for improving the quality of web pages.
• WebPageTest - Detailed performance testing with real browsers.
• GTmetrix - Website performance testing and monitoring.
• Pingdom - Uptime and performance monitoring.
• PerfBudget - Set and track performance budgets.

Optimization Techniques

Network Optimization

• Critical Rendering Path - Understanding and optimizing the critical rendering path.
• HTTP/2 - How HTTP/2 improves performance.
• Image Optimization - Tools and techniques for optimizing images.

Frontend Optimization

• Lazy Loading - Techniques to delay loading of non-critical resources.
• Code Splitting - Splitting your code for faster load times.
• Minification - Minifying HTML, CSS, and JS.

Backend Optimization

• Server-Side Rendering (SSR) - How SSR can improve performance.
• Caching Strategies - Using cache to speed up content delivery.
• Content Delivery Networks (CDN) - How CDNs can improve performance.

Performance Budgeting

• Setting a Performance Budget - How to set and manage performance budgets.
• Performance Budget Calculator - Tool for calculating performance budgets.

Case Studies

• Pinterest - Pinterest's approach to improving performance.
• The Guardian - How The Guardian improved their web performance.

Blogs & Newsletters

• Web.Dev Blog - Official blog for web development and performance tips.
• CSS Tricks - Articles related to web performance.
• PerfPlanet - Performance tips, tricks, and articles.

Books

• High Performance Browser Networking by Ilya Grigorik - A book on how browsers interact with the network.
• Web Performance in Action by Jeremy Wagner - Practical techniques for improving web performance.
• Designing for Performance by Lara Hogan - Techniques for a faster, more efficient web.

Talks & Videos

• Designing for Performance - Talk by Lara Hogan.
• Web Performance Made Easy - Google I/O talk on web performance.
• The Cost of JavaScript - Google Chrome Developers talk on JS performance.

Communities

• PerfPlanet Slack - Slack community for web performance.
• r/webdev - Reddit community with discussions on web performance.

Courses & Tutorials

• Udacity: Website Performance Optimization - Free course on web performance.
• Frontend Masters: Web Performance - In-depth course on web performance optimization.

Contribute

Contributions are welcome!

License