Back to Community

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