How can I eliminate render-blocking resources effectively?

PoojaHiwade
Excursionist
26 0 13

can any one help with a solution?

How Solve this error?

 

Capture - 306.PNG

 

Replies 4 (4)

Rishihuptech
Shopify Partner
586 103 118

Hello @PoojaHiwade 

 

Here am giving you a solution that works for me.

 

we can add the CSS like below, For the CSS which is not needed at store load

 

<link href="{{ 'test.css' | asset_url }}" rel="stylesheet" type="text/css" media="none" onload="if(media!='all')media='all'" />

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
PoojaHiwade
Excursionist
26 0 13

Hello

I have added code as per your suggestion but have an issue on load the website.
css not load in few milisecond then, also Eliminate Render-Blocking Resources issue still there

flareAI
Shopify Partner
2405 223 540

Hello @PoojaHiwade,


I am Gina from flareAI app - free sales machine, and I am here to provide assistance.


The "Eliminate Render-Blocking Resources" error is typically related to optimizing the loading speed of a web page. When a web page loads, the browser has to download and process various resources such as HTML, CSS, JavaScript, and images. If some of these resources are "render-blocking," meaning they prevent the browser from displaying the page content until they are fully loaded and processed, it can slow down the page loading speed and result in a poor user experience.


Here are some ways to eliminate render-blocking resources and improve the loading speed of your web page:


1. Optimize images
Large images can slow down a web page's loading speed. Use image compression tools to reduce the file size of images without affecting their quality. You can also use lazy loading to delay the loading of images that are not immediately visible on the page.

2. Minimize and compress CSS and JavaScript files
Minimize and compress the CSS and JavaScript files used on your web page. This will reduce the file size and loading time of these resources.

3. Use asynchronous loading
Use the async attribute for JavaScript files and defer attribute for CSS files to allow the browser to load them asynchronously, without blocking the rendering of the page.

4. Prioritize above-the-fold content
Load the critical resources (HTML, CSS, JavaScript) required for rendering the above-the-fold content of the page first. This will allow the user to see the page's main content quickly, while the rest of the resources load in the background.

5. Reduce HTTP requests
The more resources a web page has, the longer it takes to load. Try to minimize the number of HTTP requests your web page makes by combining CSS and JavaScript files and using CSS sprites for images.

6. Avoid excessive use of external resources
Limit the use of external resources such as fonts and libraries, as they can add to the number of HTTP requests and slow down the page loading speed.


By implementing these techniques, you can reduce the number of render-blocking resources on your web page and improve its loading speed.


Let me know if you have any further questions.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing

oscprofessional
Shopify Partner
15903 2378 3087

Hello @PoojaHiwade 

You can try this: 

Eliminating Render-Blocking CSS

  • Removing any unused 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.

The Preload Attribute for Critical Resources

 

<link rel=”stylesheet”href="/css/theme.scss.css">

 

 

After Apply Preload

 

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

 

By fixing these issues, your website speed score can definitely improve.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free