[HOW TO] Make your WP Website Blazing Fast - Tutorial
I see a lot of posts here on people looking for advice on how to speed up a Wordpress website.
If you would like to increase your Google Page Speed Insights score by 30+/- or so points this guide will show you everything to do that.
Also just to mention, I have done this on 100+ websites, I do this on all of my own websites, and my clients websites too.
Please Read: I will probably mention this several more times throughout the post but: When you are doing things to speed up a website, particularly modifying files, or playing around with minification plugins you will almost certainly break your website in some way. So remember to always take a backup of a file if you are going to edit it. Also with plugins remember that by disabling a plugin, this will remove the changes that it's made (minification plugins, in most cases).
I'm also not going to begin this post ranting on about why site speed is important, or tell you what % of website visitors you will lose if your website doesn't load in under 2.3759 seconds. We all know how important site speed is.
This post has taken a god-dam long time to write, and is a guide intended to help fellow warriors. So with that, let the fun commerce...
What We'll Cover To Speedup Your Website
Important Note: Before we begin, it's important that you take a Manual Backup of Your WordPress Website, so that you can restore it in the rare case that something does not work on your website. Also remember good habits, that before you edit any file to always make a backup of it, so that you can restore that file encase you stuff up the one your editing.
Image Size & Compression
Without a doubt, images are the heaviest resource for your browser to load. And if you started off building websites like me, you were uploading background images that were 5MB plus and had no clue!
Have you ever loaded a website, and watched a background image load little bit by little bit down the page? Well that's because the image is way to large.
So what size should background images be, and also what filesize & filetype should they be? Below are a few rules which I swear by, and recommend you stick too as well.
Background Images
All Other Images
An Example of This
I've taken a free stock image from Google of some mountains that you see below. I'm also having a look at the "Properties" of this image and can see that it is 6.39MB and that it's also 4288px wide - that's huge!
So let's say I didn't know what I was doing, and I grabbed this image, uploaded it to my website and bam, though I was done. Rookie mistake! Because now my page will load 10x slower.
So there are 3 things we need to do:
Resize Image in Photoshop & Save as JPG
You can resize an image online by doing a Google search for "resize image online" and using an online tool. However below I'll show you how I do this in Photoshop.
Head to Image > Image Size and resize your images width if needed. Now when you go to save your file, make sure it's saved as a JPG and also adjust the Image Quality as shown below before you save it. Sometimes the image quality will set by default to be "Maximum - 12", but you can set this to "High - 8" and there will be zero noticeable difference in quality of your image.
Now Compress Online
This has already taken my image down to 261KB, but I want to squeeze out a little more. So use an online image compressor to further reduce the filesize, I would recommend TinyJPG or TinyPNG depending on your images filetype.
The Results
After having done all of this I have a super small file-sized background image that has lost practically zero quality. This background image has been reduced down to 178KB, which is 36 times smaller than the original image which was 6.39MB, with no image quality loss. MASSIVE!
Compression Alternatives
When it comes to compressing images you could also use a plugin to do this for you, if you'd like to use a plugin I recommend using WP Smush.
Or you could also place the following code in your functions.php which is located in your themes folder:
If you decide to add in this code in, you will need to regenerate your thumbnails, for that you could use the plugin Force Regenerate Thumbnails.
Keep in mind that the value 50, stands for 50%. So if you would like a better compression rate, or a better quality of your image, then you can modify that number in the code above and regenerate your thumbnails.
GZIP Compression
By enabling GZIP compression, this will compress your HTML/CSS and allow your web server to provide smaller file sizes that load faster for your websites users. Compression of HTML and CSS generally saves around 60% of file size ultimately improving your pages load speed, and reducing bandwidth usage.
To enable GZIP compression, you can place the code below inside your .htaccess file:
Your .htaccess file is in the root folder of your WordPress installation. You can access your .htaccess file by using "File Manager" or an FTP client.
If for any reason you cannot see this file within the root folder of your WordPress website, then you would need to select "Show hidden files" within your file manager, or FTP client.
Note: Make sure that everytime you modify a file, that you have a backup of the original encase you stuff up the one your editing. Then you can always replace the file back to the original one.
Once you've done this, go over to Google Page Speed Insights & check out how much of a boost in speed you've got.
Browser Caching
You can leverage browser caching to make your webpages load a whole lot faster. By leveraging browser caching this will reduce the number of HTTP requests that your server needs to process, in turn this will reduce the time it takes for a page to load.
To leverage browser caching on your website, open up your .htaccess file again, and paste in the code below at the top of the file.
Once having added this to your .htaccess file, check out Page Speed Insights again.
Serverside Caching
To enable serverside caching, you can install and use the plugin W3 Total Cache or WP Super Cache.
My own personal preference is to always use WP Super Cache, but both plugins are much of muchness. However W3 Total Cache does have some more advanced options that you can play around with, and it also allows you to minify HTML, CSS & JS.
Below I'll show you how I configure WP Super Cache.
First install and activate the plugin WP Super Cache through the WordPress plugin repository. Next head on over to where it's located in Settings ->WP Super Cache.
Once your in there the first thing you'll need to do in the Easy tab is turn Caching On.
Next up head over to the Advanced tab. Below I've listed a few options which I recommend you enable - Note that this is how I always set up WP Super Cache based on personal preference.
Caching
Miscellaneous
Advanced
Expiry Time & Garbage Collection:
Once having set up and configured WP Super Cache head over to Google Page Speed Insights and check out your score.
HTML, CSS & JS Minification
Minifying HTML, CSS & JS files refers to removing unnecessary data that doesn't affect how the page is processed by your browser.
As your website contains a lot of files that a browser has to load including your HTML, CSS and JS, you want this code to be clean and as fast as possible. With code including extra white space, comments and formatting that browsers don't need in order to process a webpage - we can solve this by minifying it.
Before You Do This
Make sure that you have taken a Manual Backup of Your WordPress Website. Although you can just untick a checkbox and it will remove minification - I never like to risk screwing up my website when playing around with code minification plugins.
Now when we minify HTML, CSS and JS - I recommend minifying first your HTML, then your CSS, and then your JS. And after having enabled each one, going through your website and testing everything to make sure that nothing has broken.
From my experience having done this on quite a lot of website I have found that more times than not, minifying Javascript will tend to break something here or there. So you will need to test contact forms, and anything that uses Javascript once having enabled this.
For example I enabled minification on our website AnBeyond, but the HTML, CSS and JS minification didn't work with this particular website and it happened to break a couple of things. So I simply just turned off the minification settings and deleted the plugin, which you can do too if something doesn't work with your website.
Remember that this is going to vary for each person's different website, so with things like this you will need to have a play around and see what works best with your own website.
WordPress Minification Plugins
As I mentioned before when we went through Caching plugins, that W3 Total Cache offers a few options to be able to minify your websites HTML, CSS and JS. So if you are using them as your caching plugin, then I'd also recommend giving their options to minify the code on your website a shot.
Alternatively if you went through and used WP Total Cache like I do. Then to minify the code on your website I'd go with a plugin called Autoptimize.
This plugin is very self explanatory - once having Installed & Activated it. Head on over to it in Settings ->Autoptimize and turn on minification for HTML, CSS & JS one by one.
Remember to test your website once having enabled these settings to make sure everything is fine. If something has broken no dramas, just head back into the plugin and disable the settings.
Remove Render Blocking CSS & JS
Render blocking CSS & JS are resources that need to be loaded before your browser can begin loading other resources that it needs to display the page. So by moving CSS/JS files to the bottom of each page, these files will not need to be loaded first before a browser can load above-the-fold content.
I know there's lots of people out there looking on how to do this as there aren't too many solutions out there that work for everyone, however I've found a plugin.
Now keep in mind that I have only used this plugin a couple of times. And the plugin works, it's great, but it didn't work too well with my particular websites because of some additional plugins that I'm using. So I decided to disable it but I do highly recommend this plugin to solve this issue.
The plugin is called Speed Booster Pack. Props to the guy that made this plugin, I'm sure there's a few of these plugins out there, but this is the first one that I have used which actually removed that annoying notification "Remove Render Blocking CSS & JS Resources" from Google Page Speed Insights.
So if you've been looking to move all of your websites scripts and CSS to the bottom of the page then this is your plugin - I'll show you how to configure it below.
First up Install & Activate the plugin "Speed Booster Pack" from the WordPress plugin repository.
Next head over to Settings ->Speed Booster Pack
Remove Render Blocking JS
Tick the following options and save changes:
Remove Render Blocking CSS
Click on "Still need more speed?" and check the following options:
Once you have done this make sure that you thoroughly check through your website again to make sure that everything performs as usual and nothing has broken. In the case that something on your website does not work, or look like it should, then you will need to disable either the CSS or JS options in the Speed Booster Plugin.
Content Delivery Network
Using a content delivery network (CDN) means that your websites files will be stored at many different locations around the world. So if someone is loading your website from the United States, they will be able to retrieve your websites file from the closest server to them. As opposed to having to travel across oceans to load your websites files, if your server was originally located in Australia as an example.
A lot of WordPress users tend to use either Cloudflare or MaxCDN.
I have only ever used Cloudflare personally, so I cannot comment on MaxCDN. But I have always liked Cloudflare, the ease of setup, and the free option they also provide.
I'd recommend checking out Cloudflare if your looking for a CDN, using their free option and seeing if you would like to upgrade from there.
Website Hosting
I can't tell you how important this is, and I know this because I have been with a lot of different hosts - some were fast, some were slow.
When you check Google's Page Speed Insights, and it tells you that your Server Response Time was 2+ seconds, this tells you that your probably used shared hosting, and your host sucks.
Now I know this is harsh to the ears, but you are honestly not going to get a server that responds "Bang Bang" to each users request, when you pay $5 a month for GoDaddy hosting. Lol.
Who To Host With?
If you want fast hosting, and a server response time that is on point all-day-long then you need to get yourself a VPS. Below I've broken down who I recommend to go with for Normal Hosting and also VPS Hosting.
Shared Hosting
Hosting costs money, and if you're looking for a cheaper host, that provides value beyond the rest, then I always recommend Dreamhost (my personal preference for shared hosting).
VPS Hosting
If your looking to get serious, and want a Server Response time that doesn't skip a beat, then you need to get a VPS.
I host all of my own websites on a VPS from Knownhost and can't recommend anyone else. I actually don't think I will ever change my VPS - and their online reviews say it all which is why I originally signed up with Knownhost.
If you want a VPS, by all means do your research first. But check out Knownhost, and have a look at their reviews online, it would be hard to find a bad one! And after having hosted with them for a while now, I can see why.
Thats A Wrap
I hope that this guide has helped you to be able to speed up your WordPress website immensely. I'd love to know your results & if you need any help, leave me a message and I'll get back to you.
If you would like to increase your Google Page Speed Insights score by 30+/- or so points this guide will show you everything to do that.
Also just to mention, I have done this on 100+ websites, I do this on all of my own websites, and my clients websites too.
Please Read: I will probably mention this several more times throughout the post but: When you are doing things to speed up a website, particularly modifying files, or playing around with minification plugins you will almost certainly break your website in some way. So remember to always take a backup of a file if you are going to edit it. Also with plugins remember that by disabling a plugin, this will remove the changes that it's made (minification plugins, in most cases).
I'm also not going to begin this post ranting on about why site speed is important, or tell you what % of website visitors you will lose if your website doesn't load in under 2.3759 seconds. We all know how important site speed is.
This post has taken a god-dam long time to write, and is a guide intended to help fellow warriors. So with that, let the fun commerce...
What We'll Cover To Speedup Your Website
- Image Size & Compression
- GZIP Compression
- Browser Caching
- Serverside Caching
- HTML, CSS, JS Minification
- Remove Render Blocking CSS/JS
- Content Delivery Network
- Hosting (IMPORTANT!)
Important Note: Before we begin, it's important that you take a Manual Backup of Your WordPress Website, so that you can restore it in the rare case that something does not work on your website. Also remember good habits, that before you edit any file to always make a backup of it, so that you can restore that file encase you stuff up the one your editing.
Image Size & Compression
Without a doubt, images are the heaviest resource for your browser to load. And if you started off building websites like me, you were uploading background images that were 5MB plus and had no clue!
Have you ever loaded a website, and watched a background image load little bit by little bit down the page? Well that's because the image is way to large.
So what size should background images be, and also what filesize & filetype should they be? Below are a few rules which I swear by, and recommend you stick too as well.
Background Images
- Background images are always JPG's, not PNG's unless they need to be transparent.
- Background images are 1920px wide at max, and no more.
- No background image should have a filesize of more than 300KB (0.3MB).
All Other Images
- All images are always JPG's, not PNG's unless they need to be transparent.
- All images are compressed to reduce filesize (without reducing quality).
An Example of This
I've taken a free stock image from Google of some mountains that you see below. I'm also having a look at the "Properties" of this image and can see that it is 6.39MB and that it's also 4288px wide - that's huge!
So let's say I didn't know what I was doing, and I grabbed this image, uploaded it to my website and bam, though I was done. Rookie mistake! Because now my page will load 10x slower.
So there are 3 things we need to do:
- Make sure the image is saved as a JPG, as this will carry a lot less size than a PNG file (none of this image needs to be transparent).
- Resize the image down from 4288px in width, to 1800px.
- Compress the image in Photoshop, and then also with an online image compressor.
Resize Image in Photoshop & Save as JPG
You can resize an image online by doing a Google search for "resize image online" and using an online tool. However below I'll show you how I do this in Photoshop.
Head to Image > Image Size and resize your images width if needed. Now when you go to save your file, make sure it's saved as a JPG and also adjust the Image Quality as shown below before you save it. Sometimes the image quality will set by default to be "Maximum - 12", but you can set this to "High - 8" and there will be zero noticeable difference in quality of your image.
Now Compress Online
This has already taken my image down to 261KB, but I want to squeeze out a little more. So use an online image compressor to further reduce the filesize, I would recommend TinyJPG or TinyPNG depending on your images filetype.
The Results
After having done all of this I have a super small file-sized background image that has lost practically zero quality. This background image has been reduced down to 178KB, which is 36 times smaller than the original image which was 6.39MB, with no image quality loss. MASSIVE!
Compression Alternatives
When it comes to compressing images you could also use a plugin to do this for you, if you'd like to use a plugin I recommend using WP Smush.
Or you could also place the following code in your functions.php which is located in your themes folder:
Code:
add_filter( 'jpeg_quality', create_function('', 'return 50;' ) ); If you decide to add in this code in, you will need to regenerate your thumbnails, for that you could use the plugin Force Regenerate Thumbnails.
Keep in mind that the value 50, stands for 50%. So if you would like a better compression rate, or a better quality of your image, then you can modify that number in the code above and regenerate your thumbnails.
GZIP Compression
By enabling GZIP compression, this will compress your HTML/CSS and allow your web server to provide smaller file sizes that load faster for your websites users. Compression of HTML and CSS generally saves around 60% of file size ultimately improving your pages load speed, and reducing bandwidth usage.
To enable GZIP compression, you can place the code below inside your .htaccess file:
Code:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/opentype # For Olders Browsers Which Can't Handle Compression BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule>
If for any reason you cannot see this file within the root folder of your WordPress website, then you would need to select "Show hidden files" within your file manager, or FTP client.
Note: Make sure that everytime you modify a file, that you have a backup of the original encase you stuff up the one your editing. Then you can always replace the file back to the original one.
Once you've done this, go over to Google Page Speed Insights & check out how much of a boost in speed you've got.
Browser Caching
You can leverage browser caching to make your webpages load a whole lot faster. By leveraging browser caching this will reduce the number of HTTP requests that your server needs to process, in turn this will reduce the time it takes for a page to load.
To leverage browser caching on your website, open up your .htaccess file again, and paste in the code below at the top of the file.
Code:
## 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 ##
Serverside Caching
To enable serverside caching, you can install and use the plugin W3 Total Cache or WP Super Cache.
My own personal preference is to always use WP Super Cache, but both plugins are much of muchness. However W3 Total Cache does have some more advanced options that you can play around with, and it also allows you to minify HTML, CSS & JS.
Below I'll show you how I configure WP Super Cache.
First install and activate the plugin WP Super Cache through the WordPress plugin repository. Next head on over to where it's located in Settings ->WP Super Cache.
Once your in there the first thing you'll need to do in the Easy tab is turn Caching On.
Next up head over to the Advanced tab. Below I've listed a few options which I recommend you enable - Note that this is how I always set up WP Super Cache based on personal preference.
Caching
- Cache hits to this website for quick access. (Recommended)
- Use PHP to serve cache files.
Miscellaneous
- Compress pages so they're served more quickly to visitors. (Recommended)
- 304 Not Modified browser caching. Indicate when a page has not been modified since last requested.(Recommended)
- Don't cache pages for known users. (Recommended)
- Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated. (Recommended)
Advanced
- Mobile device support. (External plugin or theme required. See the FAQ for further details.)
- Clear all cache files when a post or page is published or updated.
- Only refresh current page when comments made.
- List the newest cached pages on this page.
Expiry Time & Garbage Collection:
- Cache Timeout: 0 seconds
- Clock: 00:00 HH:MM
- Interval: Once Daily
Once having set up and configured WP Super Cache head over to Google Page Speed Insights and check out your score.
HTML, CSS & JS Minification
Minifying HTML, CSS & JS files refers to removing unnecessary data that doesn't affect how the page is processed by your browser.
As your website contains a lot of files that a browser has to load including your HTML, CSS and JS, you want this code to be clean and as fast as possible. With code including extra white space, comments and formatting that browsers don't need in order to process a webpage - we can solve this by minifying it.
Before You Do This
Make sure that you have taken a Manual Backup of Your WordPress Website. Although you can just untick a checkbox and it will remove minification - I never like to risk screwing up my website when playing around with code minification plugins.
Now when we minify HTML, CSS and JS - I recommend minifying first your HTML, then your CSS, and then your JS. And after having enabled each one, going through your website and testing everything to make sure that nothing has broken.
From my experience having done this on quite a lot of website I have found that more times than not, minifying Javascript will tend to break something here or there. So you will need to test contact forms, and anything that uses Javascript once having enabled this.
For example I enabled minification on our website AnBeyond, but the HTML, CSS and JS minification didn't work with this particular website and it happened to break a couple of things. So I simply just turned off the minification settings and deleted the plugin, which you can do too if something doesn't work with your website.
Remember that this is going to vary for each person's different website, so with things like this you will need to have a play around and see what works best with your own website.
WordPress Minification Plugins
As I mentioned before when we went through Caching plugins, that W3 Total Cache offers a few options to be able to minify your websites HTML, CSS and JS. So if you are using them as your caching plugin, then I'd also recommend giving their options to minify the code on your website a shot.
Alternatively if you went through and used WP Total Cache like I do. Then to minify the code on your website I'd go with a plugin called Autoptimize.
This plugin is very self explanatory - once having Installed & Activated it. Head on over to it in Settings ->Autoptimize and turn on minification for HTML, CSS & JS one by one.
Remember to test your website once having enabled these settings to make sure everything is fine. If something has broken no dramas, just head back into the plugin and disable the settings.
Remove Render Blocking CSS & JS
Render blocking CSS & JS are resources that need to be loaded before your browser can begin loading other resources that it needs to display the page. So by moving CSS/JS files to the bottom of each page, these files will not need to be loaded first before a browser can load above-the-fold content.
I know there's lots of people out there looking on how to do this as there aren't too many solutions out there that work for everyone, however I've found a plugin.
Now keep in mind that I have only used this plugin a couple of times. And the plugin works, it's great, but it didn't work too well with my particular websites because of some additional plugins that I'm using. So I decided to disable it but I do highly recommend this plugin to solve this issue.
The plugin is called Speed Booster Pack. Props to the guy that made this plugin, I'm sure there's a few of these plugins out there, but this is the first one that I have used which actually removed that annoying notification "Remove Render Blocking CSS & JS Resources" from Google Page Speed Insights.
So if you've been looking to move all of your websites scripts and CSS to the bottom of the page then this is your plugin - I'll show you how to configure it below.
First up Install & Activate the plugin "Speed Booster Pack" from the WordPress plugin repository.
Next head over to Settings ->Speed Booster Pack
Remove Render Blocking JS
Tick the following options and save changes:
- Move scripts to the footer
- Defer parsing of javascript files
Remove Render Blocking CSS
Click on "Still need more speed?" and check the following options:
- Load CSS asynchronously
- Insert all CSS styles inline to the footer
Once you have done this make sure that you thoroughly check through your website again to make sure that everything performs as usual and nothing has broken. In the case that something on your website does not work, or look like it should, then you will need to disable either the CSS or JS options in the Speed Booster Plugin.
Content Delivery Network
Using a content delivery network (CDN) means that your websites files will be stored at many different locations around the world. So if someone is loading your website from the United States, they will be able to retrieve your websites file from the closest server to them. As opposed to having to travel across oceans to load your websites files, if your server was originally located in Australia as an example.
A lot of WordPress users tend to use either Cloudflare or MaxCDN.
I have only ever used Cloudflare personally, so I cannot comment on MaxCDN. But I have always liked Cloudflare, the ease of setup, and the free option they also provide.
I'd recommend checking out Cloudflare if your looking for a CDN, using their free option and seeing if you would like to upgrade from there.
Website Hosting
I can't tell you how important this is, and I know this because I have been with a lot of different hosts - some were fast, some were slow.
When you check Google's Page Speed Insights, and it tells you that your Server Response Time was 2+ seconds, this tells you that your probably used shared hosting, and your host sucks.
Now I know this is harsh to the ears, but you are honestly not going to get a server that responds "Bang Bang" to each users request, when you pay $5 a month for GoDaddy hosting. Lol.
Who To Host With?
If you want fast hosting, and a server response time that is on point all-day-long then you need to get yourself a VPS. Below I've broken down who I recommend to go with for Normal Hosting and also VPS Hosting.
Shared Hosting
Hosting costs money, and if you're looking for a cheaper host, that provides value beyond the rest, then I always recommend Dreamhost (my personal preference for shared hosting).
VPS Hosting
If your looking to get serious, and want a Server Response time that doesn't skip a beat, then you need to get a VPS.
I host all of my own websites on a VPS from Knownhost and can't recommend anyone else. I actually don't think I will ever change my VPS - and their online reviews say it all which is why I originally signed up with Knownhost.
If you want a VPS, by all means do your research first. But check out Knownhost, and have a look at their reviews online, it would be hard to find a bad one! And after having hosted with them for a while now, I can see why.
Thats A Wrap
I hope that this guide has helped you to be able to speed up your WordPress website immensely. I'd love to know your results & if you need any help, leave me a message and I'll get back to you.