One of the things that’s been bugging me the last few months as I’ve taken on “real” projects with WordPress has been consistently striving to increase page load speed. I’ve run the gamut of learning about the caching plugins (and other related tweaks), optimizing images, you name it. But on the latest project, this one has really taken it out of control.
For the most part, the WordPress ecosystem is great for your “casual blogger” and you can build a pretty powerful site with the many free plugins available. But, sometimes, you have to go beyond the free sphere and get into premium plugins. The most popular/well-known is Gravity Forms. But there’s a lot of others out there too. Many of them are what’s considered “freemium” – they have a basic plugin for free, but you have to upgrade to get more features. Which, if it’s a good plugin, it’s money well spent.
But what’s irking me in the last 48 hours has been trying to optimize the site and reduce the number of external scripts and style calls made on the home page. The home page is the most critical of any site. If it doesn’t load fast, the “bounce rate” tends to go up. Which is never good.
All in all, before I started working on getting the optimizations going, I was sending over 70 HTTP requests to load the home page. That’s a lot. It also doesn’t help that the server/hosting isn’t mine and it doesn’t have HTTP KeepAlive enabled, but that’s another story.
The main culprits to my script dilemma –
- Automattic’s Jetpack
- Connections
- WP Events Planner
- Wysija
Those 4 plugins were loading unneeded scripts on the front page. The sad thing is, Wysija & WP Events Planner are “freemium” plugins. I’ve currently paid for WP Events Planner, and once we get the newsletter system fully running, I’ll pay for Wysija as well. Jetpack is professional in the sense that it’s maintained and released by the Automattic team. Even Connections follows the freemium model.
Really, what it boils down to is that I’m disappointed that none of these plugins does a conditional loading of the scripts. They just load them up without regard to the need for them.
- Wysija – this one is easy enough, as 95% of it is back-end anyways. It loads jQuery validation JS and CSS. But it’s only needed for the widget and/or signup page. Wouldn’t using the new “has_shortcode” or “is_widget_actve” help here?
- Connections – this one requires a shortcode placed on a page (or post, I think) to display data. Again, using the “has_shortcode” tag would be appropriate. At the very least, using a “is_page” or something in the options would be preferable.
- Jetpack – this one bugs me most of all. You tell it that you don’t want to display “likes” on the home page. What does it do? It still queues up the scripts and CSS, despite the code never being injected into the template! Add to that the fact that neither of those things want to seem to cache, so it has to reload them on each page view! Nevermind that if you want to use jetpack for comments, it still loads “postmessage.js” even when comments aren’t open.
- WP Events Planner – this one’s just ugly. It loads an unbelievable number of scripts and CSS and is by far, the biggest offender on this one site. By my count, it loads 20 different CSS or JS files. Some of it seems could be accomplished with “has_shortcode” type of conditionals. Others is just a matter of cleaning up/consolidating the CSS into one file. Minifying the CSS and JS would be nice as well!
I get that the new has_shortcode was just released in 3.6 and some of these folks have bigger fish to fry than using a brand new code within a few weeks of a major core release, but there are plenty of other conditionals you could use!
So, after doing some quick functioning, I’m now down to 45 HTTP requests on load. It seems to have cut about 10-15% off the load time (my readings are all over the place from a 600ms load time up to a 2.5s load time). I could cut a couple of my tracking scripts out, which would help as well. The next thing I’m going to attack though, is “sprite-ing” my images like the buttons for facebook, twitter, etc. That will shave another 5-6 requests and should take me under 40 requests. I’m also debating if I just want to universally unload their JS and combine it into JS that I’m already loading, but I’m not sure if I want to go down that road.
Bottom-line – PLEASE plugin authors – in today’s day and age of page load mattering more and more, use more conditional loading in your plugins! Not all end-users of your plugins might be theme authors/developers!