How to Actually Improve Your WordPress Speed
Everyone wants a faster website. Whether it’s due to their own impatience and need for perfection, or wanting to keep the Google gods happy, we’re all looking for those secrets to improving page load time. If you’re just beginning your quest in faster website speed, I’ll forewarn you right now, that you will go absolutely nuts trying to appease the score keepers. Even the strongest of will have been known to break. They’re harsh, and every millisecond counts.
Alternatively, if you’ve been researching faster site speeds for a while now? I might not actually tell you anything new. I can all but hope I do, but there’s a chance you’ll have heard all of this before. The trick for you, one that took me a long time to grasp with myself, is actually heeding this advice and finally make your site better for everyone involved.
Why Do I Need a Faster Website?
We’re inundated by reminders that the younger the generation, the less of an attention span they have, and we need to accommodate that notion to compete in the ever expanding archive of webpages through Google, Bing, Yahoo, etc.
In order to keep those ever demanding demographics on our sites, our pages have to load as fast as possible to keep their attention or they’ll bounce and move on to a site that can provide the quick fix they’re looking for in half the time you can provide.
What Problems You’ll Probably Be Told To Fix
There are a number of speed test sites out there that can give you a general sense of what’s wrong with your page, and the majority of their answers will be confusing if web development isn’t your bag.
Without even looking at your site, I can foretell that testers like Pingdom are going to flip its shit over the size of your images, and how many JavaScript and CSS files your site calls before it has a chance to even partially load your page.
If you run an ad network? It will absolutely take offense to how many redirects your site is producing.
You Were Maybe Told Once That You Should Only Have One <HTML> in a Webpage Document? Well, You Might Have Four <HTML> Tags Right Now Without Knowing It.
If you’ve ever taken a basic course on website development, you learn that a webpage begins with <HTML> and ends with </HTML>.
Here’s the kicker though. You know those ad boxes we use to generate some income to keep our sites running? Essentially, you should start imagining each one is a little iframe, showcasing another website.
It might look like an innocent image, but check out the massive amount of code below that is rendered for one simple ad. See the <!DOCTYPE html><html><head>… near the middle of the image below? These ad scripts are honestly designed as separate webpage entities, and the code each one produces can be massive.
If you have three ads on your site (box, leaderboard, and skyscraper for instance,) you have four separate HTML documents loading at once upon each refresh of your webpage.
I’m not stating you should get rid of ads, I doubt I will ever get rid of all of mine, but just realize you have to have less of something else in order to balance their effects on your site. One ad can call numerous different JavaScript files, and the speed counters keep track of every single one.
Which Speed Testing Sites to Use to Grade Your Site
There are a number of speed test sites out there, and none of them are perfect. The industry standards are GT Metrix, and Pingdom. There is conflict on whether Google PageSpeed Insights is relevant to overall site score, some suggest that the test markers are buggy, but it’s made by Google. Assume that Google uses something similar for internally ranking pages for their search engine.
Six Ways to Improve the Speed of Your Site
Without having access to costly frameworks, such as those running Facebook’s mobile platform, we have to find a middle ground between what we want to share on our websites, and what will lag the loading time considerably. So here are six ways to improve the speed of your site, without going absolutely mad.
Fully drop or change to better plugins.
Your goal is to reduce how many JavaScript calls your website makes. A single plugin could have zero javascript files loading on the front end, or it could have two or more. If it’s a heavy player on your site’s activity, chances are it has a few JavaScript files loading each time.
As an aside, I’m not sure who to thank, but someone, somewhere, convinced a ton of WordPress site owners that they should have no more than 15 plugins installed. That virtually installing any more plugins than this and you risk irreparably damaging your site. This? This is what bullshit looks like. You are welcome to have as many plugins as you very well please. Some of the most well respected sites online have 60+ plugins running, but there is a but to this sentiment.
What you have to take note of when deciding which (and how many) plugins you use, is whether they play well with your WordPress installation, and/or your server.
Plugins I’ve Changed or Dropped
One of the heaviest plugins that had affected the speed of my site was Shareaholic, and I dropped it like the hot mess it was for the much faster Social Warfare plugin.
Where Shareaholic would call and load the share count for each post, each and every time the post would load/refresh, Social Warfare runs by cache, which means it waits about an hour before it searches for new entries to count as part of the share total. I found that I didn’t need to know right away how many times a post was shared, and could live with an hour gap.
By taking on Social Warfare, I also wound up with a whole slew of other useful social sharing tools, that meant I could delete other plugins as well, including Click to Tweet, and even set a Pinterest specific image without having to add it directly to the post (click the Pinterest share button at the bottom of this screen to see what I mean. That Pinterest image doesn’t show up anywhere on this post.)
Check out what cool features you can get with Social Warfare, and do so quickly, ’cause if you’re interested in this plugin, the price is going up soon!
Another plugin I had dropped to improve speed was Jetpack. I haven’t used this plugin in years, and despite feeling antsy at first for even thinking of getting rid of this plugin, I found my site is all the better for it now. Alternatively, Yoast SEO is a heavy plugin as well, but there is NO way I’m giving that one up.
Consider dropping any plugin that displays any of your social network feeds. As much as I liked the idea of showcasing Instagram in my sidebar, the calls for so many tiny images wasn’t worth the compromised speed. There is also other complications with nonexistent image cache lengths for those tiny pictures, which is a speed penalty. And honestly, how many times do you read through a social feed found in the sidebar of any of the blogs you read? Sure, it looks pretty, but it’s not as functional as you might think.
If you want to showcase your social networking genius, you’re better off selecting a chosen few of your favourite posts/images and manually adding them into a text widget. This way, you can choose exactly which entries are viewed on your site anyway, and you’re not bulking up your page’s load time with numerous JavaScript and CSS calls.
How Do You Decide Which Plugin to Change/Drop?
A basic rule of thumb is decide whether a plugin is there simply for convenience, and whether or not you can get the same job done without it. For instance, I currently have the Simple Social Icons plugin installed that showcases all the social networks I belong to in a simple line at the top of Geek with Style’s sidebar. Check out all the files this one plugin has to simply load a set of icons at the top of my site’s sidebar for every page.
While it does make my life easier, not having to hand code a bunch of social icons with links, is it really worth having all these files loading when I can do the same thing with just a little bit of code? I have Font Awesome icons already installed on my site, so it’s not like I have to search hard for icon replacements. See what I mean? – it honestly took about a minute for me to add and link up those icons together. So why should I have a plugin take up valuable time and space to do the same thing?
It’s an easy bet that I’m going to remove this plugin, and add my social network links by hand, the moment I have a chance to.
Use a cache plugin to limit bandwidth use and downloads.
Cache plugins are helpful, by ensuring your readers aren’t downloading the same content over and over when they view your site. You might not realize this, but each time a person views your site, their computer/smartphone is passively downloading all the images and styles that show up in the browser (into a temp folder that they’ll never see.) A cache plugin tells the user’s browser cache folder to hold onto your image files, such as your site logo, for a little while longer (up to indefinitely,) instead of deleting it right away. This way, your repeat audience doesn’t have to wait for their browser to download your logo again to view your site, since it’s already in their cache and can be called to view instantly. Not having to continuously download website images equates to a faster loading website.
You do have to be careful with cache plugins though. As much as they’re a beneficial plugin, its just as easy to cause issues with your site if not activated properly. They affect how your site runs, including possibly adding information to your .htaccess files, and minifying/asyncing your javascript and css files.
If you’re not comfortable with cache plugins, consider hiring someone who is for a couple of hours.
Some of the top WordPress cache plugins incude:
Reduce image sizes.
There is a plugin for this as well, EWWW Image Optimizer, but if you have the right tools, such as FastStone Photoresizer, Photoshop, or PicMonkey, simply make sure to reduce the file size of any image before you upload them to your website. If your image’s size is currently 2.5MBs? You’ll want to reduce the file size, to somewhere around 85Kbs, if you can do so without losing too much quality in the image.
The reduced image size is helpful in a variety of ways, including:
- You’re not eating up your audience’s bandwidth, which could be capped, especially if you have a dominant Canadian audience.
- Google will like you better, since your site loads faster with smaller image file sizes, since it all adds up in the end. The less bytes a website has to load altogether, which includes each and every image (yep, even your site’s logo and theme files,) the faster it is.
Minify your stylesheet.
You might not be familiar with your website’s style.css file, but its the main driving force behind the look of your site. This bit of text you’re reading right now? The font, size and colour were all dictated by Geek with Style’s style.css file. Here’s the kicker. Site speed testers has some sort of personal offense to every single bit of blank space that is not taken up by true CSS3 code in a stylesheet.
This is generally what a bit of your stylesheet will look like “out of box”. Notice how your stylesheet will have helpful text (green coloured text,) and lay out each tag in a way that is easy to read and adjust.
And this is what speed testers, and ultimately Google thinks it should look like to optimize the load time of your site.
What the whut, right?
Will this improve the speed of your site? Probably a little bit, possibly enough to get the speed tester off your back and give you at least a C grade. If your stylesheet doesn’t have to render informational text, such as /* DON’T DELETE THIS BIT OF CODE HERE, YOUR HEADINGS HAVE TO BE FUCHSIA. */ before it reads h1, h2{color:#FF0080;} every single time someone loads your page, then you’re not wasting the browser’s time rendering stuff it can’t read.
You’re also not wasting your reader’s time by having their browser render useless text that is only there for your benefit alone.
So how do you minify your stylesheet?
- Go to Appearance > Editor, and copy and paste the style.css file onto your computer’s hard drive, in case you make an error.
- Second, go to this site, paste that same style.css code and let it minify the heck out of your stylesheet.
- Once you’ve minified your style.css file, go back to your Editor, and scroll to just under the header information of your stylesheet. Delete everything but the header information from your style.css file, and then paste the minified code in it’s place, below the header (I honestly can’t stress that enough.)
PLEASE NOTE: The style.css is the backbone of your theme. It gives certain information your site needs for your design to work, so you’ll need to keep the header information in your file exactly as it is or your theme will break until you fix it. Again, make sure you save a copy of this file on your computer in case an error was made in the process.
Consider changing your theme altogether.
There’s always a chance that the theme you have installed is slowing down your site.
Themes look a lot alike. If one theme isn’t working properly for you, find a similar one that will. I’m not suggesting all free themes are bad, but there is some tangible benefits to purchasing a theme that has nothing to do with its frontend design.
Find themes that discuss their load time, and you’ll be dealing with a designer that is cognizant to your sites overall performance.
Consider changing your host, or upgrading to a VPS.
The lag time might not be you. As someone who pays over $100 a month for a VPS (that I do share with a few friends and clients to limit my costs,) I absolutely get the draw of paying only $5/month for a shared server that looks like it has all the bells and whistles you need. But, chances are that if you’re reading this post, you’ve outgrown the shared space.
University dorm rooms are fun the first couple of years, but you begin to realize how great it would be to rent a place of your own for the remainder of your education, just so you’ll never have to see another sock on a door again. Shared server space is much the same deal. The hosts aren’t kidding about sharing space, and what limitations they have for speed. You may never meet your server neighbours ever, but if they happen to be having a wild party on their site, it can easily affect the speed on yours.
Whew, that’s a lot to take in right?
If you’re truly concerned with the speed of your website, research these answers above and make them work for you.
If web maintenance and design isn’t your strongest skill-set then maybe hire someone for a couple of hours to implement these changes, and/or make suggestions on the plugins you’re using.
If you have any questions, especially if what I wrote above is too confusing, give me a shout in the comments below!
Increasing Pageviews, Here’s How to Get Better At It
How to Get Your Site’s Logo on Absolutely Everything with New Favicon Code
Best Way to Watermark Photos for Your Blog
About Author
