When I started to write this article I did not thought that it will be so long. Anyway I hope it will help you to boost your application performance. Good luck!

Table of contents

Here you can find only the main sections as the list of all the subsections is too long — there are ~107 of them.

1. Compression algorithms

2. Code splitting and lazy loading

3. Lazy or partial hydration

4. Tree shaking — dead code elimination

5. Javascript minification and optimization tools

6. Library swaps

7. Images

8. Fonts

9. Layout recalculation

10. External scripts

11. Pre — strategies

12. Protocols

13. Caching

14. Useful tools

1. Compression algorithms

To minimise the size of provided files to the client you can use different compression algorithms. Inside the Lighthouse there is a section for it called Enable text compression. Here you are able to find out what files you are providing with additional compression, or if your third party scripts are provided with compression.

1.1. Gzip

Gzip uses the LZ77 and Huffman coding compression techniques. Most web browsers and clients support it. You can setup your server to use dynamic or static compression. With dynamic compression your files are compressed by fly. With static compression you need to compress your files during the build.

The compression ratio for Gzip is around 44% as it is shown in next sections.

No compression

Transferred 445.57 KB and took 329 ms to load

Dynamic compression

Transferred 197.6 KB and took 281 ms to load

Static Compression

Transferred 197.2 KB and took 287 ms to load

#react #javascript #web-performance #webpack #nodejs