- This topic has 3 replies, 3 voices, and was last updated 4 years, 5 months ago by
.
-
Posts
-
Usually, style.css contains all the format. However, then the file can be “big”, and the Light house tool will report many unused code. I am thinking to use Elements for loading different CSS files for different pages.
However, I wonder if that makes worst performance? Because I assume that before loading any page, WordPress now needs to check all the Elements first. So if there are more elements, the processing time is increasing. How does it compare with no elements, but loading one style.css file by default?
Any testing yet?
Customer Support
Because I assume that before loading any page, WordPress now needs to check all the Elements first.
That’s not the case. WordPress doesn’t selectively remove/add CSS depending on elements. WP just enqueues its default .css files.
However, I wonder if that makes worst performance? Because I assume that before loading any page, WordPress now needs to check all the Elements first. So if there are more elements, the processing time is increasing. How does it compare with no elements, but loading one style.css file by default?
I think there’s a diminishing return w/ combining CSS but here’s a good read about it.
https://wpjohnny.com/why-you-shouldnt-combine-css-js-performance-reasons/
No, that is not what I mean. When mentioning on Elements, I mean the GP Premium Elements. That’s why I assume WordPress needs to check all the GP Premium Elements to see if there is any preload, for example, for any page. If WordPress doesn’t check all GP Premium Elements, how does it know what to load to which page?
Customer Support
Hi there,
In WP core and the Theme Templates are Action Hooks. eg.
generate_before_headerorwp_head.
When WP executes its code, any Hooks it comes across it will check if there are any Callback Functions registered to a Hook. If there are WP executes those functions.GP Elements does two things:
1. All elements are saved in the Database with as a Post Template.
2. Registers the callback function in the relevant hook with the relevant Display Conditions for each of those post types.So WP fires the callback, the function will check if conditions are met, and if so it will get the relevant ( element ) template, if the conditions aren’t met then WP just moves on to the next bit of code.
Back to your question on loading CSS this way…. i wouldn’t bother trying to split out theme or plugin styles to eliminate unused CSS. Its just not worth the hassle for the negligble benefits it results in.
Consider the Themes main.css may contain different unused CSS on the different templates you visit. On Initial Load that CSS stylesheet is cached by the browser, meaning no subsequent requests to a stylesheet are required. Whereas loading different CSS on each page will require more requests per page and you will need to ensure Page Caching doesn’t mess it up.
For some plugins eg. Woocommerce, you may want to NOT load its CSS on non Woocommerce pages, and there are plugins like Perfmatters that do this.
- You must be logged in to reply to this topic.
