Optimising WordPress for Speed is pretty simple.
Use Google’s Pagespeed Insights tool and check your website’s current score.
Anything above 85 is a pass, both on Desktop and Mobile view. Take it with a pinch of salt though, even Google get things wrong (like telling us to optimise their analytics code!).
Another great SEO tool to check your websites page speed is GTmetrix, which shows us a lot more info and tips than Google.
Free WordPress Plugins:
The best plugins to help optimise your WordPress website.
WP Smush
Simple, free and easy to use image compression plugin.
Install, and simply hit “compress images”, and let it run in the background. Being a free version it will compress 50 images at any one time. Just keep checking the page, depending on how many images your site has it may require a few clicks on the button. Pretty simple? Yes!
This plugin will also optimise any new images you upload automatically.
W3 Total Cache
This plugin is very powerful.
It can be somewhat confusing, the settings are a little complicated.
Let’s run through the important things you should be doing with this plugin, and what it does.
It’s a cache tool, that saves most of the website files to the local machine, so that if a visitor returns most of the ” temporary” files stored in their browser are used, meaning your website server will respond a lot quicker. It also works with Google Bot.
How to use it:
Once installed, you’ll see a “Performance” tab on the left hand side of your WordPress menu.
It will show a lot of options and settings, don’t let this put you off. You’ll only need to click a few options to get the desired outcome.
Click “general settings” from the menu.
Enable “Page Cache” and tick the checkbox.
Scroll down, to Minify, tick the Enable checkbox for this option too.
Scroll down &
- Enable Database Cache (tick the box)
- Enable Object Cache (tick the box)
- Enable Browser Cache (tick the box)
- Enable CDN (tick the box)
Save your settings for this page!
Step 1 complete!
Next: Click Minify from the menu.
Leave the General settings, don’t click anything in this tab, scroll down to: HTML & XML.
Enable these two options:
Inline CSS minification
Inline JS minification
Save your settings for this page, Step 2 complete!
Next: Click the tab: Browser caching.
Tick the checkbox to enable browser caching.
(Here you’re telling the browser to save the temp files for your next visit.)
Save the settings!
Plugin setup complete!
Async Javascript
Async JS. DOWNLOAD LINK HERE
Really simple plugin to async your JavaScript files (every theme will have JS files).
Simply check the box to Enable Async JavaScript. Make sure you use async and not defer. If you defer your theme may break if you use alot of JS files.
Minify your theme’s CSS file.
No plugin needed, simply go to “Appearance > Editor” and you’ll land on your theme’s main CSS file.
If you’re not code savvy, don’t worry. You don’t need to edit anything.
Copy and paste the whole contents.
Paste it into this free tool and click “minify”, copy and paste the output back into your theme’s CSS. This will auto remove all line breaks, comments and combine code together reducing it to about 30-40% of the original.
Make sure you create a backup of the original just in case your theme breaks.
Leverage browser caching using htaccess.
W3 total caching isn’t enough to get the desired output for image, CSS and JS catching. I always add a few lines of code into my .HTACCESS to solve this issue.
You can find your .HTACCESS in your websites file manager or you can download WP htaccess Control, and edit it in WP admin.
In your WordPress admin sidebar, go to “Settings > WP htaccess Control” and scroll to “Custom HTACCESS”
Copy and paste this code into the area provided. This will keep your server connection open to all requests at any one time. Normally your website server will send one file and close and open a new connection for every file your website needs, with this “keep alive” code, we’re telling the server to pass all files with one connection, making it faster.
We are also setting an expired date onto all images, CSS, JS, PDF files instructing the browser to re-download these files after one month.
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule> # 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 application/pdf "access 1 month" ExpiresByType text/x-javascript "access 2 days" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES CACHING ##
Check your website in Google’s Pagespeed Insights tool again, I’m sure you will score above 85 meaning a PASS, your website is now FAST enough for Google which means your technical SEO is up to scratch.