Skip to content

Audit performance

FotieMConstant edited this page Aug 15, 2020 · 7 revisions

Audit performance

The competitor

Following the competitor's webpage, todolistme.net which was examined. In addition to todo-list-app it contains the following functionalities:

  • Subpages with instructions
  • contact information and development options
  • Registration
  • Synchronizing with accounts
  • Printing
  • Commercials
  • Multiple lists
  • Sorting
  • Drag and drop reordering

As the two apps differ a lot and todolistme is a more developed solution only basic comparison was analyzed. Below are the results of the basic audit for todolistme.

Loading "todolistme"

  • Requests: 108
  • Transferred: 1.1 MB
  • Transfer time: 14.25s
  • DOM loads: 3.45s
  • Page loads in: 10.66s
  • Resources: 3.0 MB

Loading analysis results are available below:

These technical data was collected from the DevTools tool in Chrome, as well as the gtmetrix.com and dareboost.com sites.

Competitor's audit

competitorNetwork competitorPerformance

Our App's audit

Due to the fact that I used gulp plugins to optimize downloads of javascript and CSS files to minimize, concatenate, and optimize production code, we have a relatively performant app compacted to our competitor.

fileload Performance

Comparison of our application with that of the competitor

A comparison between the competitor and our application

                todolistme    todo-list-app
               
Requests:	108	          7
Transferred:	1.1 MB	          16.9 kb
DOM loads:	3.45 s	          656 ms
Page loads in:	10.66 s	          1.64 s
Resources:      3.0 MB            36.8 kb

Benchmark data

Comparison in performance of both apps below:

CompareReports

Todo-list-app quality performance (Our app)

TodoListAppqualityPerformance

Todolistme quality performance (Competitor's app)

TodoListMequalityPerformance

Technical details

1. Weight and loading time:

  • TodoListMe: Weight: 1.09 MB Loading: 6.0 s
  • Our app: Weight: 17.6 kb -1.07MB Loading: 1.0 s - 5.0 s

Recommendation: The weight and loading speed of our application matter as we are out for the best performance. that said using gulp to minify the css and js files so they can load faster is a great idea to keep things light.

2. External scripts:

  • TodoListMe: jQuery, Twitter, Facebook, Google Analytics, ads
  • Our app: No external scripts

Recommendation: Not having external scripts(Not too much) making multiple requests is a great way to improve the performance of our application.

3. Number of requests:

  • TodoListMe: 108
  • Our app: 7

Recommendation: It is very important to have few requests as possible to files. The TodoListMe calls way too many javascript files and images. However, for our app, concatenating the javascript files and then minify them is a great way to avoid multiple requests.

4. HTTPS:

  • TodoListMe: No HTTPS
  • Our app: HTTPS

Recommendation: Set up SSL encryption for our application to ensure data security during communication between the visitor and the application.

Recommended changes to our application:

Our app is extremely fast, however less sophisticated than TodoListMe. We need some improvements.

If we had to add functionalities in priority, it would be the Multiple lists functionality of todos, enabling the user to create multiple lists of todos because at the moment our application is limited to very occasional use. We could also think about the possibility of reordering the lists created in a todo list.

Summary

todolistme Pros (+)

  • Clean Design
  • A lot of useful functionalities - App has more functionalities than our app
  • Number of well-optimized images for better user experience and well-optimized CSS
  • Well supported

Cons (-)

  • Loading time - Takes a lot of time to load
  • Memory consumption - consumes a lot of memory compared to our app
  • Overall performance strongly influenced by internal JavaScript
  • Ads that delays loading and increases data transfer

todo-list-app Pros (+)

  • Fast loading and operating
  • Low memory consumption
  • Low data transfer
  • Good coding practices, based on the MVC model easy to understand and develop
  • Minimalistic design

Cons (-)

  • Limited functionality