Did you know that your website speed will affect your traffic, the bounce rate of your site and that it will also affect your Google rankings? In today’s tutorial I will share with you a few pointers on how to improve the speed of your website. I will show you how to reduce your page load time by leveraging browser caching and enabling gzip compression.
I thought all was well with my site, until recently. In my recent report from Google Adsense I found a note that my site health is really lacking. So I did a website speed test and to my surprise the page load time became quite high. I had to do something about it fast. I did a lot of research on how to reduce website speed, as well as I explored the options that were suggested to me by the page speed testing sites. Leveraging browser caching and gzip compression (or lack of them) were a few of the major culprits that contributed to my relatively high page load time
How fast your blog and blog pages load is very important. Visitors to your website have a short attention span. They hate to wait for images, videos and text to load. Most visitors will not tolerate more than 5 seconds of loading time and they will be quick to press the exit button if the loading takes longer. This speedy exit will contribute to a high exit rate (bounce rate), a real no-no in the eyes of Google.
Not only you lose visitors, you lose potential sales. Low website load speed is a vital aspect of creating a pleasant user experience to the reader of your blog and it ensures that the visitor’s short attention span is directed to the content rather than loading of the pages.
3 Steps To Improve Website Speed or Page Load Time Of Your Blog
When I received the report about the poor health of my site I first checked Google recommended source Page Speed Insights. There, I was able to see my site’s performance on both mobile and desktop. The results were awful as you can see on the image below. A few suggestions were made.
Image 1. Website Speed / Page Load Time Of My Blog
The red circles with the exclamation marks mean F A I L E D . I also checked my site in GTmetrix and of course the story was just as dismal there. My site was failing miserably.
I knew, that with some research I could fix at least some of the issues right away. The simplest ones were
- Leveraging browser caching
- Enabling compression
- A few more tweaks
To save you time (it really took me a long time to figure it all out) I am going to show you how I did it.
How To Leverage Browser Caching To Improve Website Speed
To leverage browser caching you need to edit your HTTP headers to set expiry dates on certain types of files. I know it sounds extremely complicated and geeky, but luckily it is not as complicated as it sounds.
You can set the caching parameters in the .htaccess file of your domain. All you have to do is add the following code to your .htaccess file in its entirety. Copy the code right from the first hash tag to the last hash tag. It is very simple! Right below the code I’ll include the easy steps to do it. (I would copy this code first to notepad and then copy it from notepad to your .htaccess file.)
## EXPIRES CACHING ##
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
## EXPIRES CACHING ##
How To Add The Caching Parameters To Your .htaccess File
- Open your File Manager (access it from your cpanel of your web host)
- Find your domain and click on it
- Among the files of your domain find a file called .htaccess
- Highlight the .htaccess file and right click on it
- In the dropdown menu select Edit
- In the .htaccess file add the code right to the top of the file
- Add a space after the code and save.
Note! Make sure to either make a backup of your original .htaccess file and name it .htaccessbackup or if you don’t want to create a backup, at least copy the contents of the file to notepad.
Image 2. Accessing .htaccess File
Typically your .htaccess file will have very little in it unless there is some information there from one of your plugins. In the image below, all that is in the .htaccess file is the WordPress information. Add the code you copied right at the top above the WordPress information. After you add the code make sure to leave a space before # BEGIN WordPress.
Image 3. Adding Caching Parameters To .htaccess File
How To Enable Gzip Compression
When you enable gzip compression you reduce the size of files that are sent from your server to a browser. The reduction is significant and it is typically 70%. You can learn more about gzip here.
Copy the gzip compression code below to your .htaccess file. I the case of my site I placed the code above the caching parameters, leaving a space between the two. Follow exactly the same instruction as I provided you for the caching parameters. Actually you can add both codes at the same time. Always make sure to leave a space between the different additions. Make sure you copy the whole code including the hash tag (#) at the beginning.
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
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0 no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Please note, that you do not have to add the gzip compression script if the Page Speed Analysis report does not require you to do so.
Some of the website speed problems were related to a few of the plugins I use and some of the page load time problems were related to my theme. Couple of my favorite plugins was a major cause of the blog speed issue. So I deleted the plugins in question and this definitely helped. Unfortunately the problem that related to my theme I could not solve and the developers of my theme did not think it was much of an issue.
If you are not a techie person, check the suggestions for this issue and get rid of the plugins that may be causing you the problem. This will solve the issue at least partially.
The last thing I did was to optimize images. Because it is a rather lengthy subject I published the information on another post on optimizing images.
The work I did helped to reduce the website speed and page load time, tremendously. The speed of my blog greatly improved and I got a seal of approval from the Google. You can see the difference in the last image below:
Image 4. Improved Website Speed and Page Load Time For My Blog
In summary, in this post I showed you the steps I took to improve my website speed and to reduce the page load time of my blog. I did not show you how to optimize images in this post, but I wrote a separate post on optimizing images and you can access it here…
As you can see, my website speed greatly improved on both mobile and desktop. Hopefully this information was helpful to you too and you can improve the speed of your website or blog with the steps I provided you with. I’d love to hear from you, so please leave a comment.