Theodo Performance Audit

performance-audit.md

[WIP] I can do a performance audit

Table of Contents

• Acronyms
• How to do a performance audit?

Acronyms

TTFB: Time to First Byte, the time it takes for the browser to receive the first byte of data from the web server

TFP: Time to First Paint, the time it takes for the first pixel to be painted on the screen.

TCP: Time to First Contentful Paint, the time it takes for the first content piece of the DOM to be painted on the screen.

TTI: Time to Interactive, the time after which the user can start interacting with the application.

How to do a performance audit?

https://mail.google.com/mail/u/0/?ui=2&ik=6990b79d90&view=fimg&th=1612e41addde4fb9&attid=0.1&disp=emb&realattid=1612776de6acb971f161&attbid=ANGjdJ_wsYnc8ietFlFS_YqERzaqTr1jYtTNJ_TocLY6s-yhoK9-nbopwAwiPlTGVbU7HZvVj0cW6m95MEKoI_vyxQ4QOiEkk6SNdlT1fvd8OwE2GcPma39yx7yis1I&sz=s0-l75-ft&ats=1516903010276&rm=1612e41addde4fb9&zw&atsh=1

Fixing red buckets

The first byte of the index.html file is received in over 200ms

Solution 1: fix HTTP => HTTPS redirection

Check if you have a HTTP => HTTPS redirection by looking for a 301 Moved Permanently status code.

The index.html file is downloaded in over 500ms

Solution 1: enable Gzip

Gzip is a compression method: it diminishes the size of a file as it is downloaded by the user, and uncompressed on the user’s browser (which is very fast). On Monetarii, a Theodo project, page size was improved by 56% and overall load time decreased by 70%!

How do I know if Gzip is not enabled? Open the dev tools, on the “Network” tab, and refresh the page. Then choose a few random files and inspect the request by clicking on it. If you see the header Content-Encoding:gzip in the response the file is gzipped.

How do I implement it? Gzipping is only a matter of web server configuration. To configure Apache or Nginx, follow this tutorial. If you use another web server, a simple web search should yield appropriate documentation.

Solution 2: use a CDN

Solution 3: reduce the size of the index.html file

The index.html file is parsed in over 200ms

The first byte of one critical asset is received in over 200ms

Solution 1: Code splitting in React

Solution 2: HTTP/2

Solution 3: Domain Sharding

Solution 4: image sprites

Solution 5: Browser-side caching

Caching allows a browser to “save” some files locally and not download them every single time a user comes to your website. As an example, a landing page hero image is unlikely to be updated every five minutes — so it makes sense to tell the browser “please keep this image in the cache and only check once a day if it’s been changed on our side”. You can then reduce the number of network calls (and the overall download size) the browser is making. On Monetarii, a Theodo project, (downloaded) page size was improved by 99% (everything could be cached) and overall load time decreased by 48%!

How do I know if my cache headers are properly set? Open the dev tools, on the “Network” tab, make sure that “Disable cache” is off and refresh the page. Then choose a static file (e.g. CSS, JS, image) and inspect the request by clicking on it. If you see Status Code:200 OK (from disk cache) then it’s all good.

The main JS bundle is executed in over 200ms

• JS file size
• Lodash imports
• NODE_ENV=production
• Unnecessary libraries
• Up to date dependancies

The backend sends the first byte of data in over 1s

• Pagination
• Browser-side caching
• Server-side caching
• API call scope reduction

The data is downloaded in over 200ms

• GZIP
• Reduce response verbosity

The data is processed by the JS code in over 200ms

• Performance tools in Chrome
• Algorithmic complexity

The data is displayed to the user in over 200ms

• Pagination
• react-virtualized