One of the most popular suggestions for improving website performance that I often see in the WordPress world goes something like this:
Enqueue only the CSS and Javascript necessary for the particular post or page. For example, load styles for a contact form or a shortcode only on the page where it is being displayed.
Don’t do that! The rendering performance depends more on the number of requests than the transfer size of each request. It is much faster to load just one CSS file and one Javascript file with everything that your website will ever need since all the subsequent requests will be retrieved from the browser cache. Most of the WordPress caching plugins out there already provide this feature so just go ahead and use it.
Also pay close attention to the caching headers of your resources! The best approach we came up at our work was to:
1. Set the “Expires” header to something far in the future (say, a year);
2. To the URL of the resource append a timestamp parameter, like “something.css?ts=123456789”, where the timestamp is the last change time of the resource.
The webserver will ignore the timestamp parameter, but the browser will cache the resource with it and not request it again. When the resource changes, the timestamp will change too and the browser will request the resource anew.
Of course, adding this to an existing system can be difficult, depending on how many places you need to change.
This is often true, but not always.
If 99.99% of your traffic only hits your home page, but 90% of your CSS and JS is for your other pages, then you wouldn’t want to load all that extra stuff on your home page as it would just slow things down for 99.99% of your site visitors.
My gut feeling is that 90% of WordPress sites use only 10% of what jQuery includes and provides. Traffic is simply so much “cheaper” than the number of requests so we don’t bother.
And cases like you mentioned do exist but I feel they are more of an exception.
It probably is an exception, but people often take advice like this too literally and don’t take edge cases into account.
Exactly! And that is why I always appreciate your comments!
I guess it depends on the context.
I agree with you if you are building a custom site and have control of everything. In most cases (nod to Ryan’s point), just add the CSS / JavaScript into the main combined files.
However, I’ve mostly seen the ‘only load when necessary’ advice in the context of writing plugins (that will be distributed). In that use case, I think it’s solid. There is no way you can know whether the user will be using a caching plugin or some other solution that combines files.
If I am writing a plugin that needs to add one CSS file and one JS file on a single page, then why enqueue those files on every page of the site and hope a caching plugin will take care of them. Just add them to that single page. Worst case: One page gets 2 extra HTTP requests, the rest of the site is untouched.
If I enqueue them on every page, then the worst case: is 2 extra HTTP requests on every page of the site!
That is definitely true, especially for plugins that add things in the backend — we would never want to load anything widget specific on all other admin pages, for example. However, WordPress does concatenate all scripts (but not styles) in the backend by default.
The issue with loading assets conditionally on the front-end is that it’s very hard to determine reliably when the assets are really necessary. Detecting shortcodes might work only for scripts since they can be enqueued in the footer while CSS must be in the
<head>.