6. Our Todo List App performance audit - marcinkopka/todo-list-app GitHub Wiki

Audit was performed by using Chrome browser (version 75.0.3770.100 - 64bit).
It has been done by using Developer Tools.
System - Windows 8.1.

For audit purpose our application is hosted on GitHub Pages under this link :

https://marcinkopka.github.io/todo-list-app/

todoApp.jpg

Loading

  • PAGE LOADING TIME - 58 ms
  • DOM CONTENT LOADED TIME - 56 ms
  • NUMBER OF REQUESTS SENT - 12
  • AMOUNT OF DATA TRANSFERRED - 41.2 KB

ourLoadNetTab.jpg

Memory

  • TOTAL AMOUNT OF MEMORY USED - 3.7 MB

ourMemTab.jpg

User actions

ADDING NEW TASK TO LIST - 3 ms

ourAdding.jpg

REMOVING TASK FROM LIST - 3 ms

ourRemoving.jpg

MARKING ONE TASK AS COMPLETED - 4 ms

ourMarkingOne.jpg

MARKING ALL TASKS AS COMPLETED - 4 ms

ourMarkingAll.jpg

Audit results

  • PERFORMANCE - 100 of 100
  • ACCESSIBILITY - 52 of 100
  • BEST PRACTICES - 100 of 100

ourPABP.jpg

Improvements that should be made :

  • Background and foreground colors do not have a sufficient contrast ratio. Low-contrast text is difficult or impossible for many users to read.
  • Form elements do not have associated labels. Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Failing Elements - input.new-todo.
  • Does not have a <meta name="viewport"> tag with width or initial-scale. Add a viewport meta tag to optimize your app for mobile screens.
  • Document doesn't use legible font sizes. Text is illegible because there's no viewport meta tag optimized for mobile screens. Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read.
  • Tap targets are not sized appropriately. Tap targets are too small because there's no viewport meta tag optimized for mobile screens. Interactive elements like buttons and links should be large enough (48x48px) and have enough space around them to be easy enough to tap without overlapping onto other elements.