Posted 3 months ago #
Great plugin. You are to be commended for your ongoing development, improvements, and support. Top notch among WP plugins here.
I notice that TablePress loads its stylesheets on every page, and I think WP-Table Reloaded loaded JS on every page, even if no table was on the page.
How about loading TablePress components (styles, JS, etc) conditionally if there's a table on the page? Otherwise, it's just unnecessary page weight.
Hi,
thanks for your post. It's nice to hear that you like TablePress :-)
You are right that both WP-Table Reloaded and TablePress load the CSS stylesheet on all tables.
Both do load their JS conditionally though. (In TablePress, this is true for all JS files, including jQuery, in WP-Table Reloaded, jQuery was loaded on all pages).
Now, unfortunately, it's not possible to load the CSS conditionally as well. The reason is that the CSS has to be loaded in the <head> of the page. However, when that part of the page is generated, TablePress does not yet know, if there will be a table on the page (e.g. from a Shortcode, Template Tag, or in a text widget). So, there's not no way to reliably find out if there's a table on the page, and therefore the CSS is loaded on all pages.
I agree that this might then be unnecessary page weight, but as the CSS (evne the "Custom CSS"!) is minified and loaded from files, this is not too much of a problem. Also, the files are then cached, so that this really only is a problem on the first visited page of the site.
For most sites, there are other optimizations that bring higher performance benefits, like reducing/compressing images better.
Regards,
Tobias
Posted 3 months ago #
Thank you for the quick reply. On further thought, I agree with your conclusion. I didn't pick up on the fact that TablePress is now conditionally loading JS.
However, your statement that "it's not possible..." to conditionally load CSS isn't quite accurate, AFIK. See http://beerpla.net/2010/01/13/wordpress-plugin-development-how-to-include-css-and-javascript-conditionally-and-only-when-needed-by-the-posts/. The problem is that although it is possible, the solution offered by that article may not represent a real improvement/optimization, and may break something.
Also, I've only used the table shortcode on a single post or page, so I could remove CSS, and then conditionally load it if the single template were being displayed. That's still not a perfect optimization, but it removes the CSS from other templates, such as archives.
Still, you've done a lot by conditionally loading JS, and although one could apply some of these tweaks, I agree that they're going to provide very little, if any, optimization.
Hi,
yes, you are right that searching through the posts that are going to one the page could be beneficial here, but that approach has a few drawbacks: It does not account for tables that are inserted in a custom WP_Query (i.e. it only catches the main page query), it does not catch tables that are inserted by the Template Tag functions, and it does not catch tables in text widgets.
Additionally, the method is not always reliable in some themes, that have a weird post loading behavior :-/
The risk of suddenly having a table without styling is much higher with this approach, than to just "bite the bullet" and always load the CSS file.
For the JS, all of this is no problem, as that's loaded in the footer anyway and can therefore be enqueued whenever a table is being shown on the page (just as it's done in TablePress).
For your specific case, you could indeed use a filter hook maybe (note that this implementation only accounts for the Default CSS):
add_filter( 'tablepress_use_default_css', 'tablepress_css_conditional_load' );
function tablepress_css_conditional_load( $load ) {
if ( ! is_single( array( 'your-page-slug-1', 'your-page-slug-2' ) ) )
return false;
return $load;
}This should go into your theme's "functions.php" or a small new plugin. If I didn't make a mistake, this will tell TablePress to only enqueue the Default CSS on the pages/posts with the slugs your-page-slug-1 and your-page-slug-2.
Best wishes,
Tobias
Posted 3 months ago #
Hi Tobias,
i try english, have make the Update from TBreloaded, all works fine. I have all my CSS in the Theme-CSS (style.css) see you a way for always not load the CSS from Plugin?
Noch mal auf deutsch, ich brauch überhaupt nicht die CSS aus dem Plugin weil ich alles CSS in meiner Theme style.css drinnen habe, wie kann ich das in der functions.php händeln ohne am Plugin zu hacken. Hab jetzt auskommentiert:
// olaf wech wp_enqueue_style( 'tablepress-default', $default_css_url, array(), TablePress::version );
in controller-frontend.php
Zusatzfrage, es hatte die Einstellungen auch zu JS nicht übernommen, ich musste jetzt durch 50 Tabellen und es überall deaktivieren. Ich befürchte wenn ein Redakteur eine neue Tabelle anlegt ist das wieder aktiv. Gab es nicht vorher eine globale Einstellung dafür? Kannst du das wieder reinbasteln?
Tolle Arbeit, Danke!!!!
Hi Olaf,
thanks for your question!
I'll answer in English, so that everybody can benefit from this. If you have trouble understanding, please send me an email, and we can continue in German then. (The address is in the main plugin file "tablepress.php".)
I don't actually recommend putting the TablePress Default CSS into your theme's style.css, for several reasons: After an update of TablePress, you might have to manually update the CSS again, and you take away the opportunity to easily update your theme (unless it's a custom or child theme anyway).
Of course, it is still possible to not load the TablePress Default CSS. To do that, please
1. Revert that change in the controller-frontend.php! You should not modify plugin files directly, as you will lose those changes after a plugin update.
2. Instead, just add this line to your theme's functions.php (or create a small plugin around it):
add_filter( 'tablepress_use_default_css', '__return_false' );Now, regarding the JavaScript question: Yeah, sorry that this happened. I somehow forgot to make the import process aware of this setting...
And yes, new tables will automatically have the "Use DataTables" checkbox checked. Fortunately, this can also be changed with a small piece of code. Please see http://tablepress.org/extensions/datatables-off-new-tables/ for more information, and just install the small TablePress Extension from there as a regular plugin.
Regards,
Tobias
FYI, you can also conditionally load the custom CSS file using this same technique, if you enter custom CSS and choose to save it to a file.
// only include custom CSS file on pages with tables
add_filter('tablepress_custom_css_url', 'remove_tablepress_custom_css');
function remove_tablepress_custom_css($load) {
if (!is_page(array('page-slug1', 'page-slug2'))) {
return false;
}
return $load;
}Sorry, since I don't want either CSS file loading on pages other than those with tables, I only need one function. So I ended up condensing both code snippets into one like this:
// conditional load Tablepress CSS
add_filter('tablepress_use_default_css', 'tablepress_css_conditional_load');
add_filter('tablepress_custom_css_url', 'tablepress_css_conditional_load');
function tablepress_css_conditional_load($load) {
return ((!is_page(array('page-slug1', 'page-slug2'))) ? false : $load);
}Hi,
thanks for sharing that trick, jp2112! Very nice! Indeed, if the filter returns false, no file will be enqueued.
Best wishes,
Tobias
You must log in to post.
