There are a number of things that can be done to speed up a website. Some of them, you may be already familiar with… or have at least heard of. Hopefully, the tips below will help you add some more tools to your kit to make your sites load faster. Pageload speed can affect your pages’ rankings, so it’s well worth the effort.
I have 11 different websites, all on various different WordPress configurations. By implementing the following, I’ve been able to achieve a fairly consistent page-load of 2.0 seconds or less on all of them, which is good enough to keep me from frustrating my sites’ visitors.
This is by no means an all-inclusive tutorial on page-load optimization – just the basics. But it’s enough for most sites to achieve a respectable page-load speed.
Image optimization
Image optimization isn’t just a matter of reducing the file size as much as possible without pixelization of the image. There are a number of things that can have a real impact on your page-load. Choosing the rightfile format and resolution are the two most important steps in image optimization.
Image dimensions
One of the most common image errors I encounter on new clients’ sites is that they haven’t resized the images to the display dimensions before uploading it to their media library. If you upload a 1400×720 image, then resize it down to 350×180 display dimensions, you’re adding seconds to your load time. And if you intend to use the image in more than one place, but in different sizes, you’re best off to upload different versions of the image, each in the same size it’ll be displayed.
There’s another reason to size your images per the desired display size: since you should normally be using images that are jpg, rather than png, a jpg, being a lossy file, will degrade somewhat in quality in the resizing process.
File size
You may already be aware of the need to Save for the Web, which can greatly reduce the file size. But I still see many instances in which a site owner has uploaded images in 300dpi or as a png, rather than a jpg or gif. Unless you absolutely need transparency in your image’s background, there’s really no reason to use the png format. A png file size of an image of equal quality can easily run 10 to 15 times larger than a jpg. And most browsers are limited to a maximum 96dpi display these days, so anything more than that is a waste of time and space.
Compression
After you’ve properly sized your images and minimized their files sizes, there’s one more step you can take: file compression. This basically makes the file size smaller yet, which means less storage space, less bandwidth consumption and faster downloads. For images, gzip isn’t always very effective, as jpegs are already compressed. In fact, occasionally, running gzip on a jpeg file will actually make the file larger. Another option is to use an online tool such as ShortPixel or a plugin like Smush.
After you’ve completed these three steps, your images are ready to be uploaded to your media library.
EDIT: I had a chat with a colleague who has more experience in image manipulation than I, and he made a couple of interesting points. He does a lot of images in his design work and he pointed out that svg images are often the best approach. I knew one of the major advantages of vector images – you can enlarge them as much as you like, with no quality degradation due to pixelation. I didn’t realize, however, that their file size can be so compact. He showed me a large logo he had built in svg – only 6.6KB! Thanks, Edward!
Minify
Minifying JS, CSS and HTML scripts can save a surprising amount of space and page-load time. Unless you’re fairly adept at coding, the easiest approach here will be a plugin. There are separate plugins available to handle JS, CSS or HTML, but I suggest Autoptimize. This plugin will aggregate all three and minify them, as well as enabling you to handle other functions to speed up your pages.
Cache
Proper cache management is key to speeding up your page-load time. Most hosts offer some sort of cache program, but from what I’ve seen, the cheaper hosts’ caching isn’t normally very good. If you’re not inclined to move to a better host (I highly recommend SiteGround), then a plugin can help a lot. Personally, I like WP Super Cache, although WP Fastest Cache is also good and offers some compression benefits. I’ve also seen a lot of people recommend WP Rocket, a premium plugin that’s only $39/yr for a single site. I’ve never tried WP Rocket myself, so I can’t personally recommend it, but it might be worth checking out.
EDIT: A colleague whose opinion I’ve come to value recently told me this:
“I can personally recommend WP Rocket. Hands-down, best caching plugin on the market and one of only 3 paid WordPress plugins I even recommend.
They had a huge update in June which, among many things added two important improvements:
- Load CSS files asynchronously and add the critical CSS to the header of the page
- Option to defer loading of JS files
They also “split” minification and concatenation into separate options, which, if you know even a little bit what you are doing, provides a superior return.”
Thanks for the input, Casey Markee – I’ll definitely be checking WP Rocket out.
Combine JS and CSS
Combining your JS and CSS files can eliminate some server calls and save download time. The Autoptimize plugin can do this for you, as well. Or if you’re a handy coder and don’t want to add another plugin, you might decide to go with Gulp to combine your JS scripts. A slightly different approach for your styles is explained here.
Defer JS
Here’s another place where the Autoptimize plugin can make your life simpler. It’ll allow you to aggregate your CSS and JS, automatically placing your CSS in the head section and allowing you to defer some scripts until later on the page.
Gzip compression
While gzip isn’t always very effective for image compression, as jpegs are already compressed (in fact, occasionally, running gzip on a jpeg file will actually make the file larger). it can be very effective in compressing other files, such as HTML and scripts. Most code is formatted in a way to make it easily readable by humans. That means lots of comments, line-breaks and indents – none of which is necessary for browsers to parse the code. Gzip compression removes all that formatting, which speeds up the download considerably, often reducing the file-size by 50% or more (if you decide to try the WP Fastest Cache plugin, it includes gzip).
Lazy-load images
There are numerous plugins available to enable you to implement lazy-loading, but the process is simple enough that if you’re comfortable doing some light editing on your code (ALWAYS back-up first, just in case), you can do it without a plugin, which will help keep your page-load time down.
There are two approaches to lazy-loading. One is to load images asynchronously (in other words, after the above-the-fold content has completed loading). The other is conditional loading, which won’t take place until the viewport in which the image is to appear is in place. There are numerous methods of implementing lazy-loading, some of which are outlined here and here on SitePoint.
Minimize requests
Multiple server calls will always exist, but aggregating CSS and JS scripts and aggressive caching can cut down requests quite a bit. Avoiding in-line CSS when practical can have its advantages but for minor CSS changes, in-line can help minimize the number of requests to the server.
Theme
Finally, don’t fail to consider your theme as a possible source of code-bloat and excessive page-load time. Many “premium” themes are heavily burdened with extraneous code, “just in case” one wants to take advantage of one of many available options. I’ve seen themes that added over 15 seconds of page-load, compared to an out-of-the-box WordPress default theme. All those bells and whistles can come at a price.
The homepage of this site contains 10 images (most of which are very small), 9 of which are pngs, rather than jpgs. Yet I just ran this speed test on gtmetrix and still got a tidy 1.8 second load time:
But there’s always room for improvement!