valendesigns
Feature Request: Theme Options UI Caching
Hello there,
When we have lots of options, the "Theme Options" page can take a while to load. This is understandable considering the construction of all the fields, one by one, from our array of options.
A very simple solution would be to save the HTML output to a file or save it into the database eventually, and then instead of rebuilding the entire "Theme Options" layout each time, simply echo the cached HTML directly!
Now it's true that the state of the "Theme Options" page changes each time the user hits "Save", so we would need to refresh the cache upon saving...
I don't know if that makes any sense or if it's a stupid idea, in which case what could be done to make the "Theme Options" page load faster?
This sounds like a good idea to me. Not sure what would be the best way to do it though. Anyone else got some ideas?
I'm always a little bit cautious of writing files.
Maybe just show all section buttons, and use ajax to open the active section options. So there's never more than 1 section open at the same time. Saving could also be done with ajax.
@valendesigns Could you explain in short how the loading / saving now works? (1 big array, or per section) and maybe we can come up with a nice solution.
@mindtwist It's one big array. Adding AJAX back into the mix is probable the way to go.
+1 - This would be a great improvement. I'm using a lot of Meta Boxes and the edit screen takes a while to load.
I disagree with the AJAX approach, the performance gain from the caching would be compensated by the time an additional HTTP request would add, in my opinion.
As I have stated in another message https://github.com/valendesigns/option-tree/issues/305#issuecomment-40603178, saving the outputted HTML and replacing the dynamic parts (i.e. the field's values) with for example <?php echo $values['fieldid']; ?> is the recommended approach for best performance.
In this case scenario, the outputted HTML (with PHP parts for the values) could be saved in the database as a string (and then processed with eval()), or in a file (and then included via simple include).
The name of the database entry (or the name of the saved file) could be a simple MD5 hash of the options array. Upon loading of the Theme Options page, you would generate on the fly a MD5 hash of the options array and retrieve the corresponding cache file (or database entry) using the MD5 hash value of the options array.
If the cache file (or database entry) doesn't exist, then the cache will need to be generated, which will trigger a longer page load exceptionally. The next time the Theme Options page is loaded, the cache will already exist.
When editing the options array (e.g. via the UI Builder) its MD5 hash value will automatically change so it will then trigger the regeneration of the cache immediately when loading the Theme Options page, which is exactly what we want.
Hope that makes sense and that helps in any way implementing a caching feature :)
@bitcommit , I really appreciate your input and I'm very pleased that we are talking about performance gains. Client side performance is my second biggest challenge right now with Option Tree.
As a side note, we are premium theme authors, creating themes for sale on ThemeForest. Envato has certain requirements for submitting and approving themes. One of their requirements (#7 under php) is "Use of the eval() function is not permitted."
http://support.envato.com/index.php?/Knowledgebase/Article/View/472/85/wordpress-theme-submission-requirements
I know that not everyone is selling themes, but since Option Tree in endorsed by Envato and a good many are using Option Tree for Premium Themes, I think it's a good idea to keep the guidelines in view. IMHO
Again, I really appreciate the time and consideration that everyone is putting into this open source project. I really hope we can have a serious look at performance.
http://wp.envato.com/open-source-plugins/option-tree/
As we are getting very close to launching our new theme (Has it been 5 months already?? LOL), we are running performance tests and looking at ways to improve load times. For our theme, we use a lot of meta boxes and that can cause big delays in loading because of all the DOM's. Has anyone considered going the asynchronous route, perhaps loading each meta box or theme option via jquery / edit button?
What about using the WordPress thickbox to load each Meta Box when needed?
Suggestions and comments are appreciated. I'm very happy to work on this and submit our code.