You all must know me by now. I am always nagging you about code efficiency, using minimum plugins and other improvement tactics. The past couple of days there has been some interesting conversation and feedback on Kim’s blog, on the post she made a few months back asking for plugin ideas for me to code. From there the idea for the YAFootnotes and My Tag Cloud plugins have been given plus some valuable feedback. Now, there is another conversation started from a user, Richard. My reply to all his valuable feedback would a) be too long for a comment and b) illustrates what i think might help some other people too. So, i decided to go on with this blog post. Enough with the chit chat, let’s see what he says.
I will take it one at a time. Essentially what he suggests is this:
what I really need is a plugin that selectively loads javascripts and style sheets of other plugins on a page by page basis. WordPress carries around SOOOO much dead weight in scripts that load globally and are used on maybe just 1 or 2 pages on the site.
He carries on with a design suggestion. No what he says is not wrong. WordPress does carry around many scripts that it doesn’t need and many plugins only make it worst. Here is how it works. A plugin needs some sort of Javascript and a style, maybe, to be loaded. So, upon call, it enqueues his scripts and styles for sending back to the client and then it decides whether or not to run. Let’s see a quick example. For instance, a plugin could be searching for a special tag on a page. If it finds it then some special magic happens and replaces it with the actual content. Take an image gallery. You place a special tag on the gallery page, that when the plugin runs identifies it, and then starts creating it’s output (pulling out the albums for the database, creating tables etc). But what happens when the user visits the homepage where there is no gallery what so ever? Well, the plugins style and scripts are loaded anyway. One would say “heck those are 20-50Kb scripts and styles, let it load, whatever!”. But think about having four or five plugins doing the same thing. As Richard rightfully claims:
On one of my sites, I realized I was loading different versions of jquery from different plugins on every page amounting to some 200kb of totally wasted overhead.
Here there was something even worst happening. The plugin authors were loading a jQuery copy of their own, a library that WordPress loads by default! He was absolutely right to be frustrated. So, by now you are totally seeing where he is coming from. But let me tell you, i think we need to take this a little deeper.
First of all, those 200Kb he is claiming to be loaded each time, although wasted most of the time, they are not loaded all the time! Yes, if you make 10 clicks on his site, from his homepage, to an article, to a page, to another article etc those 200Kb will be sent your way only once. And that is because all modern browsers know about caching. Before loading anything, they send to the web server what is called a “HEAD” command. Essentially, what they do is, they check out if the local copy they have has changed, if not, they won’t request it again. I agree that 200Kb are wasted but that’s a small price to pay having all this functionality added to your site (for free if i might add).
One more juicy part is the average blog user. Now, i know many of my readers are passionate bloggers that know little on coding. That is something that happens with most of the bloggers out there. Imagine having a blogger write a page and having to decide which scripts or styles should he load or not. He has absolutely no idea what a script is, let alone decide if he wants to load it or not. I know Richard is talking about a plugin here, which means that it won’t be for the average user, but there was also a talk about expanding the functionality over to WordPress itself. That, in my humble opinion, wouldn’t work.
As a plugin, it could be coded, but, i think wouldn’t save you from much trouble. And here is why. Here is a final point, my major point. In a few words, if you have plugins loading as much as 200Kb of extra scripts, you should really, and i mean really, consider if you need all those. My bet would be on the amount of the plugins rather than poor coding itself. Yes, they are poorly coded but, can you stop using any plugin? The delay won’t be on downloading those extra kilobytes, it will be on extra processing time the script will need to create it’s output. Even if it doesn’t need to do anything at all, just by stopping execution of the platform (in our case WordPress) and calling a plugin function is enough. I know you might think i am exaggerating at this point but, believe me, too many plugins can slow you down sufficiently enough to notice, even if they do absolutely nothing.
All in all, Richard has a strong point, poor coding should be avoided, but, user discretion is required too. Consider very well the fact of installing a plugin before you go on and do it. Just because it’s easy to do it, doesn’t mean it is recommended.
As for a response to my friend Richard, you have a point but coding a plugin and adding more burdain to your blog is not the option in my oppinion.
So you are basically saying don’t install so many plugins and that the browser takes care of a lot of the overhead? And that the functionality that Richard is asking for is beyond the basic user’s ability to use anyway?
I was surprised you didn’t mention code based solutions like the one you use for your social media icons …
How many plugins do you have installed? Any? 😛
@Kim: Well, you summarized the post in two lines Kim 😉 I am saying that an average user even if he did have the opportunity to fine tune those things he would be swamped up. Secondly, yes, the browser is taking care of the overhead. I am now saying it’s not a waste. It is. But it’s mostly server side. So, webmasters problem. And it all comes down to wisely decide which plugins and how many of them you install.
As for the code based solutions, i would have mentioned it but it’s kind of beyond scope here.
As for my plugins. Well, i have 13 currently installed, the most essential ones (caching, SEO, code highlighter and a few others). Still i believe i have a lot installed 😉
I have 25 and they are all being used. I definitely think it’s too many but I haven’t spent the time yet to work on alternative solutions.
@Kim: Well, there is one more thing i always say “if it’s working let it be”! So, if it is working for you, so much the better. Let it be as it is. No need for alternatives although you might see some improvement on the loading time…
Well, I enjoy breaking things a little.
You should write an ebook called Stratos Says … on WordPress 😉
@Kim: I know i am paranoid with efficiency. Sometimes i even see that in my self :S I end up bugging other people, most of the times with no exact reason. It’s not only WordPress i am paranoid about, anything programming related i get like this. I guess you’ll be annoyed many times in the time to come 😛
You don’t annoy me 🙂 And I’m the same way about making backups – nag people about it all the time.
13 for Stratos, 25 for Kim and guess what it is 39 for me! See the trend? LOL! even though I agree plugins are burden, I haven’t been able to get rid of them. Somehow page load time is not a huge problem for me as such right now.
But yeah, loading multiple versions of jQuery is an issue 🙁
Hi Startos, many thanks for giving so much time and insight on this threaad. I’ll expand my thoughts a little:
1- I understand that the browser cache does take care of many of the overheads. However, that always relies on the first page load cacthing the scripts and caching them. As we all know the first page load is always the most important one, if the reader can’t see anything within 6 seconds or so, s/he often moves on frustrated. If those unwanted scripts are loading on the first page, especially if that is home page, we may have a problem. If we can get that first page loaded, I agree, caching will help a lot to overcome slow browsing thereafter.
2- Even when scripts are cached, there are still http requests. I have been making some observations in a very good series of articles on yahoo here http://developer.yahoo.com/performance/rules.html that suggests that “The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.”
3- After using wordpress exsclusively for some 3 years now. The one thing I have realised is that if you run wordpress out of the box, it sings beautifully. The problem starts when you expand the functionality with plugins. However, to get a site with a fair ammount of pazazz, you need a few extras. There is the crux of the problem, where to find the balance. The ordinary non-tech user can really get lost in trying out plugins and totally screw up the site, not only with performance issues, but also the rubbish often left behind in the options table… but that’s another matter.
4- Ok, so you think, there is no mileage in producing a scripts control plugin. Fair enough, but the problem remains wide open.
* Third party developers often code bad plugins that run high cpu processes.
* Third party developers are not using DEFER attribute and selective scripts loading
* There is often no check to see if scripts are already loaded to avoid duplications.
* Many plugin conflicts could be avoided if scripts were loaded more selectively
I guess these problems will be with us as long as wordpress uses the current archtichture. Having used several other CMS platforms in php and java aI can say there are much better ways to do things than throw everything into the head at once and let the client side suffer the load. Maybe moving towards wp 2.8 we will see some improvements.
I use some 15 plugins. I really want to cut it down but not able to do it.
Can we alter the loading of java Script in pages. For ex loadinf whole site first and then load the java script..??
@Richard: First of all thanks a lot for taking the time and effort to comment on this one (it must have taken ages to write in this tiny panel). Now to the point.
1. I will have to agree with you on that one. But, the essence of what i said in the post is that if you get to have that much overhead then probably you must think of reducing your plugins. And now that i’m thinking about it you can also search for alternatives on the plugins that cause the problem.
2. That is not totally true. Chrome for instance spawns a whole new process just to download and run scripts. On the other hand i will agree again. Too many requests = slow response times. Still, think about reducing your plugins 😉
3. WordPress get’s it’s power from the hundreds of the devoted fans and coders out there (and in here 😛 ). Having a fan code a plugin can give you power but there is a trade off. He is not that good so the product might not be as optimized as possible. That can cause problems on slowing the rendering time. But, in my opinion, that’s fair enough to have some extra needed functionality added. Some rubbish on the options table is nothing compared to the rubbish post revisions saved on the posts page.
4. All these problems rely on the expertise and code efficiency of the coder (that’s why i titled the post like this). If you enqueue the script with the right version WordPress will load it only once. But, if you go on and import your own one, or even worse (yes i’ve seen that) dump it within your code with a simple script tag then mayhem will erupt. But still, that is for the developer to decide and not the end user.
In my oppinion, wp_enqueue_script is fair enough. I don’t think there is a need to add more control since this would add a bigger burden on a platform that has to do too much already. I am sorry to sound so negative but this is how i see things as a developer right now….. Again thanks for commenting and leaving feedback for a valuable conversation
@PC: The loading of the components relies solely on the browser it’s self. The only way i can see us doing it is by creating a new small JS that will run on loading completion and then start loading the other JS with Ajax. Still, i don’t see that as a solution…. Thanks for dropping by!
Hi Stratos. Nice little discussion you are having here. As you know I was having some problems with some of my other blogs using too much CPU, and that has all been fixed, mainly by deleting a whole lot of plugins. The blogs load so much faster now but I do miss some of the plugins.
I’ve incorporated some of your ideas to speed my other blogs up, like the sociable links, and will come back regularly to see what else I can learn
@Sire: I am really glad it has been resolved now. I hope you get some ideas here to implement in order to get some more functionality 😉 Thanks for dropping by!
Thanks statos for your comment. I guess one of the best options is to try to entice developers to adsopt good code practices. Ideally we would see wordpress have some standards QA to qualify plugins as approved or not. That’s a whole other subjecyt, I know.
@ PC you may want to see http://wordpress.org/extend/plugins/footer-javascript/ which loads javascripts in the footer. Won’t work if the script uses document.write to insert part of the page’s content though.
@Richard: I think this is the best bet. Convincing coders to write efficiently. If i might add convince web masters to choose wisely 😉
I use about 15 different plugins, but I’m thinking about getting rid of a couple I don’t really use anymore, but never got around to removing them. I don’t know how you manage to use 25 plugins Kim, what kind of plugins are you using?
@Funny Stuff: Well it all depends on the functionality you want your blog to have. More complex things need more plugins. Plus, things like Sociable icons on the bottom, for a non techie one, need a plugin too… So, 25 is not recommended but definitely reachable….
Great thread. Different ideas just keep on coming. Thanks for being so informative on your posts!
—————————–
http://www.jsws.com.au/web-design
Code efficiency is especialy important when doing anything in JS. If it’s done the wrong way it can slow the wole browser down to the point that the visitors will never come back.
I got like 30 though of those only 3 are ‘functionality’ based and not SEO/Speed/Security Based.
Think i’ll have to hire you and Jeff sometime to make me a killer theme and optimize it!