Reduce bundle size
- Always use compression: at least gzip
Make less number of requests
- Always cache static content: js, css and static images.
- Always load images lazily
Do it fast
- Fetch js and css asynchronously Source

Reduce bundle size

Always use compression: at least `gzip`

Always compress. The configuration is set in the webserver.

gzip is good enough in most cases in terms of both performance and speed.

My application went from 4 MB to 800 kb. Fewer data faster speed.

^{Source 1: Enabling gzip}
^{Source 2: Verify gzip on Chrome}

Make less number of requests

Always cache static content: `js`, `css` and static images.

This can be configured in your web server or your application. Just google “ “how to cache in “.

Of course: be sure to not cache dynamic content.

For js and css files, make sure it has a name that is unique if the file is modified.

Example: in angular after creating a --prod build, the filename is in following format <filename>.<md5 checksum>.js.

This ensures that if the content of the file changes, the md5 checksum will change and a new request will be sent but if the file does not change then it will have the same checksum so it can be pulled from the cache.

Always load images lazily

<img loading=‘lazy’ ... /> is so so easy. Images are only fetched when user scrolls near it. #freeSpeedUp https://t.co/nduXUy5GLm

Are there any more such tweaks that exist?
— Ankush (@ankschoubey) January 21, 2020

^{Advanced tips: Lazy Loading Images and Video}

Do it fast

Fetch `js` and `css` asynchronously ^Source

When fetching js add async defer to script tag. This will fetch multiple js files in parallel.

Keep script tag in the header for this.

Are there more such easy tips?

Please mention them in the comments and I will add the tip to the list and mention your name.