How to Control When TablePress CSS and JavaScript Loads on Your Site
Content
If you use TablePress to create beautiful tables on your WordPress site, you might have noticed that its CSS and JavaScript files are loading on pages that don't even contain a table. This can negatively impact your site's performance and PageSpeed scores. Let's explore why this happens and how you can take control.
Why TablePress Files Load on Every Page
Historically, this was a technical limitation of how WordPress and classic themes work. The CSS files had to be enqueued at a point in the page loading process where it wasn't yet known if a table would be present. The same principle applied to the main JavaScript file (jquery.datatables.min.js), which is responsible for features like sorting and pagination and needs to load early to function properly.
Good news! The TablePress team addressed the CSS loading behavior in version 3.0. The plugin should now only load its default CSS on pages that actually contain a table. If you are on version 3.0 or higher and still see the CSS loading everywhere, ensure all your plugins and theme are compatible with this new method.
Common Solutions for Unwanted File Loading
1. Update Your Plugins
First, always ensure you are running the latest version of TablePress. Many performance improvements, including smarter CSS loading, have been introduced in recent updates.
2. Use Custom Code to Conditionally Load CSS
If you are using an older version of TablePress or need more granular control, you can use a custom PHP snippet. This code will tell TablePress to only load its default CSS on specific pages.
add_filter( 'tablepress_use_default_css', 'custom_load_tablepress_css' );
function custom_load_tablepress_css( $load_css ) {
if ( ! is_page( array( 'about-us', 'pricing' ) ) ) { // Replace with your page slugs
$load_css = false;
}
return $load_css;
}
You can add this code to your child theme's functions.php file. Remember to replace 'about-us' and 'pricing' with the actual slugs of the pages where you want the CSS to load.
3. Control Module-Specific CSS Files
TablePress uses additional CSS files for certain advanced features. If a tool like PageSpeed Insights is reporting unused CSS from files like datatables.rowgroup.css, you can prevent them from loading unless needed. The tablepress_module_enqueue_css_files filter hook can be used for this purpose.
4. Check for Plugin Conflicts (Especially Optimization Plugins)
Sometimes, the issue isn't TablePress itself. Performance optimization plugins can sometimes be overly aggressive. For example, one user found that a different plugin was adding a preload instruction for the TablePress font file on their homepage, even though no table was present. If you notice unexpected behavior, try temporarily disabling other plugins to see if the problem resolves.
5. For JavaScript: Understand the Trade-Off
The JavaScript file is loaded early to ensure table features like sorting work instantly. While this can affect performance scores, it's a conscious design choice to ensure a good user experience. There isn't a simple switch to disable it, as that would break table functionality.
Cleaning Up After Uninstalling
If you have removed the TablePress plugin, you might find leftover CSS files in your /wp-content/ directory, such as tablepress-combined.min.css or tablepress-custom.css. These can be safely deleted if you are no longer using the plugin.
Conclusion
Managing how and when TablePress loads its assets is key to maintaining a fast website. By ensuring you are on the latest version and using the conditional code snippets provided, you can significantly improve your site's performance without sacrificing functionality.
Related Support Threads Support
-
Tablepress loading default.css on all pageshttps://wordpress.org/support/topic/tablepress-loading-default-css-on-all-pages/
-
Custom styling code brokenhttps://wordpress.org/support/topic/custom-styling-code-broken/
-
WP Rocket Javascript settings preventing Fix Header Extension from workinghttps://wordpress.org/support/topic/wp-rocket-javascript-settings-preventing-fix-header-extension-from-working/
-
Language for Tablepresshttps://wordpress.org/support/topic/language-for-tablepress/
-
Where is this code located?https://wordpress.org/support/topic/where-is-this-code-located/
-
CSS files left behind after removinghttps://wordpress.org/support/topic/css-files-left-behind-after-removing/
-
Tablepress CSS is included on page even if no tables are being renderedhttps://wordpress.org/support/topic/tablepress-css-is-included-on-page-even-if-no-tables-are-being-rendered/
-
Custom CSS causes Internal Server Errorhttps://wordpress.org/support/topic/custom-css-causes-internal-server-error/
-
Adding a tooltip to texts in Tablepresshttps://wordpress.org/support/topic/adding-a-tooltip-to-texts-in-tablepress/
-
Compatibility with Offload Media Pluginhttps://wordpress.org/support/topic/compatibility-with-offload-media-plugin/
-
Tablepress Custom CSS “Comments”https://wordpress.org/support/topic/tablepress-custom-css-comments/
-
Tablepress – Admin table content improvementshttps://wordpress.org/support/topic/tablepress-admin-table-content-improvements/
-
How to delete a Table Press tablehttps://wordpress.org/support/topic/how-to-delete-a-table-press-table/
-
TablePress Custom CSS no longer showinghttps://wordpress.org/support/topic/tablepress-custom-css-no-longer-showing/
-
CSS is still loaded on all pageshttps://wordpress.org/support/topic/css-is-still-loaded-on-all-pages/
-
OTTIMIZZARE PER AMPhttps://wordpress.org/support/topic/ottimizzare-per-amp/
-
Table press Default CSS loading Sequence issuehttps://wordpress.org/support/topic/table-press-default-css-loading-sequence-issue/
-
Custom Font Not Visiblehttps://wordpress.org/support/topic/custom-font-not-visible/
-
Preventing TablePress from Automatically Clearing WP-Rocket Cachehttps://wordpress.org/support/topic/preventing-tablepress-from-automatically-clearing-wp-rocket-cache/
-
Files in wp-content directory, continuedhttps://wordpress.org/support/topic/files-in-wp-content-directory-continued/
-
Why tablepress.woff font is loaded on the Home Page?https://wordpress.org/support/topic/why-tablepress-woff-font-is-loaded-on-the-home-page/
-
TablePress – No “custom css text area” under “Plugin options”https://wordpress.org/support/topic/tablepress-no-custom-css-text-area-under-plugin-options/
-
“Custom CSS” on the “Plugin Options” is NOT viviblehttps://wordpress.org/support/topic/custom-css-on-the-plugin-options-is-not-vivible/
-
Global CSS Selectorhttps://wordpress.org/support/topic/global-css-selector/
-
Google Fonthttps://wordpress.org/support/topic/google-font-18/
-
Issue with the loading of the custom CSS for TablePress.https://wordpress.org/support/topic/issue-with-the-loading-of-the-custom-css-for-tablepress/
-
CSS-Syntaxfehler in Tag “style amp-custom”https://wordpress.org/support/topic/css-syntaxfehler-in-tag-style-amp-custom-2/
-
Why did I sometimes use #wrapper in my CSS? Remove it?https://wordpress.org/support/topic/why-did-i-sometimes-use-wrapper-in-my-css-remove-it/
-
Removing the plugin from particular pages.https://wordpress.org/support/topic/removing-the-plugin-from-particular-pages/
-
Migrate refresh.css in My Calendar plugin problemhttps://wordpress.org/support/topic/migrate-refresh-css-in-my-calendar-plugin-problem/
-
TablePress: CSS to Disable Paginationhttps://wordpress.org/support/topic/tablepress-css-to-disable-pagination/
-
custom css locationhttps://wordpress.org/support/topic/custom-css-location-2/
-
Issue with page loading speedhttps://wordpress.org/support/topic/issue-with-page-loading-speed/
-
custom css not loadinghttps://wordpress.org/support/topic/custom-css-not-loading-4/
-
Unused css of datatablehttps://wordpress.org/support/topic/unused-css-of-datatable/
-
Problem with WP Rocket and Shortcodeshttps://wordpress.org/support/topic/problem-with-wp-rocket-and-shortcodes/
-
full URL stored in wp-content/tablepress-combined.min.csshttps://wordpress.org/support/topic/full-url-stored-in-wp-content-tablepress-combined-min-css/
-
default.css overriding the custom CSS I have in the customizerhttps://wordpress.org/support/topic/default-css-overriding-the-custom-css-i-have-in-the-customizer/
-
Pagespeed insights: Eliminate render-blocking resourcehttps://wordpress.org/support/topic/pagespeed-insights-eliminate-render-blocking-resource/
-
Edit page CSS Loading issuehttps://wordpress.org/support/topic/edit-page-css-loading-issue/