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.
Check if you have a HTTP => HTTPS redirection by looking for a 301 Moved Permanently
status code.
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.
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.
- JS file size
- Lodash imports
NODE_ENV=production
- Unnecessary libraries
- Up to date dependancies
- Pagination
- Browser-side caching
- Server-side caching
- API call scope reduction
- GZIP
- Reduce response verbosity
- Performance tools in Chrome
- Algorithmic complexity
- Pagination
react-virtualized