Best Practices on Web Page Performance
It’s not something new today to know that performance of the web application needs to be taken seriously by all stakeholders before releasing it to their customers. The performance of the application can be tuned either at back-end or at front-end. One of the most important metric for end-user is ‘Web Page Load Time’ to gauge the performance of the web site.
Optimization of Number of Network Round Trips
Optimization of Network Latency (Network Related)
Optimization of Network Latency (HTTP Request Size)
Optimization of Network Latency (HTTP Payload Size)
Optimization of Parallelization in Download
Optimization of Browser Rendering
All tips above follows a standard template as listed below:
Tip Title
In this article, I have listed tips (best practices for web page optimization at front-end) gathered from different sources (references are provided at the end).
The tips are categorized in following broad categories. Some tips might belong to multiple categories. In that case, tip is listed under a category, which impacts web page performance most. Following are broader categories of best practices where all tips belong to –
Optimization of Number of Network Round Trips
Optimization of Network Latency (Network Related)
Optimization of Network Latency (HTTP Request Size)
Optimization of Network Latency (HTTP Payload Size)
Optimization of Parallelization in Download
Optimization of Browser Rendering
Optimization of Number of Network Round Trips
- Leverage Client Side (Browser) Caching Consistently
- Minimize Number of Redirects
- Avoid Bad Requests (404/410)
- Combine External JS / CSS Files into Few Files
- Combine Images into Few Files using CSS Sprites
- Serve Resources from a Consistent URL
Optimization of Network Latency (Network Related)
Optimization of Network Latency (HTTP Request Size)
Optimization of Network Latency (HTTP Payload Size)
- Enable Compression using GZip
- Remove or Defer Unused CSS
- Minify CSS / JavaScript / HTML
- Optimize Images
- Serve Only Properly Sized Images
Optimization of Parallelization of External Resource Downloads
- Optimize the Order of CSS and Scripts
- Avoid Document.Write to Fetch External Resources
- Avoid CSS @import from an External Style Sheet
- Leverage Parallelize Downloads Across Hostnames
- Defer Loading of JavaScript
Optimization of Browser Rendering
- Use Efficient CSS Selectors
- Avoid CSS Expressions
- Put CSS in the Document Head
- Specify Width and Height of All Images
- Specify a Character Set Early
- Specify Unique Character Encoding
- Always Specify a Content Type
- Fetch Resources Asynchronously whenever Possible
All tips above follows a standard template as listed below:
Tip Title
[Tip summary in one line]
Applicable To
[Which browser]
How Improves Page Load Time
[A tip can help with all or some of broader categories (Network round trips, Network latency, Browser rendering)]
Prologue
[Detail of the technology / concept being used in the tip if required]
Why
[Tip reason with some detail]
How
[List of recommendations or notes for applying the tip]
Exceptions
[Any exception / issue while using the tip]
Recommendations
[Any recommended value if there are any]
References:
- Web Performance Best Practices from Google
- Best Practices for Speeding up your Website
- Optimizing Page Load Time
Comments
Post a Comment