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 6 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
  • 12 images
  • 8 JavaScripts
  • 3 stylesheets
• Many resources being downloaded from same domain (most browsers allow for only 6 simultaneous connections when using HTTP1)
  • 12 images are being downloaded from todolistme.net
• Render and parsing blocking resources being downloaded in head/body
  • Stylesheets in head
  • JavaScripts in body (before end)

Additional resources included by JavaScripts and stylesheets

• JavaScript: 20
  • Google ads, analytics, and +: 19
  • Twitter: 1
• Images: 20
  • jquery: 3
  • Google ads, analytics, and +: 4
  • Facebook: 3
  • todolistme.net: 10

Total download is 1.2 MB

Possible optimizations

General resources

• Change todolistme.net 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

Move or defer parser blocking scripts

These are scripts that are located mid-body which causes the HTML parser to stop when it reaches them. The parser will then have to fetch and parse each script before continuing with parsing the HTML.

These are ads and like buttons for social medias and should be moved to the end of the body or at least deferred.

• show_ads.js
• widgets.js (twitter)
• all.js (facebook)

Avoid using document.write

This is being used by show_ads.js from Google (which is ironic, because Google is also advocating not doing this).

It may cause a long time spent parsing the HTML, because it changes dynamically.

Use only minified scripts

jquery-ui is included as a non-minified version.

Bundle JavaScript files that are controlled by todolistme.net

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.

• lists.js
• lib.js
• javascript_e.js

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

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.

• Google font: 600 ms
• jquery-ui: 700 ms
• site style: 750 ms

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

Preload fonts so that we do not have to wait until the CSS is parsed before fetching them

Fonts will not be fetched until the CSS has been parsed. If preloaded, we ensure they are ready when the CSS has been parsed.

Preload example: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Images

• Gather all icons in a sprite to avoid multiple server requests
• Use newer image types as JPEG 2000 or JPEG XR which has better compression than PNG or JPEG.

Runtime Performance

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

Besides a quite long running handler for the load event (86 ms) the rest of the application is very responsive.

• No significant framedrops
• No visible jank