Key Takeaways
1. Reduce HTTP requests to dramatically improve frontend performance
80–90% of the end user response time is spent downloading all the components in the page.
Frontend optimization is critical. While backend performance is important, the majority of response time is spent downloading page components like images, stylesheets, and scripts. Reducing the number of these components through techniques like CSS sprites, image maps, and inline images can significantly improve load times. Combining multiple JavaScript files or CSS files into single files also reduces HTTP requests. By focusing on minimizing components, you can achieve the biggest gains in frontend performance.
- Key techniques for reducing HTTP requests:
- CSS sprites for combining multiple images
- Image maps for navigation elements
- Inline images using data: URLs
- Combining JavaScript and CSS files
2. Leverage browser caching with far future Expires headers
A far future Expires header eliminates the need to check with the server by making it clear whether the browser can use its cached copy of a component.
Maximize browser caching. Setting far future Expires headers (1 year or more) for static components allows browsers to cache them long-term, eliminating unnecessary HTTP requests on subsequent page views. While this requires changing filenames when updating components, the performance gains are substantial. For dynamically generated content that changes frequently, shorter expiration times are appropriate. Proper cache headers can dramatically reduce server load and improve page load times for repeat visitors.
- Benefits of far future Expires headers:
- Eliminates HTTP requests for cached components
- Reduces server load
- Improves page load times for repeat visitors
- Considerations:
- Requires changing filenames when updating components
- Use shorter expiration for dynamic content
3. Compress components with gzip to reduce transfer time
Gzipping generally reduces the response size by about 70%.
Enable gzip compression. Gzip compression can significantly reduce the size of HTTP responses, typically by about 70%. This decreases transfer times, especially beneficial for users with slower connections. While there is a small CPU cost to compression and decompression, the bandwidth savings far outweigh this. Configure your web server to gzip HTML documents, JavaScript, CSS, and other text responses. Avoid gzipping already compressed formats like images and PDFs. Properly implemented, gzip compression is one of the simplest and most effective performance optimizations.
- Components to gzip:
- HTML documents
- JavaScript files
- CSS files
- XML and JSON responses
- Don't gzip:
- Images
- PDF files
4. Place CSS at the top and JavaScript at the bottom of HTML documents
Placing stylesheets near the bottom of the document prohibits progressive rendering in many browsers.
Optimize CSS and JavaScript placement. Putting stylesheets at the top of HTML documents allows browsers to load them quickly and render the page progressively. This provides visual feedback to users faster. Conversely, placing JavaScript files at the bottom of the document prevents them from blocking downloads of other components. This approach balances quick visual rendering with efficient resource loading. When possible, load non-essential scripts after the page load event to further improve perceived performance.
- CSS placement:
- Put in <head> section
- Use <link> tag, not @import
- JavaScript placement:
- Put before </body> tag
- Load non-essential scripts after page load
5. Minimize and combine JavaScript and CSS files
On average, JSMin reduced the size of JavaScript files by 21%, while Dojo Compressor achieved a 25% reduction.
Reduce file sizes. Minifying JavaScript and CSS by removing comments, whitespace, and unnecessary characters can significantly reduce file sizes. Tools like JSMin for JavaScript and CSS minifiers can automate this process. Additionally, combining multiple JavaScript or CSS files into single files reduces HTTP requests. While this may slightly increase the size of the initial download, it improves caching efficiency and reduces overhead on subsequent page views. For larger sites, implement a build process to handle minification and combination automatically.
- Minification techniques:
- Remove comments and whitespace
- Shorten variable and function names
- Use shorter syntax alternatives
- Combination strategies:
- Group files by page or functionality
- Use server-side includes or build tools
6. Use content delivery networks (CDNs) to reduce latency
If the component web servers are closer to the user, the response times of many HTTP requests are improved.
Leverage CDNs for static content. Content delivery networks distribute your static content across multiple, geographically dispersed servers. This reduces latency by serving content from a server closer to the user's physical location. While CDNs were traditionally used by large companies, many affordable options now exist for smaller sites. CDNs are particularly effective for sites with a geographically diverse user base. They not only improve response times but can also help absorb traffic spikes and reduce the load on your primary web servers.
- Benefits of using a CDN:
- Reduced latency for geographically diverse users
- Improved ability to handle traffic spikes
- Reduced load on origin servers
- Consider CDNs for:
- Images
- JavaScript files
- CSS files
- Large downloadable files
7. Optimize Ajax requests for better Web 2.0 application performance
Using Ajax is no guarantee that the user won't be twiddling his thumbs waiting for those "asynchronous JavaScript and XML" responses to return.
Make Ajax responses cacheable. While Ajax can improve the user experience in Web 2.0 applications, it's not inherently fast. Optimize Ajax responses by making them cacheable with appropriate headers. Use GET requests for Ajax calls that don't modify data, allowing browsers to cache the responses. Minimize the size of Ajax responses by using efficient data formats like JSON. For predictable user actions, consider prefetching data with Ajax to improve perceived performance. Always provide feedback to users during long-running Ajax requests to maintain a responsive feel.
- Ajax optimization techniques:
- Use GET for cacheable requests
- Minimize response size (use JSON)
- Prefetch predictable data
- Provide user feedback for long-running requests
8. Configure ETags properly to improve caching efficiency
ETags generated by Apache and IIS for the exact same component won't match from one server to another.
Optimize or remove ETags. Entity tags (ETags) are used to validate cached components, but their default implementation in Apache and IIS can actually hinder caching in multi-server environments. This is because the default ETag includes server-specific information, causing unnecessary revalidation. For multi-server setups, either configure ETags to exclude this information or remove them entirely, relying instead on Last-Modified headers. Properly configured ETags can improve caching efficiency, but improperly configured ones can degrade performance.
- Options for handling ETags:
- Remove ETags entirely
- Configure to exclude server-specific information
- Use only for resources that change frequently
9. Avoid redirects whenever possible to reduce round trips
Redirects are an easy way to solve many problems, but it's better to use alternative solutions that don't slow down page loading.
Eliminate unnecessary redirects. Each redirect creates an additional HTTP request-response cycle, adding latency to page loads. Common uses of redirects, such as connecting web sites or tracking outbound links, can often be replaced with more efficient alternatives. For example, use server-side includes or URL rewriting instead of redirects to connect different parts of a website. For tracking outbound links, consider using beacon images or the XMLHttpRequest object instead of redirects. When redirects are unavoidable, use permanent (301) redirects to allow browsers to cache the new location.
- Alternatives to redirects:
- Server-side includes
- URL rewriting
- Alias or mod_rewrite in Apache
- Beacon images for tracking
10. Reduce DNS lookups to minimize connection delays
If you have multiple servers hosting your web site and you're using Apache or IIS with the default ETag configuration, your users are getting slower pages, your servers have a higher load, you're consuming greater bandwidth, and proxies aren't caching your content efficiently.
Optimize DNS usage. DNS lookups add latency to HTTP requests, especially on mobile networks. Reduce the number of unique hostnames used in your web pages to minimize DNS lookups. However, balance this with the need for parallel downloads - using 2-4 hostnames can increase parallelization without excessive DNS overhead. Use Keep-Alive connections to reduce the frequency of DNS lookups for repeat requests to the same hostname. Consider using a content delivery network (CDN) to reduce DNS lookup times for geographically diverse users.
- Strategies for reducing DNS impact:
- Limit unique hostnames to 2-4 per page
- Use Keep-Alive connections
- Consider using a CDN
- Investigate DNS prefetching for critical domains
Last updated:
FAQ
1. What’s "High Performance Web Sites" by Steve Souders about?
- Focus on Frontend Performance: The book explains that 80–90% of web page load time is spent on the frontend, not the backend, and provides actionable rules to optimize this.
- 14 Performance Rules: Souders presents 14 prioritized rules for making web sites faster, each explained in its own chapter with real-world examples.
- Practical, Data-Driven Advice: The book is based on research and extensive testing, offering practical techniques that can be implemented with minimal effort for significant speed gains.
- Covers a Range of Technologies: Topics include HTTP, caching, compression, JavaScript, CSS, CDNs, DNS, and Ajax, making it a comprehensive guide for web developers.
- Case Studies and Tools: The book analyzes top websites and introduces tools like YSlow to help developers measure and improve performance.
2. Why should I read "High Performance Web Sites" by Steve Souders?
- Immediate Impact on Speed: Implementing even a few of the book’s rules can make web pages noticeably faster, improving user experience and retention.
- Frontend Optimization Focus: It shifts the common misconception that backend is the main bottleneck, showing that frontend changes often yield bigger, faster wins.
- Actionable and Accessible: The rules are clear, concise, and often require only configuration changes or minor code adjustments, making them accessible to most developers.
- Industry Endorsements: The book is praised by leading developers and is considered essential reading for web developers and performance engineers.
- Long-Term Benefits: Most optimizations are one-time tweaks that continue to pay off as your site grows and evolves.
3. What are the key takeaways from "High Performance Web Sites"?
- Frontend Dominates Load Time: The majority of user wait time is due to frontend issues, not backend processing.
- 14 Rules for Speed: Following the book’s prioritized rules can reduce page load times by 25–50% or more.
- Caching and Fewer Requests: Techniques like reducing HTTP requests, leveraging browser caching, and combining files are among the most effective.
- Measure and Profile: Always profile your site to identify where the biggest gains can be made, using tools like YSlow and Firebug.
- Continuous Improvement: Performance is an ongoing process; regularly review and update your practices as your site and technology evolve.
4. What is the "Performance Golden Rule" in "High Performance Web Sites" by Steve Souders?
- Backend vs. Frontend Time: Only 10–20% of end user response time is spent downloading the HTML document; the remaining 80–90% is spent on frontend components.
- Optimization Focus: To achieve the greatest performance improvements, focus on optimizing the frontend—images, scripts, stylesheets, and other resources.
- Diminishing Returns on Backend: Halving backend response time yields only minor overall gains, while halving frontend time can cut total load time by up to 45%.
- Easier and Faster to Implement: Frontend optimizations typically require less time and fewer resources than backend changes.
- Proven Results: Many teams at Yahoo! and elsewhere have achieved 25% or greater reductions in response times by following this rule.
5. What are the 14 rules for high performance web sites according to Steve Souders?
- Rule 1: Make Fewer HTTP Requests: Reduce the number of components (images, scripts, stylesheets) to minimize HTTP overhead.
- Rule 2: Use a Content Delivery Network (CDN): Serve static content from geographically distributed servers to reduce latency.
- Rule 3: Add an Expires Header: Leverage browser caching by setting far-future Expires or Cache-Control headers on static resources.
- Rule 4: Gzip Components: Compress HTML, CSS, and JavaScript to reduce transfer size and speed up downloads.
- Rule 5: Put Stylesheets at the Top: Place CSS in the document HEAD to enable progressive rendering and avoid blank screens.
- Rule 6: Put Scripts at the Bottom: Move JavaScript to the end of the page to prevent blocking rendering and parallel downloads.
- Rule 7: Avoid CSS Expressions: Don’t use dynamic CSS expressions in IE, as they can cause severe performance issues.
- Rule 8: Make JavaScript and CSS External: Use external files for better caching and reuse, except in rare cases like homepages.
- Rule 9: Reduce DNS Lookups: Limit the number of unique hostnames to minimize DNS resolution delays.
- Rule 10: Minify JavaScript: Remove unnecessary characters from code to reduce file size and improve load times.
- Rule 11: Avoid Redirects: Eliminate unnecessary HTTP redirects, which delay page loading.
- Rule 12: Remove Duplicate Scripts: Ensure scripts are included only once to avoid extra downloads and execution.
- Rule 13: Configure ETags: Remove or standardize ETags to prevent cache misses in multi-server environments.
- Rule 14: Make Ajax Cacheable: Apply caching and other performance rules to Ajax requests for dynamic applications.
6. How does "High Performance Web Sites" by Steve Souders recommend reducing HTTP requests, and why is this important?
- Biggest Impact on Load Time: Reducing HTTP requests is the single most effective way to speed up initial page loads, especially for first-time visitors.
- Techniques Provided: Use image maps, CSS sprites, inline images (with data: URLs), and combine scripts and stylesheets to cut down the number of requests.
- Balance Design and Performance: These methods allow you to maintain rich designs without sacrificing speed.
- Development Workflow: Modularize code during development, but use a build process to combine files for production.
- Real-World Results: Examples in the book show up to 50% faster load times by applying these techniques.
7. What is the role of caching and the Expires header in "High Performance Web Sites"?
- Browser Caching: Setting a far-future Expires or Cache-Control header allows browsers to reuse cached resources, reducing repeat HTTP requests.
- Primed vs. Empty Cache: Most users and page views benefit from caching, as a significant percentage revisit sites with a primed cache.
- Beyond Images: Apply caching headers to all static resources—images, scripts, stylesheets, and Flash—not just images.
- Filename Versioning: When updating resources, change filenames (e.g., add version numbers) to ensure users get the latest versions.
- Dramatic Speed Gains: Proper caching can cut response times for repeat visits by 50% or more.
8. How does "High Performance Web Sites" by Steve Souders address compression and file size reduction?
- Gzip Compression: Enable gzip (or deflate) on your server for HTML, CSS, and JavaScript to reduce file sizes by about 70%.
- What to Compress: Only compress text-based files; images and PDFs are already compressed and don’t benefit.
- Configuration Tips: The book provides Apache configuration examples for mod_gzip and mod_deflate, and discusses handling edge cases with proxies and browser bugs.
- Minification: Remove comments and whitespace from JavaScript (and CSS) using tools like JSMin for further size reduction.
- Combined Effect: Gzipping and minifying together maximize bandwidth savings and speed.
9. What are the best practices for JavaScript and CSS placement and management in "High Performance Web Sites"?
- External Files Preferred: Use external JavaScript and CSS files for better caching and reuse, except in special cases like homepages.
- Placement Matters: Put stylesheets in the HEAD for progressive rendering; place scripts at the bottom to avoid blocking downloads and rendering.
- Combining Files: Merge multiple scripts and stylesheets into single files to minimize HTTP requests.
- Minify and Gzip: Always minify and gzip these files to reduce size and improve load times.
- Special Techniques: For homepages, consider inlining or dynamic inlining with post-onload downloads to balance speed and caching.
10. How does "High Performance Web Sites" by Steve Souders recommend handling DNS lookups and redirects?
- Reduce Unique Hostnames: Limit the number of domains used for resources to minimize DNS resolution delays (each lookup can take 20–120ms).
- Balance Parallel Downloads: Use 2–4 hostnames to allow parallel downloads without excessive DNS lookups.
- Keep-Alive Connections: Enable persistent connections to further reduce DNS lookups and connection overhead.
- Avoid Redirects: Eliminate unnecessary HTTP redirects, as they delay the delivery of the HTML document and all resources.
- Alternatives to Redirects: Use server configuration (Alias, mod_rewrite) and referer logging instead of redirects for tracking and URL management.
11. What are ETags, and why does "High Performance Web Sites" by Steve Souders advise configuring or removing them?
- ETag Definition: ETags are unique identifiers for resource versions, used by browsers to validate cached content.
- Multi-Server Issues: Default ETag formats in Apache and IIS include server-specific data, causing cache misses when requests are served by different servers.
- Performance Impact: Mismatched ETags force unnecessary downloads, increasing load times and bandwidth usage.
- Recommended Solution: Remove ETags or configure them to be consistent across servers, relying on Last-Modified headers for cache validation.
- Real-World Prevalence: Many top sites have not addressed this, leading to avoidable performance penalties.
12. How does "High Performance Web Sites" by Steve Souders apply its rules to Ajax and modern web applications?
- Ajax Performance Matters: The same frontend rules
Review Summary
High Performance Web Sites receives mixed reviews, with an overall positive reception. Many readers find it informative and essential for web developers, praising its practical advice on improving website performance. Some highlight its continued relevance despite its age, while others consider it outdated. The book is commended for explaining the reasoning behind optimization techniques and providing concrete examples. Critics note that some information is now widely available online or through tools like YSlow. Overall, it's seen as a valuable resource for understanding web performance fundamentals.
Download PDF
Download EPUB
.epub digital book format is ideal for reading ebooks on phones, tablets, and e-readers.
