How to Increase WordPress Speed Without Using Plugins - The Website Architect

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:

1. Run a speed audit to measure the before speed score of your website.
2. Optimize all images in your media library and update them in your website builder if necessary
3. Optimize HTML, CSS, and JS files with minification and only load them on a required basis
4. Add the necessary code to your .htaccess file to utilize browser caching
5. Deactivate or uninstall unnecessary WordPress plugins
6. Reduce the amount of unnecessary, complex on-page elements
7. Run another separate speed audit in a new tab to measure the improvements!

1. First, Run a speed audit

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.

Notes about speed tests and audits

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.

2. Optimizing your images without a plugin

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?

How to find the perfect size for each image

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.

How to optimize images in WordPress

1. Start by right-clicking the image on your website that you want to speed optimized and click Inspect (this is what it says on Chrome, sorry Safari users – I’m sure it’s similar).
2. Once the inspect panel (usually on the bottom or right side) opens, find the image element, or the <img src=”…”> thing and hover over the URL of it. There may be multiple URLs, if so hover over the one that has the basic src attribute.
3. When you hover over the image you should see a preview/information window come up. It will first say the size that the image is being rendered at and then the intrinsic size, which is how big the actual image is that’s being loaded in.
4. Next, we have to optimize the image. Remember that we want the image to be the rendered it’s displaying at + 200-300 pixels to make sure it still looks high quality. There are two fast ways to optimize your image size:
   1) Through WordPress’s image editor
   2) You download the image, put it into something like PhotoShop, export as a smaller size, then reupload. Doing this gives you a chance to export with a high compression giving you an even smaller file size.
5. Replace the image with the updated size.

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.

3. Optimizing HTML, CSS, and JS files without plugins

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.

How to minify you CSS file:

1. Open a CSS minfier tool like CSS Minifier.
2. Copy your CSS code from Appearance > Theme Editor > style.css (Stylesheet) and paste it into the CSS Minifer tool and a local text file so you have a backup.
3. Click the minify button to convert your normal CSS into minified a version
4. Copy and paste the minified CSS back into the Theme Editor style.css file
5. Save changes

Your style.css file is now smaller, faster to load, and optimized!

How to minify you JS files:

1. Open a JS minfier tool like Javascript Minifier.
2. Copy your JS code from Appearance > Theme Editor > JS folder > script.js and paste it into the Javascript Minifer tool and a local text file so you have a backup. You can do this with other JS files you may see in your theme files.
3. Click the minify button to convert your normal JS into minified a version
4. Copy and paste the minified JS back into the script.js file
5. Save changes

Your script.js file is now smaller, faster to load, and optimized! Now we can move onto caching your optimized files.

4. Enable browser caching in WordPress without plugins

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!

How to enable browser caching:

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.

Editing .htaccess with a WordPress plugin

1. Temporarily install a plugin called Htaccess File Editor – Safely Edit Htaccess File
2. Go to the plugin via the left WordPress side menu under Settings > WP Htaccess Editor
3. Scroll down to the scary red area and click the “I understand. Enable the editor.” button.
4. Copy and paste everything in the file into a local text file to make a backup
5. Copy the code below and paste into the .htaccess file at the bottom of the file. Try not to make any additional white spaces or line breaks.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

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!

Editing .htaccess with FTP

1. Connect to your server via FTP using a program like FileZilla
2. In the route directory, find the .htaccess file
3. Right click > Edit the file
4. Copy all the code and paste it into a local text file to make a backup
5. Paste the code above from the previous section at the bottom of the file.
6. Save changes, and check to see if your website is working like normal

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.

5. Deactivating unnecessary WordPress plugins

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:

1. Is my site actively using this plugin?
2. Is it really a big deal if I don’t use this plugin?
3. Can I make this plugin feature myself?

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.

6. Reduce the amount of complex, unnecessary on-page elements

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:

• Have HTML/PHP code that needs to be ran
• CSS and JS files likely to be loading on every page regardless to if you have the slider on that page or not
• Images in those sliders (not every slider) that don’t add much of any extra value to your website

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!

7. Measuring the speed results

After you’ve:

• Optimized the images
• Optimized the CSS, JS, and HTML
• Enabled browser caching
• Deactivated useless or unhelpful plugins
• Reduced the number of complex 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.

Website still slow after changes?

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.

My personal process for speed optimization

Heres personal process for doing speed optimization on websites:

1. I first run the speed audit tool by Google to get a score. Usually the websites I optimize start at around 5-20% on mobile and 10-35% on desktop.
2. I read the audit to figure out what areas the site needs improving on. 85% of the time, images are one if not the main issue that’s causing the website to be slow.
3. I next optimize the images, deactivate unused plugins, and sometimes run an image optimizer like WP Smush to compress and set a max size for all the images in the media library.
4. I install a speed optimization plugin (usually Fast Velocity Minify) and go through the settings to enable/disable functions to help the speed of the website or help the stability. I usually activate the Async Google Fonts option found in most speed optimization plugins.
5. If a website is still being slow at this point, I use Google Chromes built-in network waterfall tool in the Inspect element area to figure out what’s causing the page to be slow. If there is something wrong, I fix it!
6. Lastly, I run another speed audit in a new window so I can compare the difference from the first one side-by-side. Usually, the final speeds end up being around 55%-80% on mobile and 70%-90% on desktop.

If you’re doing this for a client, I have some email templates you can use to explain speed optimization for them depending on the level of experience they have.