The CSS Compiler was introduced in Avada version 3.8. The CSS Compiler is a great way to optimize the CSS styles which are dynamically generated from the various option settings on your site. This is done by compiling the styles into one file for each page/post, providing a performance boost. The JS compiler is mainly for debugging purposes and should remain enabled on your site. Please continue reading below to learn more about the JS & CSS Compiler.
What Is The CSS Compiler?
When the CSS Compiler is disabled, each option which relates to the page / post being loaded is processed by your server and the styles are all compiled into a single stylesheet which is loaded in the page through the <head> tag. Since these styles can change based on your settings, they’re referred to as “Dynamic CSS” styles. The processing of each option into a compiled stylesheet happens on each page load which requires more work for the server. The CSS Compiler can be enabled, for increased efficiency.
In Avada 4+ the CSS Compiler option is enabled by default.
Explanation of Each Compiler Method
The CSS Compiler will save the work the server did when compiling the options into a stylesheet so it doesn’t have to be repeated each page load. There are two methods of storing the Dynamic CSS which you can choose from or Disabled. Just select the method of your choice and save the Theme Options.
- File – When you enable the File compiling method, your styles will be saved as a .css file for the page/post it relates to. This file will be stored in wp-content/uploads/avada-styles and loaded when the page is loaded again. This saves the server the work of having to process your site’s settings on each page load. This will remove Avada styling from loading in the <head> tag. Note: This file will automatically be regenerated when you update your settings. If you have a caching plugin or server cache on your site, you should clear your cache to ensure your changes are loaded.
- Database – The Database method will save the compiled CSS in the database instead of as a file. The styles will be loaded in the <head> tag as inline styles for this method as apposed to a .css file as with the File method. This method can increase your database size considerably if you have a large site. For sites with 20-30 pages, this won’t be a problem. However, if you update your website regularly with new content and posts (for example 10K+ blog and portfolio posts), using the Database method is not recommended.
- Disabled – When the Compiler is disabled, it will not save the styles in any way. Each setting will be compiled anew into Dynamic CSS and loaded through the <head> tag as inline styling. This is the least efficient method.
What Does The Head Tag Look Like With And Without The Compiler
Page Source Without CSS Compiler
Page Source With CSS Compiler
The JS Compiler
Reset Fusion Caches
Note: This won’t delete your settings or change your site appearance. It only affects compiled files which are a “saved” version of your settings. This won’t change your actual settings or affect them in any way.
Important Note About Server Cache
For unique cases where you are using cloud flare and a cache server, like varnish cache, enter your cache server IP to clear the theme options Dynamic CSS cache. If you do not do this you may not see your changes instantly on refresh. Consult with your server admin to find out your server IP address.