An Introduction to Front End User Experience Monitoring and Performance testing

Dhanya Arumughom -

Importance of Front end user experience monitoring

The number of web users has increased tremendously over the past few years and it has become a necessity for most of the businesses to have a rich and user friendly website. We are living in an age where people tend to use the web for anything- be it shopping, banking, or even for food. With the advancements in technology and lifestyle, one quality that most of us have lost now is patience. Most of us don’t have the patience to wait for many things, especially on the web. Nobody wants to wait for even a minute to accomplish something in the web. So for a website it is very critical to keep its users engaged with enticing and fast content to deliver a consistent user experience. And obviously user experience is critical for the failure or success of any website.
With advancements in web technologies, there has been lot of emphasis on the look and feel of the websites which makes the front end of web applications more complex than ever. This in turn creates challenges with respect to page load time on the end user screen. The page load time or turn round time for any actions users perform on websites is very critical for a good user experience. In many cases even slightest delays translates to revenue loses, negative brand impact and poor customer satisfaction. In a recent survey, Amazon reveals a one second increase in page load causes 1% drop in its sales and Google says delay of 0.5 seconds in its search page load time dropped its traffic by 20%.
So, clearly there should be performance optimization on all application levels. Years back when the websites were static, website’s performance optimization focused on tuning of server side only since most of the processing was done on server side. But now, things has changed and websites are dynamic, and the front end or client side should be given due importance as well besides server side processing .In fact, client side performance issues are even more critical as they have more impact on the user experience. A recent study reveals that only 10-20% of total page load time is spent on the backend while 80-90% is spent on the front end.

What exactly is front end performance testing?

Now that we have seen the importance of front end user experience, let’s see what exactly is front end performance testing all about and how it is different from the conventional performance testing/load testing. Load testing deals with the performance of your website at different loads meaning it gives you information on how your application responds when multiple users are working on the application- say how fast a page loads when 1000 users are using the application. While load testing is from a multiple users point of view, the front end performance testing is from a single user’s perspective. It tells you how fast the page loads from a single user point of view. Load testing is used to know how many users your application can handle.

How can front end performance be measured- Tools used

While the performance testing tools like JMeter and LoadRunner are used for conventional performance testing, there are lots of tools available in the market specifically for front end performance testing and monitoring. These tools helps you with monitoring the browser performance of your web page, grades the web page based on its performance, offer suggestions for improving its performance, summarizes the web page’s components and displays statistics about the web page. Measuring the front end performance is very essential to build a website with good user experience. Analyzing front end performance really helps the web developers in adjusting the webpage features so as to maximize the performance. So, here are some of the widely used tools for monitoring your front end user experience performance.

1. Google’s PageSpeed Insights

PageSpeed insights is a free tool from Google which helps you analyze the front end performance of your web page. It analyzes the content of your page and reports on its real world performance for mobile and desktop devices. It also provides suggestions on how the performance of page might be improved. You just have to give your web page URL on the tool to get these details. Here are some of the key features of the PageSpeed Insights(PSI):

  • PSI incorporates data from the Chrome User Experience Report to display the performance of the page and an overall Speed score is generated for the page.

  • It evaluates how well the page follows the common best practices for performance optimization and calculates an optimization score and will be categorized as Good, Medium or low.

  • It provides optimization suggestions based on the list of best practices that could be applied to the web page.

2.Yahoo’s Yslow

YSlow is another excellent tool for performance monitoring of a web page from Yahoo. It analyzes web pages and its performance based on the Yahoo’s rules for high performance websites. Its features are:

  • It grades the web pages based on a pre defined rule set.

  • It offers suggestions for improving the web page performance.

  • It summarizes the web page content and displays statistics about the page.

3. WebPagesTest

WebPagesTest is an online tool which allows you to run a free website speed test. It allows you to run simple tests and even perform advanced activities involving multi-step transactions or video capture. WebPagesTest provides you detailed reports which include resource loading waterfall charts and page speed optimization checks. It also provides suggestion for improving the page performance.

4. GTmetrix

GTmetrix is another online tool which helps you analyze your website’s speed and make it faster. This tool also provides insight on how well the page loads and gives you recommendations to optimize performance. GTmetrix report gives the full picture of your website’s performance and helps you identify areas which need improvement. Its key features are:

  • This tool gives you the PageSpeed and Yslow scores and recommendations for your web page.
  • It gives you the page load details like time, size and number of requests.
  • GTmetrix allows you to keep track of the page’s performance with scheduled monitoring and visualize it with various interactive graphs.
  • It also allows you to set up alerts if your page is performing poorly in any of the areas.
  • It allows you to record your page loads and pin point exactly where bottlenecks occur by slowing the playback speed up to 4 times the original speed to determine issues.

In addition to the above tools, you also have the option to check web page performance in the browsers built-in inspectors like Audits in Chrome developer tools, Performance for Firefox and Timeline for Safari. These options in the developer’s tools also provide some information on page loading performance and help in identifying problems affecting your site’s performance, accessibility and user experience.