How do I use defer and lazyload in base.css of shopify

Technical Q&A
, , ,
1

I want to lazy load this base.css or use defer how do i do that? and also is it fine to use lazyload or defer in base.css

css.PNG
css.PNG1003×294 12.5 KB

this is the file am talking about : https://cdn.shopify.com/s/files/1/0701/4917/7646/t/16/assets/base.css?v=831047894957930821679499681

any reply would be appreciated!!

1 Like
2

Hi @Aasif007

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Use Defer this way-

Regards,

San

3

I think the formula you gave me was right but for now it’s not working still blocking the rander

ss.PNG
ss.PNG1357×749 52.4 KB

I put it in bottom of base.css in this way.

4

Hello @Aasif007

Here is some description that has been added please refer to this as it might be helpful to you:

Eliminating Render-Blocking CSS-- The CSS needed to render the above-the-fold sections of the page should be delivered inline in the HTML(Critical CSS).

  • The browser only pulls in the stylesheets for the device type when you add media attributes to CSS links.

Example:

The Preload Attribute for Critical Resources

<``link rel=”``stylesheet”``href="/css``/style.css"``>

After Apply Preload

<``link rel =”``preload”`` href=”``/css/style.``css”``as=”style”``onload=”this.rel=``’stylesheet’”``>

5

@INA_MSWEB It’s showing is header like this

heder.PNG

6

@oscprofessional I think you’re right I have to extracts the necessary css for above the fold content

this is the orignal css link in html file theme.liquid

{{ ‘base.css’ | asset_url | stylesheet_tag }}

I tried your Apply Preload code and I think am doin it wrong.

do you have any idea how do i replace this
{{ ‘base.css’ | asset_url | stylesheet_tag }}

With this

<``link rel =”``preload”`` href=”``/css/style.``css”``as=”style”``onload=”this.rel=``’stylesheet’”``>

thanku.