Top 5 best practises for front end performance

Front end performance is extremely close to my heart and I have seen that it is always considered as an after thought. Surprisingly most of the performance tuning is defined as tuning JVM’s, database and backends. Yes these are important aspects but make up less than 30% of the total time end user takes to see the final output. Rest 70% is front end performance.

By front end performance tuning I mean tuning response time after the backend has returned back the response to the browser/device. This includes tuning

frontend performance 1.3

  • Javascript and CSS tuning
  • Images, video, flash
  • Number of DNS Lookup
  • Size of the HTML
  • Parallel downloads
  • Caching of the data/page/fragments
  • Browser cache

 

 

Key metrics which we should use for measuring the success

  • Time to first paint (TTFP) – This is all about perception as to what user sees on the screen is more important than anything else. This is measured as time it takes for the user to first see anything happen on the screen. A shorter TTFP causes a page to “feel” faster to guests, and is a good metric for gauging the the amount of CSS and JavaScript being loaded in the head of the document.
  • DOM Ready – The amount of time before JavaScript can begin manipulating the page. A longer DOM Ready time causes the page to feel sluggish.
  • Page Load – The time it takes for essential content and functionality to be downloaded and ready for the user to interact with.
  • Total Load – The time it takes for all content and functionality to be downloaded and available on the page, including non-essential 3rd party tags and social plugins

There are a huge number of best practises and by doing one google search you will get them all but my favourite top 5 best practises which are likely to give the the most value are

  1. Optimise the sequencing and rendering – It is amazing that by changing just few sequence of the loading, specifically for 3rd party JS you can completely change the way user sees the end output. We can also optimize order of CSS and JS files, loading CSS in the <head> and JS as late as possible.
  2. Use CSS sprites to combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
  3. Combine the java scripts by common functionality into a single file and Minify the java script. Ex: Product Details Scripts, Checkout Scripts, Search Scripts
  4. Reduce the number of unique hostname on the HTML page. It is best practice to keep the number of unique DNS to around 4 or 5 per site. This will also help in the number of parallel downloads which the device can make
  5. Leverage browser side caching for static assets

Measurement is another key aspects to consider. If you cannot measure then it is difficult to tune. But please also be careful that you don’t add unnecessary instrumentation in the page which starts to impact the performance. Couple of tools like webpagetest and site speed.io is a good start as they allow you add events and measure exactly what is needed

Please share anything else you have found for other organisations.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s