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.

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

  1. Leverage Client Side (Browser) Caching Consistently
  2. Minimize Number of Redirects
  3. Avoid Bad Requests (404/410)
  4. Combine External JS / CSS Files into Few Files
  5. Combine Images into Few Files using CSS Sprites
  6. Serve Resources from a Consistent URL


Optimization of Network Latency (Network Related)

  1. Minimize DNS Lookups
  2. Minimize DNS Lookups in the Critical Path
  3. Leverage Proxy Caching


Optimization of Network Latency (HTTP Request Size)

  1. Serve Static Content from Cookie less Domain
  2. Minimize HTTP Request Size


Optimization of Network Latency (HTTP Payload Size)

  1. Enable Compression using GZip
  2. Remove or Defer Unused CSS
  3. Minify CSS / JavaScript / HTML
  4. Optimize Images
  5. Serve Only Properly Sized Images


Optimization of Parallelization of External Resource Downloads

  1. Optimize the Order of CSS and Scripts
  2. Avoid Document.Write to Fetch External Resources
  3. Avoid CSS @import from an External Style Sheet
  4. Leverage Parallelize Downloads Across Hostnames
  5. Defer Loading of JavaScript


Optimization of Browser Rendering

  1. Use Efficient CSS Selectors
  2. Avoid CSS Expressions
  3. Put CSS in the Document Head
  4. Specify Width and Height of All Images
  5. Specify a Character Set Early
  6. Specify Unique Character Encoding
  7. Always Specify a Content Type
  8. 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]



    Comments

    Popular posts from this blog

    Performance Test Run Report Template

    Bugs Management in Agile Project

    Understanding Blockchain