A website that doesn’t load in less than 3 seconds is prone to lose visitors.
When I first read this statement in one of the Google Survey reports, I was amazed. It means you have to make your website so fast that it should load immediately as the user clicks on it otherwise your website is prone to lose potential visitor or sometimes potential clients.
Also, Google ranks websites on the basis of their load time as it is a major concern from their side as well.
The website which does not load fast has many drawbacks. I will share my personal experience with you in this article. This article focuses on how to Speedup WordPress Website for better Google Pagespeed Insight.
Table of Contents
Drawbacks of having a slow website
A slow website is inversely proportional to the number of website visitors and directly proportional to a bad user experience.
Just try to think from a user’s perspective, would you wait for more than 5 seconds for a website to load or you simply navigate to another website which that gives you similar content but is much more faster.
Obviously, we would choose the latter option. Even if your content is better than the second website, the user will choose to leave you because your website failed to load in time. We would never want something like this to happen.
Another drawback comes from Google’s side. Even though you have a pretty decent content overall but if your website performance is poor then Google will demote your website rank for that. Your dream to appear on the first page of google will never be fulfilled. Sad 🙁
The third drawback will make you lose your potential clients. Your client is your source of income. You would never want to lose a potential client because of a slow page load speed. That is pretty frustrating don’t you think.
There are a lot of other reasons that can affect you adversely and a whole different article could be written on just the drawbacks of a slow website. That would be one hell of a negative article :p
Steps to SpeedUp WordPress Website
It is not hard to speed up your website. It is just the matters of hours depending on the level and complexity of your website and its contents. Let’s try to speed up your website. Follow the below steps to speed up your website.
#1 Find the cause of slowness
Very important step in the process of speeding up your website. You need to first identify all the causes that is slowing down your website. Doesn’t it sound like a tough analytical job? Hell Yeah! It is tough. You cannot get everything for granted. You will have to invest time in investigation. Be a CID for a day and find out the root cause.
But wait, we can also use tools to make our job easy and this article is all about that. You can use google’s page insight tool to find the score for your website. Page insight tests your website against the best practices that must follow in order to speedup your website’s performance. Below are the benchmarks against which you can test your website,
As you can see that bemyaficionado has passed all the 7 rules that we are focusing on this article. It is a pretty decent score in google pagespeed. So, if you follow the article to the end, you might as well get the same or better score at the end. If you do get better result then mine, do share your website in the comment box below.
Great we have everything that addressed for us. Now all we need is a way to achieve what is asked for.
#2 Identify Above the Fold Content
Google gives a lot of weight for above the fold optimization. Above the fold is the first view of your website without scrolling down. The very first thing that the user will see after landing on your webpage. You must give special preference for above the fold content. For that you need to identify the js and css which are required by above the fold content. Below is Above the fold view for BMA?on mobile devices,
?
There best way to optimize above the fold content is to inline both HTML and CSS for that part. Mostly it is not the js but CSS. So, try to make the CSS inline. Autoptimize ?does that for you in just a matter of seconds. But, the recognition part depends on you.
#3 Minify HTML, CSS, JS
This is one of the major cause of slowness on your website. Often times the assets files are not minified. As a result, the server has to wait till these files are loaded, thus, adding to the overall load time of the webpage. I use a plugin for this purpose. Autoptimize plugin is the best plugin I found for this purpose. It compresses all your HTML, CSS and js files on the go. Immediately after installing this plugin to my website with minor adjustments, all my files were minified. I ran a page insights speed test again and it was passed.
I use below settings for my website,
Note- Autoptimize cannot compress external files (files hosted on 3rd party server).
If you run a speed test on my website, you will not find any asset files that are not minified. It passes all the test. Although, the website shows poor marks on speed test because I have multiple plugins which load their dependencies from 3rd party servers. You will have to do a lot of tweaking in order to optimize 3rd party contents. Also, it doesn’t affect the load time for my website as those resources are loaded asynchronously. So, I chose not to do anything for the time being.
#4 Optimize Images
It is one of the most useful steps in the process. Your images must be of the right size. If you intend to render an image at 1024×640 then the image must be saved in that size. The image must not be greater than the required pixel. If you are using CSS to resize the image to fit in the div then that is not optimization. You must render the image of the same size. So, make sure you upload the image in the required pixel.
WordPress gives you the option to resize images in three different sizes found under settings > media. You can give the desired size you wish to render the images on your website. I use below settings,
I render images in one of the above sizes. Thumbnail, medium or large. You can change these size anytime.
Also, you must compress your images before uploading it to your servers. There are multiple websites that can make your task easy. One of the best websites is Tinyng.com. It will compress your images to the best without losing quality. I have saved more than 78% on many images and that is like a lot. Also, if you can upload images in the .webp then do it. It is web friendly URL as compared to jpeg.
I also use wp smush.it ?plugin which comes for free and does a great work. You have the option to automatically compress the images at the time of upload. It will save a lot of kbs for you and make your images optimized.
#5 Enable GZIP Compression
This requires little bit of technical expertise. First of all this is not limited with the WordPress. GZIP compression is done at the server end. So, it will work for any website hosted on that particular server. If you have access to your .htaccess file which in most cases you will have. Then you must open that file in the edit mode and check follow the instructions below.
Note – Make sure you make a copy of that .htaccess file.
- Open .htaccess file in edit mode
- Copy and paste the below code right below your current content.
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
- Save the file
- Open your website and check if everything’s working as expected.
- Check whether GZIP has been enabled successfully from the following link https://checkgzipcompression.com/
That is all you need to do in order to gzip all your files. If you need more information on GZIP compression then I have a wonderful article for you. Read How to Enable GZIP Compression in WordPress.?
#6 Leverage Browser Caching
Yet another server side thing. You can do it in the same way you did GZIP compression. Just copy the below code into your .htaccess file and you are good to go.
## 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 ##
In most cases the above code is sufficient. If you want to have more control over each and every part of the caching then follow this article https://varvy.com/pagespeed/leverage-browser-caching.html.
You will be good to go with the above settings.
#7 Server Response Time
Your server response time could be affected due to so many reasons which is hard to find with a metric tool. But, there are best practices and guidelines that we can follow to avoid common causes. There are a few reason for slow server response –
- High resource consumption
This could be one issue which can slow your server performance. There are chances that you are using way too many plugins and all are consuming server resources heavily, thus, cause the servers to respond slow. If you are using heavy plugins or multiple plugins that perform heavy calculation before rendering the page then your server might respond slowly in that case. A very simple solution for this type of problem is ‘Caching’.Cache helps in improving server speed by bypassing all the heavy calculations required to render a page. Cache keeps a copy of the rendered page in a server. Whenever user requests for that page which is cached, the cached page is directly returned to the user thus saving heavy calculation and database calls. This significantly improves website performance. ‘W3 Total Cache’?is my personal favourite free plugin used for caching. The only drawback of this plugin is that it requires proper configuration. Do try it and see the significant difference in your server response. - Use of Shared Hosting or Slow hosting
This is usually the factor for slow response time. Shared hosting is never good for the commercial website. Especially the website which generates revenue from traffic. Learn about different types of hosting to get a better idea. The best hosting providers are Dreamhost and if you are a geeky guy (like me) then Digital Ocean. I personally prefer Digital Ocean but if you want a hassle free hosting then I recommend dream host to. Find the link for both the hosting services below for pricing,– Dreamhost Hosting,
– DigitalOcean – Get 10$ credit on signup
If W3 Total Cache doesn’t solve your problem then you must look for a better hosting provider. I strongly recommend Dreamhost and DigitalOcean because of their pricing, performance and service.
Run a page insight test one more time and see the difference. The above settings are sufficient to get a good score in google page insights. Just understand that these settings are for the files hosted on your own server and not any third party server. If the files are being fetched from the third party server then you will have to tweak a lot of things in order to customize it. So, if the results on page insights are not good, make sure the warnings does not contain any file that is hosted under your domain.
I’m pretty sure that you will not find any warning for the files hosted on your server. If you have achieved positive results then comment your website name below. ?I would love to hear from you. Let me know what extra do you do to optimize your website. And one final thing – Do not forget to share this article 🙂
You might find this useful,