How to Optimize Table of Contents Plus for Speed

In this post you will learn how to optimize Table of Contents Plus so it doesn’t hurt the speed of your WordPress site.

TOC plugins bring some SEO benefits since they add Jump to Links within search results and they also help with navigation if you are writing long posts.

I also like using a Table of Content before the first heading because I like to place ads before and after them. Two nice placements for your ad units that won’t break your introductory paragraphs.

To Toggle or not To Toggle

In table of contents plus, you will find an option to allow the user to toggle the visibility of the table of contents and to hide the table of contents initially.

You might think that activating those two functionalities might be a good idea and it probably is, however activating those two options will add one more request to your site.

Activating one or both of these functionality will not drag your speed down but if you are thinking about reducing the amount of requests and JS of your site, consider not using them.

If you already unticked those two options and continue seeing the script in speed tests, clear cache and consider removing it using PerfMatters or any other plugin with similar functionalities.

Optimize the CSS of Table of Contents Plus

There is one more thing that you can do to make sure Table of Contents Plus is optimized for speed. This is a little bit more technical but not that difficult to implement.

Before reading this, you can remove unused CSS using popular caching plugins such as WPRocket and FlyingPress

If you don’t want to use a Premium caching plugin to do that and if you fail to find free options, you can do this:

Make sure that you are not making any more changes to the Table of Content Plus settings.

Go to the Table of Content Plus Settings and tick the option “Prevent the loading of this plugin’s CSS styles.”

Go to the PurifyCSS site and paste an url from your site

Find the clean CSS for Table of Contents Plus

Now go to show clean css code and copy it

Go to your wordpress dashboard, appearance, customize and then to additional CSS and paste the code there.

Now the CSS Table of Content Plus is 100% cleaner

Clean TOC+ CSS Manually

This is what I got when I cleaned the CSS manuallu

#toc_container li,#toc_container ul{margin:0;padding:0}#toc_container.no_bullets li,#toc_container.no_bullets ul,#toc_container.no_bullets ul li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li{background:0 0;list-style-type:none;list-style:none}#toc_container.have_bullets li{padding-left:12px}#toc_container ul ul{margin-left:1.5em}#toc_container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}#toc_container.toc_light_blue{background:#edf6ff}#toc_container p.toc_title{text-align:center;font-weight:700;margin:0;padding:0}#toc_container span.toc_toggle{font-weight:400;font-size:90%}#toc_container p.toc_title+ul.toc_list{margin-top:1em}.toc_wrap_left{float:left;margin-right:10px}.toc_wrap_right{float:right;margin-left:10px}#toc_container a{text-decoration:none;text-shadow:none}#toc_container a:hover{text-decoration:underline}

I don’t know CSS but I removed a few lines of code that I thought that I didn’t need and the Table of Contents Plus is working as expected

#toc_container li,#toc_container ul{margin:0;padding:0}#toc_container.no_bullets li,#toc_container.no_bullets ul li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li{background:0 0;list-style-type:none;list-style:none}#toc_container ul ul{margin-left:1.5em}#toc_container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}#toc_container p.toc_title{text-align:center;font-weight:700}#toc_container a:hover{text-decoration:underline}

If you don’t want the decoration, you can reduce the code to this and you will still have a nice Table of Contents in all of your posts

#toc_container ul{margin:0;padding:0}#toc_container.no_bullets li,#toc_container.no_bullets ul li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li{background:0 0;list-style-type:none;list-style:none} #toc_container ul ul{margin-left:1.5em} #toc_container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}#toc_container p.toc_title{text-align:center;font-weight:700}

Since this is additional CSS, you won’t have any more render blocking warnings caused by the TOC+ plugin in speed tests.

About Jose manuel

I am José Manuel. I started a WordPress blog in 2011 as a hobby to use it a part of my teaching and I fell in love with blogging & WordPress.

I am writing about things I know and things that I am learning. I hope you find some of the things I write useful.

WPS covers information about hosting, security, speed, SEO and monetization for WordPress sites


You can ask questions via Facebook or Twitter