Website speed is a sensitive topic these days. We don’t like to wait and when a website takes too long to load, we immediately leave it for a better option. This can have repercussions in other areas, from fewer sales, to lower positions in search results.
If you want to speed up your WordPress website, there are some things you can do. We will go through them, one by one.
- Choose a good host
- Optimize all your images
- Use lazy loading for the images and videos
- Enable cache
- Enable gzip compression
- Optimize the database
- Replace slow plugins
- Disable pingbacks, trackbacks and other stuff not used
- Disable hotlinking
- Minify javascript and css
- Use a CDN
But before going into details, let’s see why the speed of your WordPress website is important.
Why website loading speed is important
When you create a website, you probably have SEO (Search Engine Optimization) in mind. That means that you want to be in the top search results. The first 10 websites listed in Google get the most traffic and almost nobody looks on the second page.
As you might guessed, website speed is one of the top ranking factors for Google. This factor is correlated to the bounce rate (the percentage of people that leave your website, after looking at only one page).
A high bounce rate is not necessarily a bad thing, but it might mean that people did not find what they were looking for, they did not have patience for the website to load, or they found what they were looking for and left.
As you can see, by having a fast loading website, you can eliminate one of the causes of a high bounce rate.
How to measure the load speed of a WordPress website
A slow page load speed can be caused by several factors and, in order to optimize it, you first need to diagnose the website.
Let’s look at how you can measure the page load speed. There are several ways you can do it, and here are the most common ones:
A. Google PageSpeed Insights
As the name suggest, this is a service offered by Google. In order to use it, you need to input the website url and click the appropriate button.
Google will analyze your website and will generate a report. It will also grade the speed from 0 to 100, for both the desktop and mobile. Depending on the results, it will give some recommendations on how you can improve the score. We will talk about these actions later.
Another tool, offered by Google, is Test My Site. This will analyze the mobile version of your website and will generate a report.
We don’t rely very much on this tool and we use it mainly to get the server response time. The following tool gives a much complex and reliable report.
B. GTmetrix
GTmetrix is another website speed measuring tool. You can use it directly, but if you create a free account, you can change some settings, like browser, internet speed, location and some other cool stuff. It also saves a history of reports and you can compare between analyses. This can come in handy if you are doing some WordPress optimization, for example, and want to compare the effect of a particular change.
After your website is tested, you will receive a grade, from A to F, and a report, showing where you can do improvements. GTmetrix tests your website speed both on Google’s parameters (Google PageSpeed) and Yahoo’s (YSlow). Looking at the generated report, you can see the size of your page, the number of requests made and a waterfall, showing the order of these requests.
C. Pingdom
Another tool that will help you diagnose the loading speed of your website is Pingdom. This one is very easy to use, allowing you to test your site from 7 locations. After you run the test it will give you a performance grade and it will show you where to make speed improvements.
How to improve the speed of your WordPress website
Depending on the situation in which your website is, there are some actions you can perform, that will help you get a faster website.
1. Choose a good host
I don’t want to say that cheap means bad, but if you buy a cheap hosting plan, the performance expectations need to be adjusted. If the server, where you host your website, takes a lot to deliver the information, any other speed improvement might be for nothing.
We had all kind of experiences with different hosts and choosing a good one is very important. Take into consideration the customer support aspect as well, especially if you don’t have experience in using hosting platforms.
Another thing to consider is the location of the servers. If most of the users, visiting your website, come from a specific country, then, maybe, choosing a hosting provider with servers in that region might be a good idea.
2. Optimize all your images
This step is very important, because images take a lot of space and they will have a very big impact on the website speed. In some cases, this operation alone will have the biggest impact in increasing the speed of your WordPress website.
You can do this by using a software, like Photoshop, or one of the many free online tools. Or, you can use a plugin, that will optimize all your images in bulk and after each upload. Even if we optimize the images before uploading, we still use a plugin, called Imagify. The free version offers 25MB of images per month and, for a small website, it should be enough. If you don’t like this particular one, there are other options to choose from.
3. Use lazy loading for the images and videos
This is especially useful if you have many images on your website. Using this feature will load the images progressively, as you scroll down the page. Some themes have this feature built in (like Avada). If the theme you are using does not have such a feature, you can use a plugin.
If your content includes videos, then using lazy loading for them can be helpful. A plugin that can do that is this one. A more advanced approach would be to use thumbnails for the videos, which will start when the user clicks on them. A nice tutorial on how to do it can be found here.
4. Enable cache
Every time you visit a web page, all the information behind it (text, images, fonts, scripts etc.) is downloaded on your computer/phone. If cache is enabled, the second time you visit that page, the browser will pull that information from your computer/phone and it will be delivered much faster. If not, it will need to download it again, and it will take longer. This is a simple explanation of how cache works.
Should you enable the cache on your site? It depends. If the information on your site is static (it is updated from time to time), then yes, you probably should. If the content is dynamic (like on an online shop, with many orders), the situation is more complex and cache may not be a good option.
There are hosts that have caching implemented at server level and you don’t need to take any actions. If your host does not have this feature, you can choose one of the many available caching plugins. We usually go with WP Fastest Cache.
5. Enable gzip compression
When gzip is enabled on your server, the information in a page (HTML and CSS) is first compressed and then sent to the browser. This can reduce the size by up to 70% and makes the process much faster.
If you want to check if your website has gzip compression active, there are websites where you can input the url and it will check weather it is active or not.
To enable gzip compression on your WordPress website, you can use a caching plugin that has this feature (like WP Fastest Cache), or you can manually add some code to the .htaccess file (for Apache servers) or to the nginx.conf file (for Nginx servers).
This is the code for the .htaccess file and it needs to be added after the default text, present in the file:
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>And this is the code for the nginx.conf file:
gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;6. Optimize the database
The database is the place where all the information on your website (posts, pages, comments, settings etc.) is stored. As you develop your website, the database grows in size and might get cluttered.
For example, let’s say you install a plugin, but for some reason you decide to remove it. Even if you remove the plugin, some information is left in the database, in case you change your mind and want to install the plugin again. Or if you accidentally remove a plugin and don’t want to set it up again. There are some plugins that have a built in function to remove all information at removal, but most don’t.
Other things that might increase the size of the database are post revisions, trash and spam comments. By default, WordPress will keep an unlimited number of revisions for your pages or posts. To change this, you can add the following code to wp-config.php:
define( 'WP_POST_REVISIONS', X );Replace “x” with the number of revisions you want to keep.
You can optimize the database from your host, through phpMyAdmin, but it’s a bit harder. An easier way would be to use a plugin. There are many options and we like WP-Optimize, because it has the option to remove database tables that are no longer being used.
If you like to keep the plugin number to a minimum, you can install it (from time to time), optimize the database and then remove it.
7. Replace slow plugins
There are tons of plugins out there, that can help you obtain all kind of functionalities for your website. When installing a new plugin, on your WordPress website, you need to keep in mind that some plugins will slow it down. If you can avoid installing a new plugin, by adding few lines of code somewhere, I would recommend doing it. Analyzing the waterfall from the GTmetrix report, can help you identify the plugins that take the most time to load. Another way is by using Query Monitor.
For example, it is known that Contact form 7 is not the fastest contact form plugin. If you currently use it, you could try switching to a faster one, like Caldera forms. Also, avoid using 2 plugins that do the same thing. For example, if you are using Yoast, for SEO, you don’t need another plugin that creates a sitemap, because Yoast will do that for you.
8. Disable pingbacks, trackbacks and other stuff not used
I won’t go into details on what pingbacks and trackbacks are, but you can read about them here. If you don’t need these features, you can disable them.
Another WordPress feature that can consume server resources is the Heartbeat API. If you are the only person working in the back-end of the website all the time and you don’t have functionalities that need this active, you can disable it completely. The simple approach would be to use a plugin, like Heartbeat Control, or you can add some code to your functions.php file. The following code will disable heartbeat:
add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}There are other things you can tweak in the back-end of the website and we have found a nice plugin that helps you “play” with a lot of options, including post revisions, pingbacks, heartbeat and other stuff. It is called Clearfy.
One more thing: if you have plugins that you use from time to time, like the one for database optimization, for example, you can keep it disabled and activate it only once in a while, when you run the optimization.
9. Disable image hotlinking
Image hotlinking is a practice that can consume resources from your server and or can even increase your hosting bill. With this approach, people embed images from your site, using your actual links and not hosting the images on their servers. A sudden spike in the requests delivered to your server could even result in a suspension of your hosting account.
If you notice that someone is doing this, the fastest fix would be to rename those images. This way they will get a 404 error. However, it is better to prevent and one of the approaches would be to use a CDN (Content Delivery Network) that has a hotlink protection. A CDN is a network of servers that will store your information, in order to deliver it from the nearest point.
Another way to get protection would be to add some code to your .htaccess (Apache server) or configuration (Nginx server) file.
This needs to be added to the .htaccess file:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ http://dropbox.com/hotlink-placeholder.jpg [NC,R,L]And this code is for the nginx configuration file:
location ~ .(gif|png|jpeg|jpg|svg)$ {
valid_referers none blocked ~.google. ~.bing. ~.yahoo. yourdomain.com *.yourdomain.com;
if ($invalid_referer) {
return 403;
}
}Or you can use a plugin, like All In One WP Security & Firewall, that has this feature through the options.
10. Minify javascript and CSS
As the name implies, by minification, you reduce the size of your website’s javascript and CSS files. Having smaller files results in a faster website.
This can be achieved with a dedicated plugin (like Autoptimize for example) or with a caching plugin that has this feature built in.
11. Use a CDN (Content Delivery Network).
As I said before, a CDN is a network of servers that will store your website’s information across the globe. When a person visits your page from a particular region, the browser will receive data from the nearest server in the network. This way, the website loading speed will be faster. More than that, the CDN includes other cool features, like SSL, DDoS (Distributed Denial of Service) protection, hotlink protection etc.
If you have a small website, you can try Cloudflare’s free CDN plan. Setting it up is very simple, but keep in mind that you need access to the domain registrar, to point your domain to Cloudflare.
Most caching plugins (including the one we use – WP Fastest Cache) have a way to integrate Cloudflare and they will play nice together.
