Analyzing the Performance of Todo-App and a Competitor todo-app

using chrome built-in tool lighthouse to analyze the performance and the best practice of our Todo-App and a Competitor todo-app

Performance of our Todo-App.

results from the lighthouse:

Device >>	Mobile	Desktop
Performance	99 %	100 %
First Contentful Paint	1.8s	0.5s
Speed Index	1.8s	0.5s
Largest Contentful Paint	1.8s	0.5s
Time of Interactive	2.0s	0.5s
Total Blocking Time	10ms	0ms
Cumulative Layout Shift	0.002	0.033
Passed audits	26	31
ScreenShots

Issues and Solutions:

• the result is great and the 1 % left is because some Resources are blocking the first paint of the page.
• solution: use an inline style for the main element in the page like for the Todo h1 title, but this is not the best-practice to use, so we can ignore that.

Performance of Competitor todo-app.

results from the lighthouse:

Device >>	Mobile	Desktop
Performance	27 %	72 %
First Contentful Paint	1.5s	0.6s
Speed Index	6.6	1.6s
Largest Contentful Paint	10.6s	2.0s
Time of Interactive	14.4ms	2.7s
Total Blocking Time	3.840ms	290ms
Cumulative Layout Shift	0.68	0.269
Passed audits	17	19
ScreenShots

Issues and Solutions:

• there are extreme issues with the performance due to image formats as they are in JPEG.
• solution: use Image formats like JPEG 2000, JPEG XR.

• Third-party ads are significantly impacting load performance.
• solution: Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading.