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:
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.