It’s hard to juggle all the things we’re supposed to do for our websites. When Google let us know that we could expect to be graded on how fast our website’s pages loaded, it seemed to add yet another thing to worry about.
Thanks for that, Google.
Actually, if you stop and think about it, we probably should thank the Googsters. See, when they decided to give bonus points to faster websites, they only reflected what was already happening with our visitors.
We have only a few seconds to hold their attention, because when websites are slow to load, visitors are quick – with the back button.When websites are slow, visitors are quick — with the back button. Fix your #pagespeed. Click To Tweet
Complaints about today’s short attention spans aren’t unfounded, but we’re not going waste time complaining. Instead, let’s hit all the things you can do on your own to help your pages load more quickly. We’ll also cover some things you might not want to handle alone, so you’ll have enough info to get the help you need.
Let’s get into it!
WHY is my website so slow to load?
There are several potential causes of slow load times. That’s not as big a pain to deal with as you might think, because focusing on a few of the biggies might bring you all the speed you need.
Don’t worry about setting aside a day or a weekend or whatever to knock out every single one of the optimization steps I’ll share. Just start. You will see some improvement with every thing you do, and it will all add up.
How slow is your website, exactly?
Before I show you a tool that’ll help you measure your site’s performance, you have to promise you won’t get lost in the details. Raise your right hand, etc., swear or whatever you need to do. Ready?
Go to GTmetrix and enter your URL. It’s free and you don’t need to sign up for anything to see the analysis results. Once you see the report, look only at the boxes near the top that look like the image below.
Save the page as a PDF or print it out so you can refer back to it and measure your improvement after you’ve made changes.
Images are the #1 culprit in a slow loading website
Well, among the owner-maintained websites they are. Fortunately, the Fearless arsenal offers multiple weapons to help combat out-of-control images. None of them are hard. All are free, cheap or simply a matter of not doing a thing.
Limit image dimensions
It’s really easy to use up the allotted space in your web hosting account by uploading images you haven’t resized. I mean, you can always scale them in WordPress, right?
Except, you forget. Or your Media Settings [see the screen grab below] use pixel dimensions that are larger than you need. I’m not going to give you a specific set of dimensions to use, because what’s right depends on what you’re trying to accomplish.
If your visitors need to see greater detail (for example, screen shots like the ones I provide) or you’re showing off work (a photographer’s or artist’s portfolio), you’ll need to set your image size limits higher.
Even when you set them higher, though, remember to insert smaller sizes wherever possible.
For my purposes, these settings are good. If I were a professional photographer I might double the large size setting.
Use smaller images, not scaled images
When you insert an image into a post or page, you have the option to choose from among whatever sizes your theme offers. Some themes use special sizes for blog post thumbnails, featured home page areas and other purposes, so you may see more listed than the options below.
Choose the smallest image size that works for your purpose.
You’ll notice when you close the Image Details window that the image is selected in the editor and has resize “handles” you can drag to adjust its size. Know that scaling an image this way does not actually resize it. It just sets the size it appears at. The browser will still load whatever size image you specified when you set the image details.
If you need to tweak the size by scaling an image a small amount, that’s not a big deal. But if you could use a smaller image instead of scaling, do it.
The easiest way to compress images, reduce file size & speed up loading time
Image compression is the next weapon in our bag of tricks, and the easiest way to take advantage of it is with a plugin. Every image compression plugin I’ve used saves on file size without noticeably reducing quality.Why is an image compression plugin for #WordPress better for #pagespeed than Photoshop? Set it & forget it. Click To Tweet
Even if you have Photoshop or another pro photo editing tool, an image compression plugin is usually a better option to reduce file size. That’s because you can set it and forget it. Like setting up proper image dimensions, once you set up image compression every image you upload is automatically compressed.
There are plenty of free or “freemium” image compression plugins that work well enough, but after going through a handful I’ve settled on TinyPNG’s Compress JPEG & PNG images. It’s far and away the best option out there right now.
With the TinyPNG plugin, you can compress around 100 free images every month. If you are just now starting to optimize and wondering if it’s worth it to let it optimize your entire library, the answer is a resounding YES.
I’ve used the plugin to optimize the media libraries of client sites that had been on the web for years and had thousands of images. The plugin works great and costs very little even when you optimize your entire image library.
An additional helpful tool the plugin offers is the ability to automatically resize large original images on upload. If you changed the Media Settings we covered earlier, good for you. But they won’t affect full-sized images or images you’ve already uploaded.
I’d have thought that resizing originals would be less of a factor in page speed, but I’ve fixed more than one site that included ridiculously huge images. One was 17MB! Using the resize option in the TinyPNG plugin will help you painlessly save space in your web hosting account, so go ahead and do it.
What else makes your website drag?
This is the part that gets a little nerdy, and where most non-technical people should consider hiring help if/when they can. Even without pro help, though, there are usually things you can do to avoid or improve some of these problem areas.
Before we jump in to the nerdier stuff on the list, I do want to acknowledge that there is a plugin for seemingly every issue. Plugins, however, often create more serious problems than they solve. If a plugin is a viable option, I’ll mention it – as I will if it’s something with more downside than I think is worth the risk.2 biggest #pagespeed rules: 1) Load more things, wait more time & 2) Load big things, wait more time Click To Tweet
Load more things, wait more time
Any given web page is comprised of source code that contains the text, headlines and subheads that actually appear on the page. These days, most web pages contain a vast amount of code that you won’t see unless you peek behind the scenes.
Much of this code pulls in other files like images, fonts, scripts that make the web page do what it does (think fancy drop-down menus or e-mail opt-in pop-ups) or provide style and layout information for the site’s elements.
The more complex the site, the more resources it pulls in from outside the web page and the longer the load time. If your site loads slowly, think about what you can do to simplify it. Below are some good places to start.
There are ‘minify’ plugins out there that will join many of your text-based files together so there’s only one call to the server instead of multiple requests. These are not for the novice, because there can be issues when scripts are combined.
Still, it won’t hurt much if you install a minifying plugin to check it out. Just be sure to go through your site checking every different page type for glitches. If anything is amiss, deactivate and delete the plugin and all should be well.
Plugins can be lifesavers. Since so many are free, though, it’s tempting to load up. But every plugin brings with it at least a few files – some include many. Even when a plugin isn’t used on a specific page, its scripts and styles are almost always loaded.
Take a look at your plugin directory. Is there anything you’re not using and can delete? If you’re not sure you can always do a trial run and deactivate a plugin without deleting it completely (files for deactivated plugins aren’t loaded into web pages).
It’s hard for the average person to appreciate well-coded website themes – until they’ve been burned. I’ve seen some pretty bad ones in the years I’ve worked with WordPress.It's hard for the average person to appreciate a well-coded #WordPress theme…'til they get burned. Click To Tweet
I don’t want to get into a bunch of technical mumbo jumbo, so I’m just going to give you three pieces of advice I know will serve you well:
- Stay away from ThemeForest. Yes, there may be a few good themes there. But there are a whole lotta bad ones. You won’t know the difference until it’s too late. Don’t waste your time or money.
- The StudioPress Genesis framework and child themes are solidly coded and will give you great design and peace of mind. They are worth the initially higher price.
- Like free? You can’t go wrong with a recent Automattic theme. They’re the people that make WordPress, and they know their stuff.
Too many font styles
Sometimes poorly (or overly) designed themes include too many fonts. Other times website owners load up on fonts without realizing their drag on web page load time. Usually these are Google fonts, since they’re freely available.
I won’t go down the font rabbit hole, but I do want you to keep in mind:
- Each Google font has to be fetched from Google’s server and loaded up, adding to page load time.
- Each font variation (bold, italic and other variations) adds to the load as much as adding a completely different font. 😯 I know, right? Should we not at least be able to have bold and italic included???
Load big things, wait more time
When it comes to the size of the files pulled into your web pages, images are the first thing to think about. Video also provides a hit to page speed, as does any other content you embed in a page.
Obviously we need images, video, documents and other types of content to help us communicate our point or disseminate information. But do we need seventeen different animated GIFs to get our point across? No, we don’t. Just pick one.
Pump up your page load speed
Go ahead and work (or get help) to address the measures in this section regardless of where you are in your slow-page-load-fixing quest. Even if they’re not the huge wins you might see with other fixes, they offer a payoff – mostly with little effort.
Get a better host
It’s so tempting when you first start a website to just go with cheap shared hosting. I mean, it’s just a small chunk of storage space on the interwebz, just like space on your computer, right? Why not pay $3.99/month and be done with it?
Actually, that “just like your computer” thing is a pretty good analogy. Let’s think about all the things that affect how fast your computer performs the tasks you request: how old it is, what operating system it runs, how fast the processor speed is, how many things it’s doing at once, how good your WiFi signal and internet connection are. All the same basic principles are at work on the server that hosts your website.
You get what you pay for. The good news is you don’t have to pay an arm and a leg to step up. Here are two good options to get you off of a poorly-performing web hosting service (or avoid it altogether):
1) Affordable managed WordPress hosting at Lightning Base
We use and recommend Lightning Base. I know – you’ve never heard of them. Despite being around since 2011 as well as all the hoo-ha over managed WordPress hosting (which is their specialty), I only found them because I stumbled across a recommendation from someone else.
Lightning Base is the most affordable managed WordPress hosting solution I know of. Their customer service is excellent – quick and responsive. In addition to hosting our own business sites, Lightning Base hosts several of our client’s websites. Current pricing is only $99/year. Switching is painless because they will move your site for you.
If you choose Lightning Base, you still need to be mindful about keeping WordPress and its plugins updated. If you’re uncomfortable or forgetful about handling updates, get a maintenance package that includes this service (we offer them & will make an announcement about that soon).
Lightning Base servers are locked down against intruders, which should help keep the cretins of the internet out if you occasionally fall behind on your updates.
2) All-in-one managed WordPress hosting + well-designed themes at StudioPress Sites
StudioPress Sites ticks more boxes than just speed on the “how to have a good website” checklist.
In addition to the speed and security of managed WordPress hosting, StudioPress Sites include the impeccably-coded Genesis Framework (mentioned above) and all its child themes. This saves you from having to purchase and upload a theme separately. If one theme isn’t working for you, no money lost – just click to pick another.
In independent tests conducted by Webmatros, StudioPress Sites had faster page load speeds than any other major WordPress hosting option (Flywheel, WP Engine, Media Temple, Pressable, Bluehost Pro).
Who is this option good for? Someone who believes $25/month is a small price to pay for not having to worry about performance and several other hosting hassles. No WordPress install, many one-click plugin installs, automatic theme and WordPress updates, no cPanel, no database crap. Like Lightning Base, StudioPress will migrate your site for free.
I’ve been a StudioPress customer since around 2010, but only recently used StudioPress Sites for the first time. My client whose site is hosted there did not need the worries or hassles of other options, so it was a good fit for him. Check out StudioPress Sites here.
Use a Content Delivery Network (CDN)
In simplified terms, a CDN stores a copy of your website on super-fast servers in multiple locations. When visitors access your site, the CDN sends whichever copy is closest to the visitor.
A CDN does speed up your site, but it can be a minor annoyance when you’re tweaking your site and are served the cached (stored) copy. With any CDN, there is probably an option to turn off caching if you’re logged in. I sometimes have to be reminded of this after the fact 🙂
You can use Cloudflare with pretty much any website. They have a free plan that will work fine for most people. You can set it up yourself if you’re a little nerdy – or just patient enough to follow the (somewhat lengthy) directions.
How much did you improve?
Measure your performance at GTMetrix after you’ve implemented any of these optimization steps. How did your score change? What steps did you implement? Leave a comment below and let us know.