So my site went from 20 hits a day to about 100-200 hits and to a few thousand altogether per month which is great but my WP install suffers. Right now, I am using JustHost hosting which costs me $3-4 a month and is pretty rad with its features for a shared hosting but it has limits (which is okay for the price). So you gotta work within the limits until you upgrade. Here are some great tips on what you can do, what you can setup and monitor and make stuff work FOR you.
Let’s Measure Stuff
Okay, first of all, let’s track our progress and our work because without that, we’ll be pretty lost. We’ll measure our plugin performance, figure out what’s eating away at our runtime, run overall tests from different servers and finally, move onto treating the problem.
P3 Plugin Profiler
This little neat (free) plugin tests your plugin performance and how much it impacts your load time. Basically, it will load up your homepage (or whatever other page) and see how long each plugin takes to run and then it’ll tell you what the biggest issues are.
This is what your test results (may) look like. You can see the biggest problems, check out different breakdowns and statistics to help you along. So with this in mind, let’s see what kills MY system and what we can do about it. So while it’s pretty optimized already, it’s not perfect. Here are the metrics we care about:
- Plugin Load Time
- Biggest Wedges in the graph
- Detailed Timeline
Note: If you look under detailed breakdown you may see admin-side-only plugins being run. I got some common ones such as Akismet, GMetrix, MU-specific plugins, administration plugins, P3 itself, theme check and so on.
The plugin load time isn’t that bad by itself, with only 1/2 a second running, you can be damn sure you’re much better than most WP installs. The biggest hogs, for me, seem to be Jetpack, Advanced Custom Fields, Contact Form 7, and “other” (which includes the admin plugins as well). So what’s Jetpack actually doing that takes up so much time? Not sure, I don’t really use JetPack for much, basically only for spelling and grammar, extra sidebar widgets, and enhanced gravatar. Hardly tasks that should take long.
Next up is Advanced Custom Fields. I’m not sure if the merit of using this plugin is worth it. I only use it to load my slider (and portfolio in the future). Perhaps a selective page usage is in order for this one, or completely eliminating them and using straight up Custom Fields built into WP.
The general idea here is to identify which plugins you don’t really use, what plugins may be substituted with something else, and make decisions on what’s worth it and what’s not. For example, I had WP-Typography installed and it added a whole second to load time. I only used the plugin to hyphenate my text. Was it worth it? Obviously not. I also had several plugins I was no longer using still running.
P3 saves your scans so you can go back in history. Don’t make any changes yet!
Similar to P3, GTMetrix checks not only your load time but also other extraneous variables that affect load time including GZipping, image compression and so on. It uses YSlow and its own metrics to do this. Install the plugin, register at the site, and run it. The registration will allow you to 20 tests a day, plenty for these purposes. The plugin also allows you to run the tests on individual pages. I suggest you run on it on your home page, blog page, and a sample blog post to figure out the performance. Most of the time, images will be the only thing affecting the load time difference but just check it to make sure. Also, you can test your load time from different servers. I get most of my visitors from India, Canada, US, and UK so this is perfect. Here are my results:
Really great. Here’s what I started with:
So don’t feel bad if you get an “F” on these or if stuff happens. The worse off you are now, the bigger the difference you’ll see. GTmetrix also saves your reports so you can back up and see your progress. Click on detailed report and check this out:
The coolest thing in these reports is that you can go step-by-step and fix these issues. The ones on my site (this is an old report) are honestly some of the more common ones and as you could see in my final report I went from D/C to A/B. Here’s what to watch out for then:
- GZip (even big sites forget this one! and it’s so important!)
- minifying! both CSS AND JS
- specifying image
- efficient CSS selector use
- Inline CSS
- bad requests (getting 404s for missing images/files)
- usage of @import
- Expires headers (for caching)
- use of CDN (this one is voluntary! I don’t have cash for using CDN so I’m fine with failing that one)
- number of HTTP requests (this is a big one, as you can see, I made 40 requests in the failing one. In my optimized version, I made 25!)
- duplicate JS and CSS (common in WP I’d say)
Let’s FIX Stuff
Phew. Okay, now we know where we’re standing. We’ve identified that we have some inefficient plugins, some plugins we don’t use. We’ve found out that we don’t cache anything, don’t minify, make a ton of requests and so on. So what do we do about it? We install MOAR plugins! Jk. No, actually, that’s part of our process.
We now know that we have some bad plugins clogging our site up. In my first run of P3 (not shown), wp-typography took 3-4 times as long as Jetpack does right now. It literally added a second, a whole second.
Another way of dealing with this is substituting plugins. For example, Contact Form 7 eats up some space (it’s called up on every page on my site so that’s important), so perhaps testing for a slimmer plugin is in place. Jetpack has form functionality so combining the two may be the best method. Jetpack has fancy gravatars so that makes me think, is there a specific gravatar plugin? Perhaps. Advanced Custom Fields can be substituted with regular custom fields with perhaps an admin-side plugin for WYSIWYG functionality on fields. See the pattern?
Some of the issues arise from coding problems.
- image dimensions. It’s easy to specify html sizes and WordPress does it even automatically so anything you hard-code needs to be scrutinized.
- CSS selectors. Read about optimizing browser rendering to figure out how to improve performance here. Also, read up on the dangers of using CSS preprocessors, it basically discuss “over-specifying” via CSS
- minify. I’ll discuss a different way of minifying in the next section but it’s prudent to have minified CSS at all times. Preprocessors allow minifying on the go.
W3 Total Cache Plugin
This is the single most powerful plugin for caching out there. GTmetrix has a great article on how to set it up. The only thing I’d suggest is to make sure you have CSS and JS minification turned on. The plugin will essentially cache everything possible on your site, set expire headers, and all kinds of things so that once a user makes it to your site, they will not have to reload everything each time. It will also allow you to minimize your usage of MySQL and PHP. Think of it this way, you ask someone the same question 20 times and you’ll get the same answer 20 times so the plugin stores the first answer and keeps it ready to answer for you. You create the answer. Once you change your answer, you let the plugin now (by flushing cache) that the answer has changed and so the plugin asks you once what the answer is and you answer, and then it will store that answer. I hope that makes sense.
Note: I’ve had some trouble with W3TC before where it would break my site, not load CSS and so on but these settings have done me well and allow me to receive a large amount of traffic without substantial performance loss.
Another Note: You can’t use Disqus with W3TC without a few work-arounds and hacks, hence my discontinued usage of it.
Another suggestion by GTmetrix, this plugin compresses your image for the web in such a fashion that you have low-Kb files with good resolution and quality. Try it out!
Note: After some digging I found out that the service works only sporadically and has a lot of issues :/ how unfortunate.
There are other things you can do to improve performance from paid to free solutions. One solution that I would suggest (and that integrates with W3 Total Cache) is using Cloudflare. Cloudflare is a management suite of sorts that will do all kinds of caching for you and provide you with web security. What it will also do is store those cached files into a CDN (remember YSlow triggering an F for that?) which makes the content available from several different servers at once. It also allows “app installing” which are basically some DNS-level apps that interact with your site. These can inject Google Analytics automatically, pieces of code, affiliate links, and so on. Be cautious though, my hosting did not like Cloudflare for some reason so the site went down several times for no reason. I went off it but I might try again soon. And write an article about it 😉
CDN for common resources / Outsourcing hosting
Okay, there IS some stuff that you CAN throw on a CDN and work off it. It will make a marginal difference that can save your site from a barrage of traffic. This includes:
- Loading jQuery from a CDN with a local fallback in case google decides to pull it one day 😉 (basically add a snippet to functions.php)
- Host your icons on a CDN such as Icons by Dustball and IconFinder (who said it’s okay to hotlink to them).
- Image and video hosting can be outsourced, too. You can use flickr, bitbucket or whomever for photo hosting and youtube for video hosting (which is what a lot of people do anyways)
Track Your Progress
One other way to track progress is via google analytics and how your site does under a load. Remember, your hosting DOES have limits and what you’re trying to do is make those limits do as much work for you as possible. Here’s how my server handled the load (hint: badly :/ ):
Okay, see those metrics? Crazy stuff. It looks confusing but it’s actually pretty interesting. First of all, I do run on a shared hosting for $3/month 😉 (well $6-8 since the special ran out) but here’s what happened:
- the flat-lines are 0 or near 0 values for page load. Sweet
- the peaks are way too high. The highest was 75 second load time. I have no idea who waited around that long. This was at peak traffic when I got about 1K visitors and a complete lock-down with an article that had many images. This is hitting a near-hard limit. There were a few things I could have done to improve this situation (load images from Flickr!)
- the page DOWNLOAD time never went above a few seconds
- the server response time maxed out at 3 seconds.
- the page LOAD is the highest of them all and the biggest pain in the ass BUT, it was affected only when a few hundred people hit the site at the same time. This was to be considered.
I hope this works out for you guys. I decided to take some of my own advice and host the images on flickr (per guidelines, they link back to flickr) and jQuery is CDN loaded. Let’s see how this goes! 🙂 I’d love to hear tips and stories and whatever else. I will definitely publish them in the next iteration of things!
I update this portion of this post whenever I switch hosts
I currently use stablehost and it does me well. I did encounter some outtage time but that was because of some bad hardware and stablehost support switched me very quickly. It’s by far the cheapest and best host I have ever used. Use my coupon code to get 50% off: