If your website is slow-loading, then you’re losing visitors hand over fist. What many website owners don’t realize is that even though WordPress has created a revolution in DIY websites, they don’t do much to prevent unsuspecting newbies from creating sites that load like it’s 1999 when we were all using dial up.
Yes, that premium WordPress theme you have looks great, but when you try to stick numerous 2 mb photos you took with your fancy new phone, you might just be bringing the whole thing to a grindingly slow halt.
Here are the two most important things you should do to lighten up your site so it loads faster.
1. Reduce Your Image File Size
Of course one main source of website bloat has always been images. We all want fancy, beautiful images to grace our websites, but if you’re not careful they can be the prime reason your website loads slower than most visitors are willing to wait around for.
Reducing your image file size is the first place to start, especially if you’re using a new WordPress themes which features any of the following:
- Parallax backgrounds
- Hero images
- Header sliders
Also consider your blog post feature images, which can line up on your blog home page like a parade of heavy, slow buffaloes and take eons to download.
But you chose smaller sizes when you inserted those images into your post, right? Doesn’t that reduce the image file size? Not always.
Here’s what trips up lots of website owners…
Some WordPress themes will stick a full-size image where really all that’s called for is a tiny image. But the image is small! you say. Not quite, and here’s why.
The displayed image might be tiny, but unless you’ve fixed things, when someone visitors your site, it is first loading the full-size image, then shrinking it on the spot to display it smaller. Total waste of resources.
There are two ways to handle the image problem in WordPress.
You have a choice in how to reduce your image sizes. You can use photo editing software (pre-upload), or you can enlist the services of a plugin (post-upload). Personally, I prefer the first method. Both give the same result, which is exporting your original (heavy) image into a lesser quality (lightweight) image.
But I don’t want bad quality images that look grainy!
Nope, I didn’t say you had to re-export your images into bad quality images. I recommended “lesser quality”. Trust me, you won’t be able to tell the difference between a quality measure of 99 and one of 80. You’ll be cutting the weight down significantly, but not the perceived quality.
This image weighs a gargantuan 460 KBs when exported at a quality rating of 99. If I turn the rating down to a quality of 75, I can’t really tell the difference and now the weight is down to 72.9 KBs!
For further reading on the image optimization, I recommend this article which covers everything from how to choose the right image format, downsizing the resolution, and compares different online tools and WordPress plugins currently available for reducing image file size.
Let’s see how many MBs when can load on there!
2. Cache Your Site
Images aren’t the only things that slow down your website’s load time. Your website can be large (because of images) or it can also be complex (because of scripts).
Another reason to cache your site.
Shared hosting will suspend your account if your website uses too many resources. Scripts that constantly run to the database to create portions of your website aren’t necessarily bad, but once you get a lot of fancy plugins going, that’s a lot of script-grabbing taxing the database.
Plus, once you add lots of traffic to the scene, you’re really dealing with a major slowdown in load time.
JS files are now literally heavier than entire websites used to be.
Modern websites almost always have some javascript on them. For a while, that wasn’t the case, but now JS is back in full force and everybody’s using it.
The problem? A Javascript file may literally be bigger than an entire website was 10 years ago.
Back in the day, the general rule of thumb was you weren’t supposed to use images that were more than 30-70 KBs. You also weren’t supposed to make websites that were more than 800 pixels wide, and each page was to be no more than 100 KBs.
Now javascript files are like 100 KBs each, and sometimes there are like 5 javascripts on one page! Plus plugins! And plugins use javascript too, so you can imagine how ginormous fancy websites are these days.
So, what do cache plugins do, exactly?
Cache plugins will create a text version of your website. Instead of calls to database, and having to run all the functions in the PHP script to generate the pages, it’s taking the output of all that and creates a static file of the final HTML. Then all it needs to do is serve up that one static file whenever someone visits your site.
Cache plugins also put your site on a diet, trimming the fat in several ways to make it lighter so it loads faster. Here are some of those ways:
- Minify. This means stripping the white space out of your javascript and CSS to make those files smaller. This includes tabs, comments, spaces, and new lines in the CSS files.
- Grouping of files. Will combine several script files into one, making it possible to have fewer http requests. Also does this for CSS files.
- Packs JavaScript scripts.
The bottom line.
Examine your photos, and cache your site, that’s really it. To test the results of your efforts, use tools.pingdom.com or the Google Mobile-Friendly Test to see how fast your website actually loads. Keep tweaking until you get the speed you need.
