Minify JS and CSS from Pro theme with W3 Total Cache

Hi Themeco,

Thanks for the great Pro theme!

I’m trying to improve the performance of my site with W3 Total Cache and minifing files. This is my demo site: https://www.suarhoutboomstamtafel.nl/

I minified the JS in this order (in head):

wp-includes/js/jquery/jquery.js
wp-includes/js/jquery/jquery-migrate.min.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-head.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-body.js
wp-content/themes/pro/framework/dist/js/site/x.js

And the CSS in this order (in head):

wp-content/themes/pro/framework/legacy/cranium/dist/css/site/integrity-light.css
wp-content/themes/pro/framework/dist/css/site/stacks/integrity-light.css

Most of the theme works except the mobile menu and Font Awesome. Any idea how to solve this?

I found this post https://theme.co/apex/forum/t/customizations-performance/210 but this only says Set on Auto, but i want to manually set the minify.

Thanks!

  • Menno

Hi There,

You don’t need to minify those files as they are already minified by default.

Just need exclude these files from the minification:

wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-body.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-head.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-vendor.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs.js
wp-content/themes/pro/framework/dist/js/site/x.js

Regards!

Hello Thai,

Thanks for your response. I’m looking for a way to remove the render blocking of Cornerstone scripts. See this demo https://developers.google.com/speed/pagespeed/insights/?hl=nl&url=https%3A%2F%2Fwww.suarhoutboomstamtafel.nl%2F

Is there a way to load Themeco files in the footer or between the body tags?

Thanks, Menno

Hi @mennobouma,

It’s still related to optimization and it’s not possible in Wordpress platform without using any plugin. Wordpress’s themes and plugins are created by many and different authors including its libraries. I recommend contacting W3 Total Cache author on how to do that and please check this https://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/

Each optimization plugin may have a different feature that works the same, so you may need to check their documentation. But keep in mind that this process could break your site (but it’s not a permanent damage) because fixing render-blocking requests could affect the loading order of the scripts and that will affect script dependencies. An example is, script-one.js is loaded and minified first than jquery.js where it’s dependent, hence, making the script-one.js fails.

Thanks!

Hi Rad,

Thanks for your response.

We use W3 Total Cache already and have tested with JS minifing in this order:

[Wordpress jQuery files here]
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-body.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-head.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-vendor.js
wp-content/themes/pro/cornerstone/assets/dist/js/site/cs.js
wp-content/themes/pro/framework/dist/js/site/x.js

All loading right after the opening tag. But it gives errors in the console. It would be nice if we can put the file right before the closing tag but i think this is not going to work.

Thanks!

Update: We added all files in the minifier again with some tweaks and now it looks better. Only the blog isn’t loading properly because of jQuery. Which JS file creates the masonry grid?

Thanks :slight_smile:

Hi There,

The masonry library is located in this file: wp-content/themes/pro/framework/dist/js/site/x.js.

And the code to create the masonry grid locates in this file:

wp-content/themes/pro/framework/views/global/_script-isotope-index.php

Regards!

Hi @Thai,

Thanks for this. When i cache the file wp-content/themes/pro/framework/dist/js/site/x.js the masonry isn’t working anymore. Any idea how to solve this? All other theme elements are working fine.

Thanks.

Hi @mennobouma,

The masonry is not active on your site (the setting isn’t set for masonry). Though, I tried with the default W3 setting on my installation and it works just fine.

Perhaps you can exclude jquery.js from minification and optimization and make sure it’s loaded first? I’m not sure how you could do that in W3 total cache, but please check this https://premium.wpmudev.org/blog/w3-total-cache-questions-answered/

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.