Help Wordpress

Blog about WordPress, plugins, themplates and more…
MENU
Home » Tutorials » Use JS/CSS only where necessary

Use JS/CSS only where necessary

contact-form-js
Use JS/CSS only where necessary
5 (100%) 1 vote

One of the methods of speeding up the speed of downloading WordPress sites – it is use additional external JS/CSS files only where necessary.
I wrote about this 2 years ago, but judging by the sites that I was asked to optimize, the problem is still actuallity.
Today I want to tell you why load external JS and CSS files on all pages – it is bad, and also give a simple example.

In practice, very often plugins are used for certain specific pages, posts or categories.
For example, the contact form (feedback) needed on the contact page only, for other pages it is not needed. Or sliders and carousels – they are used only on the main page of the site or for a rubrics. Or galleries – they are used only for certain types of posts.

If you use the popular plugin Contact Form 7, I suggest you do a little experiment and you’ll see everything yourself.
1 – Open any page of your site, except the page with the contact form (feedback).
2 – Switch to html mode (Ctrl + U in Firefox or Google Chrome).
3 – Enable search mode (Ctrl + F) and enter “contact-form-7” in the search field.
Have you found the result? The file is not used, but it is connected. And if you have 10 unused files? Or 20?

Most plugins enqueue external JS and CSS files using the wp_enqueue_script function:

wp_enqueue_script ('plugin_script', plugins_url ('/assets/js/script.js', __FILE__), array ('jquery'), '1.0.1', true);

Everything is fine, everything works, does it really need something else?
Yes need. The plugin author does not know on which page his plugin will be used, so he does so that the plugin works everywhere, on all pages.
But we know. Therefore, we can use additional check and enqueue files only where necessary.

Let’s do it on the example of Contact Form 7. I do not like hardcode, so I will not modify the plugin myself and will add a check in the functions.php of the current theme.

function wa_contact_form_javascript () {
	if ( !is_page ('contact') ) {
		wp_deregister_script ( 'contact-form-7' );
	}
}
add_action ( 'wp_print_scripts', 'wa_contact_form_javascript', 999 );

Instead of “contact”, specify permalink or ID of your page with contacts. For CSS, use wp_deregister_style and wp_print_styles, respectively.
As you can see, everything is quite simple, but if you have any questions – welcome to comments.

Posted 3 weeks ago
Category: Tutorials
Tags: ,

If the article proved helpful to you, please click on one of the buttons to share it with your friends. Thanks!

Related posts:

slon-example

SLON Example

SLON Example Reconnecting JavaScript leads to its re-execution, i.e. issue of the site productivity. Also, this can lead to unpleasant side effects – for example, if a given [...]
slon

Enqueue scripts in WP plugins. Single Load Only.

Enqueue scripts in WP plugins. Single Load Only. In this post I want discuss one of the problems with WordPress plugins/themes – reconnecting javascript. Connecting the script several [...]
bg-head-640

WordPress PageSpeed optimization

WordPress PageSpeed optimization Quite often turn to me with a request to “speed up site” – say, Google shows 50 out of 100, and because of this the [...]

No Comments

No comments yet.

RSS feed for comments on this post.

Leave a comment


Last Polls: