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?
Top comments (2)
lazy load all images and scripts that you can.
For images you can start by setting the attribute:
loadingtolazydeveloper.mozilla.org/en-US/docs/W...
For scripts you can use the attribute
deferw3schools.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.