Optimizing Page Loading: Leveraging the Preload Scanner and Resource Hinting

Oftentimes time developers get confused when choosing between

@import vs <link> tag for CSS or
<img> tag or div with background-image property for background image or
external script file or <script> markup. etc...

and it is because they do not know the advantages and disadvantages other one. So let's look at this argument from the perspective of the browser.

Preload Scanner

A preload scanner is a secondary HTML parser that scans through the raw HTML before the browser to load critical resources as soon as possible while the browser may be busy loading and parsing stylesheets and script files. But the condition of a working preload scanner is that critical resources should be included in the markup of the page and this is why we should always try to include critical resources like images, fonts, dynamic scripts etc. in the markup

But sometimes it is not possible to include critical resources in the markup, in that case, we can use resource hinting as our workaround.

So when choosing between

div with background-image or an <img> tag we should always opt for <img> tag but in case that is not possible and background-image is the candidate of LCP then we should preload that image.
@import or <link> We should always go for <link> But again if it is not possible then preload the resource
external script file or <script> markup we should always go with external script files as the preload scanner will discover it and load it concurrently while the browser is busy loading and parsing the resources.

there are other cases as well but besides these common rules there is a golden rule that if a resource is contributing to the LCP of the page and adding it to the page will not bloat the markup then it must be included in the markup so that the preload scanner can load it in case browser is busy doing something else.

Pitfall

While inlining the critical resources we should never overdo it, especially with base64 encoded string one may argue that inlining them will reduce the network request but it will bloat our markup making its parsing slow and also it is very inefficient to load a resource as base64 encoded string.

for more info refer to this article