There is no doubt that speed is one of the key factors used by Google algorithm to rank websites. Studies show that 30% of the people of all visitors leave the website if they don’t see any content within 4 to 6 seconds. The percentage tends to increase drastically with the increase of each second. Apart from SEO perspective, website page load speed helps to retain your visitors that would eventually become customers and subscribers and hence, increase conversion.
In this article, I will share how you can optimize and speed up your WordPress website’s or blog’s page load speed to increase your score on gtmetrix and Google’s PageSpeed Insights. So let’s begin:
Speed Up WordPress Begins
First things first, and I will not repeat myself so please read it very carefully: If you have a slow web hosting or you are using a shared hosting plan and have installed a lot of websites, then I am afraid, even Chuck Norris cannot increase your Website Speed.
I have used a lot of web hosting services and found nearly all the web hosts with shared plans have slower loading time. However, in case of DreamHost and Siteground, I found a better page load speed even on their shared hosting plans.
Check for Slow Plugins:
If your WordPress website has a lot of plugins installed and active then it’s most likely to have a slow page load speed. So open your dashboard and go to you plugins page. Analyze the list of active plugins and deactivate the one that you feel is unnecessary. If a certain task can be achieved without the use of a plugin then you must not waste your server resources by running a whole plugin for it. For example, you can display Facebook Like Box with simple Iframes or your theme has an in-built feature to do the same task then do not install a plugin separately.
Sometimes you have a limited number of plugins but you still face a very slow load time then there is a possibility that some plugin might be hogging your server’s resources. You may not realize which plugin is the culprit so in order to find it, WordPress repository has a very cool plugin (the irony). P3 – Plugin Performance Profiler creates a profile of your WordPress site’s plugins’ performance by measuring their impact on the site’s load time.
Using this tool find plugins that are using a lot of load time and remove them or find a faster alternative. Also, note that this plugin may show your cache plugin using a lot of load time. That’s generally fine because it is doing other important tasks to increase overall page speed.
Leverage Browser Caching
Whenever someone visits your website the internet browser downloads the site’s assets such as HTML, JavaScript, CSS and images into the local cache. Now when that person visits your website again, the browser wouldn’t have to download these files again and it will retrieve them from local cache. However, the browser doesn’t store these files for long. If you test your website on Google’s PageSpeed Insights, you might get a warning like below:
We will leverage this browser caching feature to increase our overall user experience. Leveraging browser caching means setting an expiry date or a maximum age in the HTTP headers for static resources instructing the browser to load previously downloaded resources from local disk rather than over the network.
There are two general methods which are used while setting up cache: Cache Control Headers and Cache Expire Headers. The cache-control header enables client-side caching and sets maximum age of an asset. Cache Expire Header defines the expiring time the asset becomes invalid.
I know all these things sound a bit tech savvy but you don’t have to worry as the steps to achieve this task are pretty simple and straight-forward.
First of all you need to find out whether your website is hosted on Apache server of Nginx server. If you are not sure you can ask your hosting provider.
Leverage Cache in Apache
Open your root folder using your hosting panel’s FTP or FTP client like FileZilla and open .htaccess file.
Adding Cache Control Headers
Add the following lines to your .htaccess file to add Cache-Control headers.
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”
</filesMatch>
Adding Expires Headers
Add the following lines to your .htaccess file to add Expires headers.
# EXPIRES HEADER 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 application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
# EXPIRES HEADER CACHING #
Leverage Cache in Nginx
To add cache-control and expires headers in Nginx you’ll need to edit Nginx config file.
Adding cache-control headers
Add the following code to add cache-control headers into your server’s config file:
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control “public, no-transform”;
}
Adding expires headers
Add the following code to add expires headers into your server’s config file.
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
Image Compression
Did you know? Amazon found that if their pages slow down by 1 second, they lose $1.6 billion a year. With a site that big with billions of images and millions of daily visitors, it is important to store images in compressed form. God bless WordPress community that we have so many awesome plugins.
We will use EWWW Image Optimizer to compress all our images. This plugin automatically optimize images as you upload them to your site. It can also compress the ones that are already uploaded and convert them to different file formats with smallest sizes. The plugin uses some great compression tools such as jpegtran, TinyJPG and TinyPNG.
Please note that if you are on a cloud hosting plan then you must use this plugin’s cloud version.
After installing the plugin go to Media -> Bulk Optimize as shown in the image below:
Check Force re-optimize and set the time to pause the compression between images. I usually set 2-3 seconds when I have less number of images.
Now that your images are optimized let’s check out some caching plugins.
WordPress Caching Plugins
Nobody likes the slow website, trust me. Having an effective cache plugin can help you improve your website speed to 5 times. There are many awesome caching plugins in WordPress repository. My 2 favorites are W3 Total Cache and WP Super Cache. They both have 1+ million active installs and are widely used by WordPress community. I will suggest W3 Total Cache plugin as it has ability to minify CSS and JS files to improve speed.
See W3 Total Cache in Action
Conclusion:
If you have followed all the above methods then you will definitely experience an increase in speed. Remember that these web performance tools are there just for guidelines and I wouldn’t recommend obsessing over the scores too much. However, following these guidelines will usually result in faster WordPress website.