Return to previous page

How to improve My website speed. by reduscig the unused Css and js.

This topic has 6 replies, 2 voices, and was last updated 8 months, 1 weeks ago ago by Luca Rossi

chilly

Participant

March 13, 2024 at 12:06

Hello, I Hope you are doing good,

So What I wanted to ask is there a way to remove unsed css for some important files such as xstore.css because google page insights gives me an error everytime I run a test. check image attached [LCP.png].

I also noticed that if the unsed css is removed for some pages. it might be used on other pages. I’m using LiteSpeed Cache and I’m using Unsed Css Functionality but still I get same error.

Is there a solution ?

Thank you in advance.

Files is visible for topic creator and
support staff only.

#386706 Copied Theme version: 9.2.8

5 Answers

Luca Rossi

Support staff

March 13, 2024 at 14:25

Hello @chilly,

We suggest you to try with WP-Rocket plugin: https://wp-rocket.me/.

WP Rocket plugin support should be able to help you find the best settings to speed up the site (all options of the plugin should not be activated at the same time, it is required to find a correct combination of settings that will not conflict with your site content and additional plugins and give best speed test results).

For example settings from one of our demos – https://gyazo.com/e95ac59fe4d0b6b5e8bcf67a1cb6881d
https://gyazo.com/da84163cee8d36623081657bfd01f482 https://gyazo.com/268498dd61e0a6205006b7c315488caa
https://gyazo.com/9eb09280e91c6c57bd9d623997434657
https://gyazo.com/28482f528a2b36d6ad1d309cb3ad6d13
https://gyazo.com/6a11e9846ccc9edbfc8e25f60b3e51b8 https://gyazo.com/72334f00cba3e641067a89d396f4b089
https://gyazo.com/d43ba7a24664a998869eb59361ec7ca0

Also, please read this article – https://www.8theme.com/documentation/xstore/troubleshooting/how-to-speed-up-my-website/ , and disable unrequired plugins because every additional plugin slows down the site a bit.

About speed test results on https://gtmetrix.com/ , https://prnt.sc/2cnhiPokHSyz : – Avoid an excessive DOM size – read these posts about DOM https://docs.wp-rocket.me/article/1412-avoid-an-excessive-dom-size
https://isotropic.co/avoid-an-excessive-dom-size-on-your-wordpress-website/ Edit your page and Product elements and enable Ajaxify for the Product elements https://prnt.sc/HzYeSqzHBWKo . It should reduce the DOM structure. Also, you may try to reduce the DOM results on the page by reducing the number of sections of the page/elements in the footer or header; – Avoid long main-thread tasks – https://gtmetrix.com/avoid-long-main-thread-tasks.html ; – Use a Content Delivery Network (CDN), it can give an equally fast web experience to your users across the globe. We use CDN on our demos;

Kind Regards,
8theme team

#386744 Copied

chilly

Participant

March 15, 2024 at 14:32

I have already tried this and yes it improved my website speed.

But what im using is LiteSpeed Cache which is in my case better then wp-rocket because im using Hostinger and also I’m using Quic cloud CDN.

But what im trully asking is there a way I can do it manully. Manully reduce unused css for Xstore files. So for example the home page will have a an optimized version of Xstore.css files and the shop page will have another vesrion and the product page will have another version. Because some Pages uses some of the css Xstore.css have and some other pages not.

I hope you understand what im asking.

Thank you in advance.

#387107 Copied

Luca Rossi

Support staff

March 16, 2024 at 07:17

Dear @chilly,

We are grateful for your prompt response to our previous communication.

We regret to inform you that the nature of your request necessitates further code customization, which, regrettably, extends beyond the parameters of the support services we are able to offer.

Your comprehension in this matter is highly appreciated.

Kind Regards,
The 8Theme Team

#387175 Copied

chilly

Participant

March 18, 2024 at 12:10

I wanna do it myself I have my own developers. I just wanna know the way or the method so I can inform my team.

I just want your help with that which is norml I guess !

#387340 Copied
Luca Rossi

Support staff

March 19, 2024 at 08:46
Dear @chilly,

We hope this message finds you well.

We would like to guide you through the process of customizing your theme’s CSS. Please refer to the following file within your theme’s directory:

/themes/xstore/xstore.css

Within this file, you will find a variety of CSS classes. We recommend that you categorize these classes into separate files based on their functionality, such as:

– For WooCommerce-related CSS classes, create a file named ‘woocommerce.css’.
– For WPML-related CSS classes, create a file named ‘wpml.css’.
– Continue this process for other relevant categories.

Once you have organized the CSS classes into separate files, you can include these files in your child theme by adding the following code to your functions.php file:
```
add_action( 'wp_enqueue_scripts', 'et_theme_enqueue_styles', 1001 );
function et_theme_enqueue_styles() {
    wp_deregister_style('etheme-parent-style');
    wp_enqueue_style( 'separated-1', get_stylesheet_directory_uri() . '/separated-1.css' );
    wp_enqueue_style( 'separated-2', get_stylesheet_directory_uri() . '/separated-2.css' );
}
```
Please ensure that you replace ‘separated-1.css’ and ‘separated-2.css’ with the appropriate filenames that correspond to your newly created CSS files.

Should you require any further assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team
#387469 Copied
Tagged: efficient woocommerce templates, improve website speed, js, minimize css, optimize woocommerce speed, reducing unused css, woocommerce wordpress templates, wordpress speed improvement
Viewing 6 results - 1 through 6 (of 6 total)