Network Performance

This is where we test how fast the site loads which includes loading all the resources for the site.

Test conditions

1. Network throttling has for all tests been set to 6Mb/s which is half that of the average connection speed in most developed countries. This is to ensure that the performance is measured against a realistic experience - which is that a large percentage of users have below average network speeds.
2. Cache has been disabled to best reflect what a user will experience when visiting the site on first visit.

Loading

It takes 0,8 seconds before the site is functional. This is in large due to the following

DOM Content (content of the root document)

• Many resources being downloaded
  • 8 JavaScripts
  • 2 stylesheets
• Many resources being downloaded from same domain (most browsers allow for only 6 simultaneous connections when using HTTP1)
  • 12 resources are being downloaded from the same domain
• Render blocking resources being downloaded in head
  • Stylesheets in head

Total download is 47.7 KB

Possible optimizations

General resources

• Change server to HTTP2 which will allow for more open connections per domain (simultaneous downloads).
  • HTTP2 also allows for pushing additional resources to the client on initial connection - removing the need for the browser to send additional requests for these (will save time on lookup, TTFB, etc for connections).

Scripts

Use only minified scripts

Included JavaScripts are not minified

Bundle JavaScript files that are controlled by us

This will avoid multiple server requests.

After bundling, the file may be fetched as early as possible by preloading it using a link tag - this is code needed to actually use the todo list on the site.

• helpers.js
• store.js
• model.js
• template.js
• view.js
• controller.js
• app.js

Preload example: <link rel="preload" as="script" href="app.js" onload="setView()" />

Styles

Keep only critical style inline in head and fetch the rest using preload.

Fetching stylesheets is render blocking unless it is done programatically or via a preload link.

• base.css: 200 ms
• index.css: 250 ms

Preload example: <link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

Runtime Performance

This is where we test how fast the site responds when being used.

Application has been optimized and there is no noticeable gains to be found.