Many elements make a successful website: Design, content, SEO, mobile-friendliness — to name just a few. Yet, something that has become more and more important over time is website speed.
Consumers are impatient. If a website takes too long to load, they move on to something else. How long before they get itchy feet? Two seconds, that's it.
The problem is exacerbated by the fact that visitors are mostly using mobile devices that often have a slower data connection than desktop and laptop computers.
As a consequence, WordPress users are hard pressed to make their sites as fast as possible. However, doing so can seem like a daunting task that requires a lot of technical knowledge.
To make it more accessible, in this article we will show you a few simple ways to make your WordPress website faster. However, instead of just telling you what to do, we will demonstrate everything with a practical example.
In the following, I will attempt to speed up my own website and show you every step of the way including the before and after results. Let's get right to it.
First Things First: Back UpDuring the process of speeding up your WordPress website, you might do things that can potentially take it offline or break it. For that reason, we will start with what we should always do when attempting to make major changes to our website: back it up.
With a fresh backup, you can go back to how things were before in case something goes wrong. So, as a first step, I downloaded both my website files and database. If you are following along, I advise you to do the same. Whether you do it manually or via plugin is up to you.
Step 1: Assess The DamageAfter backing up, it's time to check how much work we have carved out for ourselves. That means seeing how the site is currently performing in terms of page load speed. Only if you have before/after data, can you see whether your actions made a difference.
To be honest, since I had not really done anything in terms of speed optimization on my website I was sort of dreading it. To assess the challenge, I used these tools:
After plugging my URL into each of these sites to see how they rate the site's performance, the judgment by GTMetrix was pretty harsh:
Pingdom on the other hand painted a slightly friendlier picture:
Each site also offers a waterfall diagram which shows what part of the website request t akes up how much time:
For completion's sake, I also made one more quick test with Google PageSpeed Insights to check for mobile performance (hint: it wasn't good). Thankfully, the testing tools all provide input on how to improve the loading speed of my page. Most recommended was:
Ok, now that I knew what I was up against, the question was how much I could implement. First, it was time for some spring cleaning.
Step 2: Remove Unnecessary Plugins and ThemesOne of the things that I noticed while backing up was that I have way too many files. That usually is a sign there are some plugins on the site that I am not really using.
The problem with that: Many plugins add stuff to the site header that gets loaded every time someone requests to see it. As we have seen above, HTTP requests are one of the things that can really slow a site down, so my first step was to log in and sort through the plugin list.
I deleted everything I'm not actually using and disabled plugins that I use only occasionally. In my case, this eliminated five plugins. While I was at it, I also made a quick stop in my theme menu to see if there is anything that I don't need anymore.
Of course, it would also make sense to do all of these things before backing up but I wanted a clear before and after picture of my improvements.
Step 3: Run Plugin Performance ProfilerWhen not sure which plugins you can do without, the Plugin Performance Profiler helps. It is a plugin that, as the name suggests, scans plugins in terms of performance and is useful to pinpoint the ones that slow down your site.
Though it's been two years since the last update, the plugin still appears to be working. You can simply install it on your site and then start a scan under Tools > P3 Plugin Profiler. This leaves you with a breakdown of how long each plugin needs to load.
Once you know exactly which plugins make your site sluggish you can either get rid of them altogether or look for alternatives.
In my case, plugins added almost an entire second to my page loading time. That's quite a lot and I needed to find ways to reduce that number.
I noticed that I don't really need the Crayon Syntax Highlighter and could also get rid of Google Analytics for WordPress since I rarely check my analytics on my site anyway. For the future, I would also consider hard coding my custom post types so I no longer have to load the entire Types plugin, however, that's a step for another time.
Step 4: Update EverythingNext, it's time to upgrade. Keeping WordPress, themes, and plugins up to date not only gives you access to the latest features but also lets you take advantage of any speed improvements.
As it turns out, my site had quite a few outstanding plugin updates and I also hadn't updated to the latest WordPress version yet, so I took care of that under Dashboard > Updates.
Updating is also one of the main reasons for the backup at the beginning. Sometimes things go wrong during the process in which case it's always better to have a copy of your site around.
Once the updates were finished I made a quick check around the site frontend to ensure everything looked as it did before the update before moving on.
As it turns out, I also needed a theme update for it to work with the latest WordPress version, so I did that quickly, too.
Step 5: Optimize Your DatabaseSince we have dealt with half of the website, it's now time to turn to the other half — the database. If you have read our article on database cleanup you might know that over time, it can accumulate a lot of dead weight. When that happens, it can seriously slow down data retrieval for any website request.
To optimize the database, I used the WP Optimize plugin also mentioned in the article above. It can help remove data overhead from database tables as well as unnecessary entries like old post revisions and more.
Doing so not only freed up more than 200MB in my database, it also made me realize that one of the plugins on the site was a real bloated and that I need to replace it.
While I was at it, I also limited the number of post revisions WordPress creates to keep my database from growing too large in the future. You can find instructions on how to do that in the post on database cleanup, too.
Step 6: Optimize ImagesImages often make up the bulk of any webpage, especially if it's completely composed of visuals as my website's homepage is. For that reason, images need to be optimized as much as possible. That's also one of the recommendations given for my site by Google PageSpeed Insights, especially for the mobile version.
In general, there are a few ways to optimize images. The first is to only use images just as large as they need to appear on your site. That's also the reason why WordPress creates several versions of each visual you upload so you can use the smallest possible one.
A second way to reduce images in size is to use compression. That means discarding data that is not needed. You can use a service like TinyPNG or a plugin such as Smush.it to do that.
I have already compressed my images when I created them with Photoshop. To still try and improve their performance, I decided to give Photon a whirl.
Photon is one of the modules in Jetpack (a plugin that is already on my site), promising to serve browsers only the image sizes they need and also host visuals on their Content Delivery Network for faster delivery.
I have no real experience with this, so it will be fun to see what comes out of it.
Step 7: Enable CompressionAlright, now that we have covered all the basics, it's time to get to the more technical stuff. First of all, I wanted to enable Gzip compression.
Just like on your computer, this means zipping up the files to make them smaller so that browsers need less time to download them.
We already have an article on how to enable Gzip compression in WordPress so I'm not going to repeat everything here. Thanks to that article, switching on compression was as easy as copying the provided code and pasting it in the .htaccess file on my server. Save and done.
Stp 8: Turn on Browser CachingOne of the most frequently recommended ways to speed up my site was to switch on browser caching.
Browser caching basically means telling the browsers of your visitors to store parts the site on their hard drive for future use. That way, resources that aren't likely to change can just be reused next time they swing by and don't have to be downloaded again.
In WordPress, you have the choice of several caching plugins, most famously W3 Total Cache and WP Super Cache. Both can do all things necessary for website caching. WP Super Cache is said to be more user-friendly in case you are a beginner.
Since I like to get a little more technical from time to time, I opted to copy the code snippet from Daniel Pataki's excellent article on how to leverage browser caching and input it into my .htaccess file (where I already pasted the code to enable Gzip compression). Easy peasy.
Step 9: Minify and ConcatentateOne of the best ways to reduce the number HTTP requests made by the browser is to minify and concatentate your CSS and JavsScript files.
These words merely mean removing all formatting inside the files that make them human readable (space, indentations, comments and everything else machines don't need) and combining them into one. As a consequence, the browser has to download fewer and smaller files for the site to load.
A plugin that promises to do this for you is Autoptimize which I wanted to give a shot for my site. It's as easy as installing and picking what you want the plugin to optimize.
Save and empty cache and you are done.
For the most part that was it. We have dealt with the bigger issues. Now, all that's left is to have a look at the waterfall diagram to see what smaller things stand out.
For example, I noticed that there was a file missing, called logo.png.
I corrected this by putting the file back in place, thus eliminating unnecessary waiting time.
I also noticed that I was loading several styles of the font on my site though I really only use one of them. This could be corrected quickly inside functions.php.
The End ResultDrum roll! Are you ready for the results? Me, too. Here they are:
On Pingdom, my site went from an 82 to a 90 and reduced the loading time by almost a second. At the same time, page size was cut almost in half and requests sent to the server diminished by 12.
The picture on GTMetrix is similar. The site went from a D and an E to solid B ratings. While the page load time actually increased, GTMetrix also shows the reduction in page size and requ ests. Not bad for about an hour's work, right?
However, there's still much to be improved and diving back into the waterfall, we see what needs to be the next step:
The biggest remaining factor of the page loading speed is the server response time. Both speed testing tools show it responsible for about half of the waiting period. Therefore, in order to make a real dent in my site performance, it is probably time to upgrade.
While some of this result might have to do with the fact that my hosting provider is in Germany and all the servers for the speed tests are situated in North America, there were some other issues on the way (like timeout problems during the update process) that made me think this is definitely an issue to address in the future.
In Short…Page loading speed is super important in today's online world and will likely continue to be so. Thankfully, there is plenty that WordPress users can do to make their sites faster.
In the case study above, we have given you some practical tips on how to improve page loading speed. All of them are implemented quite quickly and can have big impact on how fast your site loads.
However, as you have also seen, not everything is up to you. Much also depends on the technology behind your site. If that is lacking, there is no other solution than to move on to another provider or update your hosting package.
Have you successfully improved your website speed? How did you do it? Any thoughts on the above? Let us know in the comment section below!
Nick SchäferhoffNick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. If you want to get in touch with him, you can do so via Twitter or through his website.
Source: 10 Easy Ways to Speed Up Your WordPress Website [Case Study]
No comments:
Post a Comment