I make a change, add a huge-ass image on the home screen using it's "image link address", too lazy to download bRo and hit save, "localhost" appears to be load fine, and then I push it to production!
What we don't see is the face of the user, trying to access your site on a low-band 4G/3G network, which is stuck because of your third party image download. If you’re happy making your users frustrated, do follow the points below religiously..
Always load the third party JS first! Especially, don't exclude/ remove the npm packages that you don't need. The more the merrier!!
Try not to divide your JS into chunks ( code-split ), The bigger the better!!
All the images/fonts that you use, SHOULD BE from Third party source, no chance in hell they're from your origin.
The image that you let the user see first, should of the highest quality and size and should be loaded last.
Lazy Loading of imports and JS is for pussies, refrain using those.
If you find a way, then load the HTML as the last thing to be loaded on to the screen everything else should come first.
DO NOT try using "preconnect" on any < link > tags and avoid going through Script loading strategies from low-grade frameworks like Next.js.
Always remember that higher FCP ( First Contentful Paint ) the better, which means the time taken for your website to show the first content, above steps such as third party scripts loading will help you achieve this feat.
The longer FID ( First Input Delay ) the better, as you'd make the user wait on your page for the longest time possible.
The higher CLS ( Cumulatieve Layout Shift ) the better as the user gets mesmerized when layout keeps changing as the content keeps on showing up, our third party image assets can be leverage here.
That's all folks! The Web World is yours to rule now!