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
- 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
- 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
- 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.
- 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.
- Combine the java scripts by common functionality into a single file and Minify the java script. Ex: Product Details Scripts, Checkout Scripts, Search Scripts
- 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
- 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.