Website Front End Performance Testing Series - Part 1 - Introduction

How many times have you visited to a website to accomplish a task and suddenly went to a different website because home page of the website that you visited first took long time to load? “46% of visitors will leave a preferred site if they experience technical or performance problems.” (Juniper Communications) In other words, “If your website is slow, your customers will go away!”.

Advent of Web 2.0 technologies like Javascript, Ajax, single page applications, now web applications are dynamic. Client side should be given due importance as well besides server side processing. A web application can be tested at two levels using two different types of software performance testing methods.

• Front-end / Client side
• Back-end / Server side 

Server side issues are extremely important because it can make the web application unstable and unusable. But it’s not the end of story in web application’s performance testing. Client side performance issues are also critical from performance perspectives because they have more impact on user experience. Furthermore, website front-end performance testing is fast as compared to back-end performance assessment which need a lot of requirement gathering, script modeling, load generation, code profiling etc. We are not going to discuss about front end performance testing in details here as we discuss about it in part three.

Overview of This Series

"Website Front End Performance Testing" series contains twelve parts, with to be published weekly. Each article will take a practical approach; it will discuss how to immediately apply the methodology or technique being introduced and will give examples and case studies taken from real software performance engineering projects.

This article series starts from the basics of Website Front End Performance Testing and can be used by anyone who has never heard words "Front End Performance Testing". So that this article series will be valuable if you are planning to start your carrier as a Software Performance Engineer. Even Though, this series starts with basics, it doesn't means that this series will include only basic, but it will cover all the aspects of website front end performance testing including intermediate and advanced methodologies. Therefore concepts presented in each article will be valuable to all members of the performance engineering team, from the software performance architect to software performance associates.

Each article will contain approaches, check lists, best practices and warnings that will help you apply what you learn directly to your projects. Where feasible, articles will also include "Do it yourself" section which describes step-by-step, how to do a front end performance test with concepts described in that particular article.

Front End Performance Testing Basics

Parts 2, 3 and 4 start out with what I see as basics of Front End Performance Testing that anyone needs to know. At the end of reading part 4 of this series, you will understand the importance of carrying out a front end performance test on your website or web application.

Part 2 - What is the Front End of a Website?
Part 3 - What is Front End Performance Test?
Part 4 - Why Front End Performance Testing is Important?

Front End Performance Testing Methodology

Part 5 and 6 will contain methodology of manual testing and analysing website performance bottlenecks using website waterfall and how to automate front end performance testing process using automation tools.

Part 5 - Website Waterfall Analysis
Part 6 - Popular Front End Performance Test Automation Tools

Automating Front End Performance Testing

Part 7, 8 and 9 will be based on each of the free test tools that are available to benchmark front end performance of a website. We have chosen these specific tools because they are easy to learn and free to use. This set of articles will help any web designer to design a performant website.

Part 7 - Website Front End Performance Testing with Pagespeed
Part 8 - Website Front End Performance Testing with Yslow
Part 9 - Website Front End Performance Testing with Webpagetest

Reports to Stakeholders

The final group of topics in this series will focus on reporting test results collected from a front end performance test to project stakeholders and how to present test results to developers in a form that they can use to optimize performance of the website.

Part 10 - Summarizing across multiple tests
Part 11 - Prepare Front End Performance Test Report
Part 12 - Using test results to optimize website performance

Summary

This series of articles is designed to teach how to test the front end of a website and how to report collected results to stakeholders. All twelve parts of this series will cover up front end performance testing from basics to advanced concepts.