It only makes you want to increase the speed of your WordPress site. It improves very important things like user experience and SEO most notably.
Some may tackle the issue of a slow website by throwing more plugins into the mix, which is rarely an absolute solution. Let’s discuss how to improve your website speed without the use of more WordPress plugins and then touch on when you should actually bring a plugin into it or not.
How to increase your WordPress website speed without plugins:
To measure your website’s performance, we are going to need to capture the initial value or the before of your website’s speed score. To do this we can use free online tools (websites) that can do this for us.
When it comes to website speed optimization, I find there are 2 tools that are the best and give you the most helpful information; Google’s PageSpeed Insights and GTMetrix. Each of these tools gives you a speed rating of your website’s performance with suggestions telling you what aspects of your website to optimize for a better score.
Google’s PageSpeed Insights tool has a lot going for it. It’s simple and provides you with the most important speed improvement suggestions first. Not to mention it’s made by Google, which gives you a better representation of how Google specifically speeds the speed value of your website when it comes to SEO.
GTMetrix is another popular speed tool with a bit more of a technical interface, aimed at more advanced users. I personally find that GTMetrix provides a fairer representation of your website speed. I like to think of it as Googles tool gives you a score based on your website’s overall speed (in terms of seconds loaded), but GTMetrix tends to judge more on if you have done optimizations or not.
Start by running your website through one of the speed tools. Keep this audit open in a new tab while your working on your website in another. Both tools are great at providing you insight, regardless of the one you pick if you implement the following optimizations your score will improve.
Note #1: One thing you should know before aiming for a high speed score is that these tools are just to help you diagnose potential issues to improve your speed. Yes, higher is better when it comes to the speed results, but you’re not likely to find a notable difference between a score of 60% vs 70%. As long as your site is above 75% – you’re doing great. The higher beyond that, the better. Do not stress about not getting 90%+ as this can unrealistic for most WordPress websites depending on your theme and the number of necessary plugins.
Note #2: The results of the speed audit may vary from test to test. This can be due to a couple different reasons like your hosting speed, which fluctuates during different times of the day. Off-Peak usage times can give you better results than peak usage times.
Note #3: It is normal for your mobile speed score to be lower than your desktop speed score, Especially with Google Page Speed Insights. This is because with Google’s tool the mobile score purposely simulates loading your website on a mobile phone connection which is slower than desktops.
Importance of optimizing images for speed optimization: 8/10
This is one of the most common issues to be found with a website speed audit, and one of the most important. Un-optimized images lead to a huge difference in download time because of the amount of data each picture has on your website.
The speed audit will point you in the direction of the images that have the biggest performance issue. Find where on your website those particular problematic images are on your website so we can begin optimizing them.
To optimize your images in WordPress without a plugin, we first need to find the rendered size of them. This is super important because why show an image that’s 3000 pixels wide if it only gets to be 1000 pixels wide?
We have to start by finding how big the image is being rendered so we can find out how big we need to make the actual image as to not make it too big to add unnecessary pixels (more data in file size) to it. A smaller image is a faster image!
So when it comes to image optimization there are two important kinds of sizes of images; The rendered size and the intrinsic size.
The rendered size is the size that the image is being displayed as.
The intrinsic size is the size of the actual image, regardless of what size is being displayed as.
This is important because if you have an image that is being rendered 500×500 pixels, but the actual intrinsic size of the image is 4000×4000 then there is a big image optimization opportunity to make the intrinsic size of the image near the display size.
Let’s say you do optimize that image, so now its a 500×500 image (intrinsic) being displayed as 500×500 (rendered). You’ll find that because you reduced the size of the image it will be blurry.
But how? If the image is 500×500 and it’s being displayed at 500×500 then shouldn’t it look lossless and clear? Its the same size!
Well unfortunately it’s not quite this way, the images will turn out blurry unless you add an extra buffer in there that gives it that extra quality in the image you want, while still being faster and optimized. This is why I add around 200-300 additional pixels to the rendered size so it can make it look better.
One thing you also have to look out for is that just because your image is rendering at 400×400 on a desktop size, doesn’t mean its not rendering bigger on mobile size. Most responsive columns will become 100% wide on a mobile size, or a 3 column layout could turn into a 1 column layout with 3 rows – making the container bigger than what it was on desktop.
This just means make sure you find the biggest rendering size of the image your optimizing by checking it on different screen sizes.
Tip: focus on images that are in the header and footer like your logo because those will appear on every page.
Optimizing images is the best thing you can do to improve the speed of a website. Take your time speed improving as many images as possible.
Importance of minifying for speed optimization: 4/10
Admittedly, Minifying CSS and JS isn’t something I’d recommend doing manually without a WordPress plugin. There are plugins like Fast Velocity Minify that can minify your code automatically without having to re-minify it after you make a change. The plugins take seconds to install, seconds to activate and provide little to no drawbacks to installing one. Do know manual minification becomes almost not worth it as your site becomes bigger and bigger. I would strongly recommend using a plugin. However, if you are stern about not using plugins you can still do it manually.
Running your code through a minification tool makes it compressed resulting in a smaller file size for that minified code. Manual minification is only something you should be doing if your website is unlikely to have more changes being done to it, as you would have to reformat the code to make it readable and then re-minify the code to make it compressed again.
File sizes can be expected to be reduced by 30-60 percent by minifying your CSS or JS files.
Your style.css file is now smaller, faster to load, and optimized!
Your script.js file is now smaller, faster to load, and optimized! Now we can move onto caching your optimized files.
Importance of browser caching for speed optimization: 8/10
With plugins like W3 Total Cache that allow you to get cache enabled in seconds, its tempting to install them. However, cache is something thats super simple to set up without a plugin. All you have to do is edit a certain file, paste in some code and your done!
Ironically for this, you’re going to need a plugin or FTP access. We are going to edit a file called .htaccess.
To put it simply, the .htaccess file is used for configuring your web server settings surrounding the directory its in. This is why its used for caching, because its the files in the directory we want the web server to cache.
5. Click the Test Before Saving button to see if it there was an error
6. Save changes, then check the website to see if everything works as normal.
7. If all is good, Uninstall the .htaccess file editor plugin and you’re done!
If your website becomes blank and solid white after updating your .htaccess file, there was an error and you should replace all the current broken .htacess file code with the code in your backup. Try again without any additional spaces or line breaks at the end of the code and update it again.
Importance of deactivating unused plugins for speed optimization: 7/10
Look through your list of activated plugins and deactivate the ones your website does need.
I’ve worked on websites before where I could deactivate 5 different unused plugins that when deactivated increased the site performance by 38 points on Googles Page Speed tool.
Go through each plugin and ask yourself:
I have personally worked on a site with 53 plugins installed! This is way too much, there has to be at least a chunk of those plugins that are not necessary.
You should aim for less than 10 plugins, though 15-22 can be acceptable if you have enough speed optimizations in place.
Importance of reducing unnecessary elements for speed optimization: 6/10
Id love to be the first person to tell you should uninstall Revolution Slider, or any other slider plugin.
Sliders are among my personal hit list of elements I like to remove from websites suffering from speed because they hurt a website more than they help.
There are too many complex elements and plugins that slow down your site by adding extra CSS, HTML, and JS files that aren’t worth it.
Take slider plugins for example – they usually:
All that for a plugin that detracts from the user experience. They found that 1% of people actually click on the slider in the first place, not to mention they confuse people, add barriers to see more content, it also triggers something called banner blindness, and of course – they slow down your site.
So you need to take a hard look at your website and simplify it as much as possible; no sliders, no fancy animations, no popups, and no weird button triggered layouts.
Those things are not the things that make your website stand out, its the content and value you give the viewer! Stop trying to stand out with flashy elements!
You can now run another speed audit in a new tab to see the improvement in speed. You should definitely see a speed increase from the first speed audit after applying the changes above.
You can optimize it further by following the suggestions given by the audit results. Most likely, it will tell you there are still some images that can be optimized. In which case, you can compress them again or make them a smaller size.
If your website is still slow after applying the changes, chances are your website hosting is the cause – more specifically, it’s you’re shitty GoDaddy hosting (yes I’m calling you out on it). I like to personally think of GoDaddy as the “just get this shit online” kind of platform.
I would suggest using a better hosting platform like SiteGround, which delivers on over double the speed.
If changing hosting platforms doesn’t seem pleasant to you, I would suggest installing the Fast Velocity Minify plugin. There are other speed optimization plugins that when installed cause errors or even break your site, but with Fast Velocity Minify I rarely find it happening.
From personal experience, most speed optimization plugins can boost a speed score by 20-30% alone so installing a plugin can be worth it.
Heres personal process for doing speed optimization on websites: