English

Speed Up Your Web and Mobile Apps

A well-designed website isn’t about how easy it is to use or how elegant it looks. An aspect often overlooked is the performance of an application in terms of response times. Web and Mobile apps need to respond quickly to requests from users and this means optimizing your site with performance in mind.

Today everyone seems to be in a hurry.  Anything a person may want, they want it now, and they don’t want to lose a single second. The same issue occurs when people use a Web application; they demand the information shown to them is accurate and presented quickly. On that matter, an application’s response time not only affects the end-user’s experience, but also the website’s positioning, sales conversions, and monetization. This article begins by describing a set of statistics about several companies’ websites, their relationship with response times and end users, including details about the impact of Black Friday on Ecommerce companies.

There are many practices that allow improving performance on web and mobile applications, this article’s approach will be based on the following two basic practices:

1.”Design Focused on the Perceived Performance,” refers to how fast a user thinks your website is (not necessarily how fast your technical stats say it is) through design patterns, e.g. activity and progress indicators, Skeleton screens, Progressive images, and animations.

2.” Performance Testing,” one of the most technical practices that we can use to improve response times, by using open source software tools e.g. Apache JMeter.

The UX represents an emergent change of the usability concept itself, whereas the objective is not limited to improving the user’s performance in the interaction by increasing effectiveness, efficiency and ease of learning, but also trying to solve the strategic problem of the usefulness of the product itself and the psychological problem of enhancing pleasure and fun of its use. [1]

It’s clear that if a web page takes a long time to load, the user will get tired of waiting and without thinking twice will close the browser tab, and he may not visit the site again. Therefore, this factor which is not always given due importance when developing a software product, affects website traffic and positioning as well as the end user.

Urs Holzle (Google Engineer) gave some statistics to explain why speed is so important [2]:

Image 1. Website’s Stats

The study of the impact of response time on software products is not a novel subject. In 1968, Robert B. Miller attempted to summarize the work of cognitive psychology by generating a list of human-computer interactions and the desirable response times in each case. Probably the most fundamental contribution is the idea that when the response times of the system fall beyond a limit, the fluid interaction disappears, and the efficiency drops significantly.

Optimizing response times has a huge impact on the user experience; navigating fluidly and quickly on a website makes the user feel comfortable and stay longer. It also improves web positioning because search engines prioritize websites that load fast, which means that the response time is an important factor in the algorithm of these search engines.

Every year millions of people are making online purchases on Black Friday, and also every year the e-commerce websites whose owners did not prepare for Black Friday probably did not have a Black Friday “without worries.” The enormous concurrence of users and high response time causes many applications to collapse, and the next click of an end user is in the competitor’s website. Many companies have had a true “black Friday” some examples: H&M[3], DELL[4], MACYS[5], NEIMAN-MARCUS[6].

In the article, “Response Time and User Experience, Experimental Study,” published in “Latin American Magazine of Software Engineering” [7], the authors conducted an experiment focused on evaluating the behavior of end users interacting with high response times. As a result, they identified 3 three indicators of end-user behavior.

  • Abandonment of the system.
  • Unnecessary actions on the website.
  • Browser refresh (f5).

The experimental study was based on the proposal of researchers Walter J. Doherty and Ahrvind J. Thadani, Doherty and Thadani proposed that the response time of the user decreases as the response time of the system decreases. The researchers describe that every second of degradation in the response of the system led to a degradation similar to the response time of the user.

Design focused on the Perceived Performance

A well-designed site is not just how easy it is to use or how elegant it looks. A site is not well designed unless the end user is satisfied with their experience. One aspect overlooked sometimes is the perception of the performance of an application in terms of response times. A slow and beautiful site will always be less satisfying to use than a fast and unelegant site.

Time can be analyzed from two different points: objective and psychological. When we talk about “measurable time,” we are talking about the objective time or the time of the clock. The target time, however, is often different from how users perceive time while waiting or interacting with an application. When we talk about the perception of the response time of the end user, we refer to the psychological or mental time.

This perception of “speed” not only depends on the response time in an application, but also the type of visual response that the end user perceives. If some functionality takes longer than normal or the response time is inconsistent with atypical alterations, we notice “every second” in this time interval. However, if the functionality presented has some visual aid that would indicate what is happening, the perception of the response time would be much less.

An effective way to make a website perceive faster is to use a skeleton screen. Skeleton screens are supposed to leave the impression of a fast loading time. This works by displaying the skeleton, the basic structure of the site, as fast as possible. Then, step by step, this frame is filled with content.  The applications using a skeleton screen has several advantages i.e.: It feels faster by giving an indication of what the content is going to look like before it has loaded; and never block the user from interacting with the app. The user is free to scroll and interact with the app even while the content is still being loaded. Ones of the most popular application uses Skeleton screen, Facebook, Slack, and Youtube.

Image 2. Skeleton screen, Facebook, Slack, and Youtube

Images play important roles in websites, helping to improve conversions, enhance user experience and increase their engagement. Another method that can make people perceive loading as being fast is to progressively load content. This approach is commonly used when loading images.

Progressive JPEGs have been proposed as a good practice for images, especially for sites used in slow networks, when a baseline JPEG loaded, as we see most of the time, the image appears as a top-to-bottom scan. A progressive JPEG by comparison is a series of scans of increasing quality. [8]

Image 3. Baseline Optimization

Image 4. Progressive Optimization

Progress indicators tell users that the app needs more time to process the last user action. A percent-done indicator is a determinate progress indicator that fills from 0% to 100% and never decreases in value. Both linear and circular progress indicators may be percent-done. Progress indicators show us how long the user will have to wait. Decrease anxiety and feeling of waiting.

Image 5. Progress indicators

People loves movements, especially because animations supports the essence of real interaction, it creates the level of feelings and perception close to what people have when they interact with a physical object in real life.

Studies show us that a well-implemented animation have a direct effect on cognitive load. However, it is important keep in mind that poorly designed or too complex animations can will have a negative impact on applications. This may affect the perception of time needed to complete a particular action.

 

Performance Testing.

Performance is an essential part of the user experience for the vast numbers of users who expect “good performance” from their applications when using a variety of fixed and mobile platforms. Performance testing plays a critical role in establishing acceptable quality levels for the end user and is often closely integrated with other disciplines such as usability engineering, performance engineering and DevOps.

Technically, performance is categorized in the ISO 25010 [ISO25000] Product Quality Model as a non-functional quality characteristic with the three sub-characteristics described below. Performance testing usually concentrates on one or more of these sub-characteristics: Time Behavior, Resource Utilization, Capacity [9]:

Most performance problems revolve around speed, response time, load time and poor scalability. Speed is often one of the most important attributes of an application. A slow running application will lose potential users. Performance testing is done to make sure an app runs fast enough to keep a user’s attention and interest.

Following a proper methodology guarantees a successful performance test process. It is important that the same methodology is followed on all projects. This ensures that the same deliverables are produced, and quality can be measured against this.

  • Identify performance acceptance criteria.
  • Identify testing environment
  • Plan performance testing.
  • Design performance testing.
  • Configuring testing environment.
  • Execute performance testing.
  • Analyze, tuning and retesting.

Why Performance Testing?

  • To find average response time of pages and transactions, slowest and fastest pages.
  • To detect improvements at the configuration or hardware level.
  • To tune all the web application components to support as much load as possible using actual hardware.
  • To find out how the application works when overloaded.
  • To Save costs reducing solution times.
  • To attract and retain end users.
  • To find out possible actual hardware bottlenecks and prevent new ones.

There are a wide variety of performance testing tools available in market. This article is focusses on Apache JMeter, one of the leading tools used for performance testing. Apache JMeter may be used to test performance both on static and dynamic resources, Web dynamic applications.  It can be used to simulate a heavy load on a server, group of servers, network or object to test its strength or to analyze overall performance under different load types. JMeter simulates a group of users sending requests to a target server and return statistics information of target server.

Why use JMeter?

  • Open source, it is totally free, allows developer to use the source code for the development and is widely used tool in the market and it has the large online community support.
  • Easy to use and learn.
  • Can load and performance test different servers and services like HTTP, HTTPS, FTP Database, LDAP, SMTP, POP3, IMAP, TCP, SOAP, REST.
  • Portability, Platform Independent and full Java purity.
  • Can be used for both static as well as dynamic resources performance testing.

Conclusions.

Performance matters. It can mean the difference between making a sale or losing a customer to the competition. Your website needs to respond quickly to requests from users and this means optimizing your site with performance in mind.

There are 3 Important Limits based on Response time by Jacob Nielsen.

  • 1 seconds is the limit for the user to feel that the system in reacting instantaneously to their direct manipulation
  • 0 second is the limit for the user’s thoughts to remain uninterrupted, although they will notice the delay.
  • 10 seconds is the limit for keeping the user’s attention – in other words, the general point of abandonment.

The “3 response-time limits” research was written in 1993 (based on 40-year-old research by human factor pioneers); so, “how is it possible that a research conducted more than 20 years ago is useful in the current times?”  Simple! The principles that govern the interaction of users with our applications depend in part on sociology and psychology. Although technology changes, our desires, motivations, emotions and social dynamics don’t vary as much.

Keep in mind that the loading time of your web page is the first contact with your users. It is indeed the very first message you send to them.

  • 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • 47% of consumers expect a web page to load in 2 seconds or less.
  • 40% abandon a website that takes more than 3 seconds to load.
  • A 1 second delay in page response can result in a 7% reduction in conversions.

If you need any support or advise with your web or mobile apps,  you can contact with SQA advisory, they provide consulting and training on Performance Testing.

 

References
[1] ISTQB, Usability Tester Foundation Level.
https://www.astqb.org/documents/GTB-Usability-Tester-Specialist-FL-Syllabus-2017.pdf
[2] Urs Holzle. 
https://www.thinkwithgoogle.com/marketing-resources/the-google-gospel-of-speed-urs-hoelzle/
[3] http://fortune.com/2016/11/25/macys-black-traffic/
[4] http://fortune.com/2014/11/28/best-buys-website-down/
[5] https://www.nerdwallet.com/blog/shopping/black-friday/kohls-black-friday-website-disaster/
[6] http://fortune.com/2015/11/27/neiman-marcus-website/
[7]Latin American Software Engineering Magazine
http://sistemas.unla.edu.ar/sistemas/redisla/ReLAIS/relais-v4-n5-231-234.pdf
[8] Taking A Look At The State Of Progressive Images And User Perception
https://www.smashingmagazine.com/2018/02/progressive-image-loading-user-perceived-performance/ 
[9] ISTQB, Performance Testing Foundation Level.
https://www.astqb.org/documents/ASTQB_GTB-Performance-Testing-FL-V2018-ASTQB-GTB-Syllabus.pdf
[10] Response Times: The 3 Important Limits.
https://www.nngroup.com/articles/response-times-3-important-limits/
[11] How loading time affects your bottom line.
https://blog.kissmetrics.com/wp-content/uploads/2011/04/loading-time.pdf