Rule 1: Make Fewer HTTP Requests
- Use CSS Sprites (or the less flexible image maps).
- Use the data: URL scheme (usually for inlining images but applicable anywhere a URL is specified, including the SCRIPT tag.)
- Merge JavaScript; merge CSS files. Use a build system to do it automatically.
Rule 2: Use a Content Delivery Network
Use CDN to host static content.- Pros: improved response time, backup service, high storage capacity, better caching, resilient to traffic spikes.
- Cons: affected by other CDN clients, indirect control of content servers, subject to the performance of CDN.
Rule 3: Add an Expires Header
- Set a far future Expires HTTP header.
(e.g.Expires: Tue, 19 Jan 2037 00:00:00 GMT
) - Set a Cache-Control header.
(e.g.Cache-Control: max-age=315360000
) - Change links when resources change. Embed file revision number or fingerprint in the URL to bust the browser cache.
Rule 4: Gzip Components
- Turn on gzip for highly compressible content such as HTML, JavaScript, and CSS.
- Use mod_gzip for Apache 1.3 and mod_deflate for Apache 2.x.
Rule 5: Put Stylesheets at the Top
- Put CSS in the document HEAD using the LINK tag.
(e.g.<link rel="stylesheet" href="style.css"/>
)
Rule 6: Put Scripts at the Bottom
- Put SCRIPTs to the bottom of the page so that they don't block rendering and parallel downloads of other resources.
Rule 7: Avoid CSS Expressions
- CSS expressions are generally slow and dangerous. (They are also deprecated in IE8.) Do not use them.
Rule 8: Make JavaScript and CSS External
- Put large, reusable JavaScript and CSS in external files.
Rule 9: Reduce DNS Lookups
- Reuse connections by setting
Connection: Keep-Alive
in the header. - Use fewer domains to reduce DNS lookups.
Rule 10: Minify JavaScript
- Minify JavaScript source code using tools like Closure Compiler and JSMin.
Rule 11: Avoid Redirects
- Avoid redirecting URL just because it's missing a trailing slash.
- Not mentioned in the book, but it's better to serve both desktop and mobile versions of a page from the same URL.
Rule 12: Remove Duplicate Scripts
- Make sure scripts are included only once.
Rule 13: Configure ETags
- Either turn off ETags or generate ETags that uniquely identify a specific version of a resource. The default ETag formats of popular web servers are not cache-friendly.
Rule 14: Make Ajax Cacheable
- Make Ajax response cacheable by following rule 3, 4, 9, 10, 11, 13.
High Performance Web Sites is short and easily digestible. It's a pertinent book on speed optimization for web developers, although professional web frontend engineers may find it short of original ideas they are not already aware of.
No comments:
Post a Comment