Javascript and css can heavily impact your page load time and the ability of google bots to render your page. The consequence on your ranking might be heavy in case the page to be marked as not mobile friendly due to this rendering issue.
A solution is to reduce the number of css and js files your wordpress site loading.
As you have noticed, many plugins load their own css and js in order to perform their function and nicely display the output, which is perfectly legitimate, although it might not be desirable for a web designer concern with performance, as you ought to be ;)
I am pretty sure I don’t need to make the matter clear, as you are reading this article but just in case, let’s recall here that on top of impacting your SEO as stated above, there is a 5% drop in sales for each 0.1 sec of load time (I am not sure I state that correctly but you got the idea).
So, what the solution you may ask, rightfully, so let’s dig into that without any further delay.
The strategy we will explore here is to dequeue the plugin css and js and concatenate it to your theme js and cs
Dequeue a plugins javascript file or css stylesheet:
To dequeue the script you want to concatenate add the following code
in your theme functions.php :
add_action('wp_print_styles', 'deregister_styles', 100);
function deregister_styles() {
wp_deregister_style('name-of-style');
}
Merge Javascript and styling with your existing files
Locate the style or js you have deregistered and copy and paste it’s content in your theme css or js.
Test your site thoroughly to make sure there is no conflict. Paste the code in your stylesheet in the order they are loaded on your page. Once you are sure everything is displaying properly, you might merge the style rules and remove the duplicated one in case there are.
There are more advance technique to load css such as css preprocessing. which we will cover in further articles.
More info on this excellent article:
https://davidwalsh.name/remove-stylesheets
Tips:
In order to make sure you are removing the right css files from the queue, use the developper tool of your browser and inspect the element related to your plugin, you will which css rules affect them and from what file they come from. Once you have noted the name of the css file you know which one you need to copy to your own css rules and remove from the queue.