How to optimize ‘premium’ themes for your website

How to optimize ‘premium’ themes for your website

Premium themes from some amazing authors like Themeforest, Themefuse and Elegant Themes are great but they have a major negative: they aren’t smart enough to exclude scripts and stylesheets on the pages where they are not needed. For instance, if 10 scripts are being loaded for a page with slider, all those scripts are loaded on another page that hasn’t got a slider or there might be 3 scripts for form validation being loaded on your website’s pages. In this post, I will show you how to not load these unnecessary scripts on the rest of your website’s pages. Please backup your website before we begin the process so that you have a restore point in case something goes wrong.

How this process will help your on-page SEO

By removing unnecessary scripts, we’ll be able to improve your site’s page load speed. Search Engines have been emphasizing on page speed and load time has become a parameter to determine the quality of your site. A site that loads fast is also good for your visitor’s experience.

Let’s go to Themeforest.net and grab hold of one of one of the most popular themes – Avada to demonstrate this. After installing Avada on my new website, I notice how many unnecessary scripts are being loaded on the homepage that simply displays my welcome message.

Initial screenshot

After Installing Avada, I have simply put a welcome message on my homepage.

Now let’s have a look in firebug and find out the amount of scripts loading.

unnecessary javascript

When I check under javascript tab of firebug, I can see a whole heap of javascript files (most of them not required on this page) loading.

Loading javascript files selectively

In order to disable loading scripts on the pages it’s not required, you can add the following code to your theme’s functions.php file.

add_action( 'wp_print_scripts', 'deregister_unnecessary_javascript', 100 );

function deregister_unnecessary_javascript() {
   if ( !is_page('contact') ) {
   // use condition is_page( array( 42, 'about-me', 'Contact' ) ) for multiple pages at once
	   wp_deregister_script( 'jquery.flexslider' );
	   wp_deregister_script( 'jquery.carouFredSel' );
	   wp_deregister_script( 'jquery.prettyPhoto' );
	   wp_deregister_script( 'jquery.isotope' );
	   wp_deregister_script( 'jquery.fitvids' );
	   wp_deregister_script( 'jquery.hoverIntent' );
	   wp_deregister_script( 'jquery.eislideshow' );
	   wp_deregister_script( 'jquery.placeholder' );
	   wp_deregister_script( 'jquery.waypoint' );
	   wp_deregister_script( 'jquery.infinitescroll' );
   }
}

This will clean up unwanted javascript in your source. You can locate more scripts in your theme that have been enqueued. En-queued script looks like:

wp_enqueue_script( 'jquery.flexslider' );

You can also conditionally exclude any plugin’s en-queued script also by the above method. Not all the plugins and themes follow best practices (like en-queuing the scripts) and you might not be able to achieve this everywhere.

Loading stylesheet files selectively

Stylesheets can be avoided from loading in a pretty similar manner. Locate the enqueuing code in your theme or plugin. It should look something like:

wp_enqueue_style('wp-pagenavi', get_stylesheet_directory_uri().'/pagenavi-css.css', false, '2.50', 'all');

Once you have located this code, copy the script name, 'wp-pagenavi' in this case, and add the following code into your function file:

add_action( 'wp_print_styles', 'deregister_unnecessary_styles', 100 );

function deregister_unnecessary_styles() {
   if ( !is_page('contact') ) {
	wp_deregister_style( 'wp-pagenavi' );
   }
}

You can also use the function is_page() to exclude any stylesheet or script from a particular page as shown below:


	

If you exclude a script you might, in some cases, notice some errors in your js console. You might need to exclude this code from being executed on this page. If not done properly this might lead up to some functionality problems hence I would recommend excluding javascript files only if you are absolutely sure of what you are doing.

Feel free to share your experiences in the comments section below.

The following two tabs change content below.

Subscribe to the Tips & Tricks newsletter and get the best of our tricks in your inbox every month.

One Comment


  • Fatal error: Uncaught Error: Call to undefined function ereg() in /home1/vikas/public_html/howtomakewebsite.ws/wp-content/themes/ws/functions.php:1009 Stack trace: #0 /home1/vikas/public_html/howtomakewebsite.ws/wp-content/themes/ws/functions.php(1036): justlanded_commenter_link() #1 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-walker-comment.php(180): justlanded_custom_comments(Object(WP_Comment), Array, 1) #2 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-wp-walker.php(146): Walker_Comment->start_el('', Object(WP_Comment), 1, Array) #3 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-walker-comment.php(140): Walker->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #4 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/class-wp-walker.php(371): Walker_Comment->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #5 /home1/vikas/public_html/howtomakewebsite.ws/wp-includes/comment-template.php(2096): Walker->paged_walk(Array, '5', 0, 0, Array) #6 /h in /home1/vikas/public_html/howtomakewebsite.ws/wp-content/themes/ws/functions.php on line 1009