6. Audit Performance Document - robgillibrand/Todo-List-App GitHub Wiki
Welcome to my report in which I analyse and compare the performance of my own todo list app against the competitor’s app. A website audit is an examination of page performance prior to large-scale search engine optimization (SEO) or a website redesign. Auditing your website can determine whether or not it's optimized to achieve your traffic goals, and if not, how you can improve it to increase performance.
I achieved my audit by using the Chrome Developer Tools in the browser. The extension is called ‘Lighthouse’. Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of web apps.
When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.
Here are the summaries of how the tests went:
Competitors app - todolistme.net performance audit report
Complete Lighthouse Report For Competitor's App
My app - todo-list-app performance audit report
Complete Lighthouse Report For My App
My App - performance functionalities test
| Adding an item | Deleting an item | Reloading The Page |
|---|---|---|
 |
 |
 |
Competitors App - performance functionalities test
| Adding an item | Deleting an item | Reloading The Page |
|---|---|---|
 |
 |
 |
- My app has considerable better performance at 100% compared to the competitors at 73%.
- Both apps are poor at accessibility
- My app performs well with best practices, but there is room for improvement with the competitor.
- The competitor's app performs better with it's SEO(Search Engine Optimisation) but both sites could do better.
- My app performs as a PWA(Progressive Web App) and the competitor doesn't. According to Medium.com a PWA is:
- Responsive
- Connectivity independent
- App-like-interactions
- Fresh
- Safe
- Discoverable
- Re-engagable
- Installable
| Pros | Cons |
|---|---|
| Simple to use | No drag and drop feature |
| Responsive design | Only one list available |
| Local storage only | |
| Uniteresting to look at |
Improvements
- Does not have a meta name="viewport" tag - This should be added to optimise the app for mobile screens.
- Uniteresting to look at - Introduce a colour scheme.
- Implement drag and drop feature - Allow the items in the list to be re-ordered or if using multiple lists then items can moved in between lists.
- Add feature to allow extra lists - Extra daily or weekly lists could be added.
- Allow backing up of lists - Rather than relying on local storage, lists could be backed to hard drive/smart phone etc.
- Social media links - Try promoting the App by using social media and having links on the page.
| Pros | Cons |
|---|---|
| Simple to use | Slow to load |
| You can have multiple lists | No text when page loads |
| Lists can be backed up |
Improvements
- Does not have a meta name="viewport" tag - This should be added to optimise the app for mobile screens.
- Content is not sized correctly for the viewport - The viewport size is 1001px, whereas the window size is 412px, so this should be changed.
- Speed up loading time - Optimise images (Check file format and file size) and rethink if the advertisement is necessary. Minify JavaScript to reduce script parse time. Take out unnecessary inline CSS/JavaScript styles. Remove unused rules from stylesheets. Defer the download of unnecessary resources
- No text when page loads - Use existing font while webfoot loads.
- Improve colour scheme
- Improve HTML - eg. There are no titles on the iframe tag and form elements don't have labels.
- HTML element does not have a [lang] attribute - Add a language tag.
- Improve security vulnerabilities - Some third-party scripts may contain known security vulnerabilities that are easily identified and exploited by attackers and does not use HTTPS.