6_ Todo App Audit - MoSanogo/Project-8- GitHub Wiki

In this section we discuss about our todo app audits.

Audits Runtime Settings

  • URL: http://localhost/todo-list-app/index.html.
  • Device: Emulated Nexus 5X.
  • Network throttling: 150 ms TCP RTT, 1,638.4 Kbps throughput (Simulated).
  • CPU throttling: 4x slowdown (Simulated).
  • User agent (host):Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36.
  • User agent (network): Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Mobile Safari/537.36 Chrome-Lighthouse.
  • CPU/Memory Power:620

NB:The todo is running on the localhost which means the performance is better than when it is hosted .

audits_runtime_settings_pic

Runtime Settings

Audits Results

A_Summary

The range time of recording:26 ms ~ 346 ms.

  • Page Loading time (milliseconds): 43 ms.
  • Scripting time(milliseconds): 129 ms.
  • Rendering time(milliseconds): 5 ms.
  • Painting: 1 ms.
  • System : 95 ms.
  • Idle: 46 ms.
  • Total:319 ms.

Overview

Overview

summary

Summary

B_Performance

According the Lighthouse Audits ,the performance of the todo app is 99 based on the Audits Runtime Settings mentioned above.

B_1 Metrics

  • First Contentful Paint: 1.7 s
  • Speed Index: 1.7 s.
  • Time to Interactive: 1.7 s.
  • First Meaningful Paint: 1.7 s
  • First CPU Idle: 1.7 s.
  • Max Potential First Input Dela: 70 ms.

B_2 Opportunity

  • Eliminate render-blocking resources. Resources are blocking the first paint of the page.

Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

performance_0

Performance_0

performance_1

Performance_1

C_Accessibility

C_1 Accessibility score : 60

C_2 Opportunity

  • Names and labels are opportunities to improve the semantics of the controls in the application.

This may enhance the experience for users of assistive technology, like a screen reader. 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

accessibility

Accessibility

D_Best Practices

D_1 Best Practices score : 86

D_2 Opportunity

  • This app does not use HTTP/2 for all of its resources 12 requests not served via HTTP/2 instead it is using HTTP/1.1.

NB: HTTP/2 offers many benefits over HTTP/1.1, including binary headers, multiplexing, and server push.

best_practices

Best_practices

E_SEO

E_1 SEO : 60

E_2 Opportunity

  • The app does not have a tag with width or initial-scale.

We should add a viewport meta tag to optimize the app for mobile screens.

  • The app doesn't use legible font sizes.

Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read.

The font sizes should be >60% of page text ≥12px.

  • The does not have a meta description.

So Meta descriptions may be included in search results to concisely summarize page content.

seo

Seo