How to optimize styles and scripts for different devices?

Question

HTML

Created a project, quite large, with an online store. Now I am engaged in optimization of styles and scripts.
The project was created in PHP under Wordpress with Woocommerce.

There are styles and plugin scripts - there is little to change here, but I think that you can split your files for different devices. In addition, there are archive pages - for them some scripts are needed, for the product card - others. For different categories of goods, their own templates have been created and both general and their own styles and scripts are used, respectively.

Tell me, who has already upgraded this topic, should I upload individually designed files for each category of goods (sections of the store's assortment) and for different devices, or what is the best thing to do in my case so as not to load styles and scripts every time when loading pages?

The site can be viewed here: artservice43.ru

Answer 1

Hello!
You can connect individual styles and scripts using the conditional logic of the VI
https://wp-kama.ru/function-tag/uslovnyie-tegi
You can use different services, IDE capabilities, etc. remove unused styles and scripts.
For example, https://unused-css.com/
You can use optimization and caching plugins to compress scripts and styles.
I usually use Fastest Cache + Fastest Cache Premium