The latest feature of WordPress, WP Customizer is the latest buzz in WP dev. community. Finally, after some improvements most of the Premium theme authors have finally accepted the new feature with both hands. WP Theme customizer allows a user to make changes in the site appearance “Live”. By Live I mean that on one half of the screen you have the options and on the other half you have your site, so any changes you make in the theme options, appear instantaneously on the right part. With this feature I am glad that WordPress now focusses on usability part of the CMS, though I still wait for an editor like Aloha to be integrated in the WordPress as a core functionality.
However, WP Theme customizer comes with some redundancies which many theme developers like me don’t like. WordPress recommends that you can add the custom CSS generated from the Theme customizer directly into the html. This would mean that all the CSS generated would directly go into the HTML. I have found a lot of theme authors are doing this, below are few screenshots form a top selling theme on Themeforest:
The Issue
The disadvantage of this method is that the CSS generated by this method can not be cached, neither by server nor by browser. So if a theme is using this functionality heavily, it will generate a lot of CSS which can not be cached. Therefore it will impact the page speed majorly. {refer to this reading..}
A Possible Solution
We also encountered this issue while creating VibeCom. A simple solution we’ve given is as follows:
- Enable WP Theme Customizer from a settings in Vibe Options Panel.
- Copy all the generated CSS from view source.
- Add a hook in your WP Theme after wp_head()
- Attach a custom CSS file to that hook.
- Paste the generated CSS code in the custom CSS file.
- Disable WP Theme customizer.
Though I am optimistic future updates in WP would overcome this hurdle as well, but for the time being the above suggested solution works fine without impacting the Page load times of the site.