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

[Aasif007]

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

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!!

[INA_MSWEB]

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-
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

Regards,

San

[Aasif007]

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



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

[Aasif007]

@INA_MSWEB It's showing is header like this

[flareAI]

Hello @Aasif007,

I am Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot. Hope you are having a good day.

To lazy load or defer the base.css file, you can add the loading="lazy" or defer attribute to the link tag in your HTML code. Here's an example of how you could modify the link tag for the base.css file.

<link href="https://cdn.shopify.com/s/files/1/0701/4917/7646/t/16/assets/base.css?v=831047894957930821679499681" rel="stylesheet" type="text/css" loading="lazy">

or

<link href="https://cdn.shopify.com/s/files/1/0701/4917/7646/t/16/assets/base.css?v=831047894957930821679499681" rel="stylesheet" type="text/css" defer>

Regarding whether it's okay to use lazy loading or defer on the base.css file, it depends on the specific needs of your website. Lazy loading can be helpful for improving page speed and reducing the initial load time of your page, but it may also cause some elements of the page to load more slowly or not load at all if the user scrolls too quickly. Defer can be useful for improving page speed by delaying the loading of certain scripts until after the page has loaded, but it may also cause some interactive elements of the page to not function properly until the script has fully loaded.

In general, it's recommended to test the performance of your website with and without lazy loading or defer to see how it affects the user experience and page speed.

Gina

[Aasif007]

thanku Gina, but I tried both lazy load as well defer adding them on bottom of base.css doesn't work, i also tried in theme.liquid 

















Is there anything wrong with my theme? 

[kazi · Accepted solution]

Hello @Aasif007  you can inline the base.css copy the css code from file and add in theme.liquid with <style> </style> tag 

[Aasif007]

@kazi It's affecting the mobile version of website

[Aasif007]

@flareAII tried modifying bass.css of html code.

It was the original version
{{ 'base.css' | asset_url | stylesheet_tag }}

I tired all different variants one by one defer as well lazy load

<link href="https://cdn.shopify.com/s/files/1/0701/4917/7646/t/16/assets/base.css?" rel="stylesheet" type="text/css" defer>

then this

{{ 'base.css' | asset_url | stylesheet_tag }} rel="stylesheet" type="text/css" defer>

{{ 'base.css' | asset_url | rel="stylesheet" type="text/css" defer> }}

{{ 'base.css' | asset_url | rel="stylesheet_tag" type="text/css" defer> }}

None of them worked : (

[oscprofessional]

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’”>

[Aasif007]

@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.