loading...

What's your approach to reduce loading time of a web app?

gwutama profile image Galuh Utama ・1 min read

We all know that it depends on internet bandwidth. However, we often don't have control over it. What I'm asking is more about things that we can control, such as reducing image size or using CDNs.

What are your steps and techniques to reduce loading time? Which steps do you take first and why?

Discussion

markdown guide
 

lazy load all images and scripts that you can.

For images you can start by setting the attribute: loading to lazy
developer.mozilla.org/en-US/docs/W...

For scripts you can use the attribute defer
w3schools.com/tags/att_script_defe...

 

It's all about latency.

Get your stuff close to the client. Use a CDN with anycast helps here.

Slim down your assets, best don't even use images. Check if you can build it smaller with SVG or CSS.

TCP won't use 100% of the available bandwidth with the first request, it will try to saturate the connection more and more with bigger packages, so it can lead to fewer roundtrips if your data needed for the first meaningful paint is very small.

Stream your HTML, so the client can render before they got eveything.

And, yes, lazy loading of assets that are big and not needed at the beginning helps too.