Simple Hacks for increasing website load time
For those who don’t require Google level optimization
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
— Ankush (@ankschoubey) January 21, 2020
Are there any more such tweaks that exist?
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.