A great 80-90% of user time is spent on the front end of a website. A lot of optimization techniques are available to create a great user experience. A 80/20 performance rule by Vilfredo Pareto states that 80% of the consequences comes from 20% of the causes, therefore, it becomes extremely important to focus on the 20% that affects the 80% of the end-user response time.
To create a high-performing website, website developers can follow the Golden-14 rules that optimizes the performance of a website:
- Make fewer HTTP Requests
- Use a CDN (Content Distribution Network)
- Add an Expires header
- Gzip components
- Put stylesheets at the top
- Move scripts to the bottom
- Avoid CSS Expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Configure Etags
- Make AJAX cacheable
We will now look at each of the rules to understand those a little better.
1. Make fewer HTTP Requests to reduce the number of HTTP requests, one can:
- Combine scripts
- Combine style sheets
- Combine images into an image map
2. Use a Content Distribution Network
CDNs have servers all over the world. They distribute your content so downloading a webpage can come from a nearby location. Some well known CDNs are Akamai, SAVVis, Limelight, Amazon CloudFront
3. Add an Expires header
An Expires header tells the cache whether to deliver an object from the cache or request a new version. Adding an expires header prevents the cache from requesting a new version of the web object.
4. Gzip components
Compression works when a web server like Apache is setup to “compress” resources and when a client’s browser accepts such compressed resources. During the initial negotiation if both browser and server support at least one common compression methods, then the transfer is compressed.
5. Put Stylesheets at the top
Different browsers render webpages differently. Some browsers, like Firefox doesn’t wait for the entire webpage to be downloaded. It waits for a stylesheet tag to be found and renders accordingly, which causes flashing. Putting stylesheets at the top, in the head section of the webpage will avoid such flashing of the webpage.
6. Move scripts to the bottom
7. Avoid CSS Expressions
CSS Expressions can execute many times therefore it is important to avoid CSS expressions.
8. Make JS and CSS External
9. Reduce DNS lookups
As a general rule it is best to reduce the number of unique hostnames used in a web page.
10. Minify JS
Minification, or minify, is the process of removing all unnecessary characters from source code, without changing its functionality.
11. Avoid redirects
Redirects are used to map users from one URL to another. However, redirects add an extra HTTP round-trip between user and the server.
12. Remove duplicate scripts
Duplicate scripts hurts performance. It results in extra execution of the scripts.
13. Configure Etags
Etags are used by clients and servers to verify that a cached resource is valid.
14. Make AJAX cacheable and small
The URL of an AJAX request is included in the HTML as it is not bookmarked or linked to and the requesting page can be cached by the browser. As long as the AJAX request page has not changed, it is best to have the browser cache it.
Yahoo updated its list of best practices in 2012. In addition to the above rules, there are a set of new rules added to the list of best practices.
Below is a list of the updated best practices:
- Flush the buffer early
- Use GET for AJAX request
- Post load components
- Pre load components
- Reduce the number of DOM elements
- Split components across domains
- Minimize the number of iFrames
- No 404s
- Reduce cookie size
- Use cookie free domain for components
- Minimize DOM access
- Develop smart event handlers
- Choose over @import
- Avoid filters
- Optimize images
- Optimize CSS sprites
- Don’t scale images in HTML
- Make favicon,ico small and cacheable
- Keep components under 25k
- Pack components into a multipart document
- Avoid empty image src