improve website speed

Improve Your Website Speed – Leverage Browser Catching, Enable Gzip Compression

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

Need to reduce the speed of my blogThe 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

Leveraging browser caching is an important step because every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, javascript and images. Browser caching can help by storing some of these files locally in the user’s browser. The user’s first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally and so the load time is greatly reduced. (Source)

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.)

<IfModule mod_expires.c>
ExpiresActive On
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 text/x-javascript “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”

How To Add The Caching Parameters To Your .htaccess File

  1. Open your File Manager (access it from your cpanel of your web host)
  2. Find your domain and click on it
  3. Among the files of your domain find a file called .htaccess
  4. Highlight the .htaccess file and  right click on it
  5. In the dropdown menu select Edit
  6. In the .htaccess file add the code right to the top of the file
  7. 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

In htaccess file select Edit

 Select “Edit” From The Dropdown Menu

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

htaccess file instructions
►►►Don’t forget to save the entry.

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.

# compress text, HTML, JavaScript, CSS, and XML
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

# remove browser bugs
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

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.

Wp Total Cache caching plugin (which I did not have installed because it interfered with one of my favorite plugins) will do this for your blog and when you add the WP Total Cache to your blog you will not be required to add gzip script to your .htaccess file.

Eliminate Render-Blocking JavaScript and CSS In Above-The-Fold Content

With respect to the elimination of the render-blocking JavaScript and CSS above-the-fold content, I could not solve it all because it is beyond my technical ability. But I was able to help it a little. When I opened the suggestion for this problem (by clicking on the suggestion on the website speed test site) it showed me the culprits that were causing the problem.

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

Site spee after corrections

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.


ipro ad


, , , , , , , , ,

12 Responses to Improve Your Website Speed – Leverage Browser Catching, Enable Gzip Compression

  1. Kimsea Sok April 28, 2015 at 1:25 am #

    Thanks for sharing..! Honestly, slow loading speed is currently issued for my blog because my loading is really slow. I have find out some plugin such as W3 Total Cache, SupperCache, and All In speed pack plugin.

    However, those all above plugin to really make me satisfied with that because the loading speed is still slow down when I got more visitors.

    I found that the problem because my hosting service, I need to upgrade to WP hosting, or change to other hosting service.

    Thanks for sharing, this above is completely useful article for me.
    Kimsea Sok recently posted…6 Monster Blog Marketing Mistakes You Have to Stop ItMy Profile

  2. K Shazzad March 30, 2015 at 2:10 pm #

    Hello author,

    My site’s Page Speed Grade:(88%), YSlow Grade: (69%), Page load time: 4.44s, Total page size: 2.12MB, Total number of requests: 109 Tested on Gtmetrix as you suggested,

    Is this speed is good enough, or I can still do more plz sugges. I had improved it since site’s loading time was nearly 10sec+, with 220+ requests.

    K Shazzad recently posted…How to disable Comment on Blogger/Or specific postsMy Profile

    • Dita Irvine March 31, 2015 at 2:36 pm #

      Hi Shazzad. I cannot suggest anything to you because your platform is Blogger. There are many things you can do to improve the speed but Blogger is different. You really have no control over it. You have no option to add helpful plugins or do editing changes to your blog’s backend editor.

      Sorry Buddy, I suggest you change over to self hosted WP, especially if blogging is part of your online business. You may want to go to the tutorial on how to start a blog and read it and decide for yourself.

      Best of luck
      Dita Irvine recently posted…3 Simple Steps To Increase Productivity And ProfitabilityMy Profile

    • Dita Irvine March 31, 2015 at 2:36 pm #

      Hi Shazzad. I cannot suggest anything to you because your platform is Blogger. There are many things you can do to improve the speed but Blogger is different. You really have no control over it. You have no option to add helpful plugins or do editing changes to your blog’s backend editor.

      Sorry Buddy, I suggest you change over to self hosted WP, especially if blogging is part of your online business. You may want to go to the tutorial on how to start a blog and read it and decide for yourself.

      Best of luck
      Dita Irvine recently posted…3 Simple Steps To Increase Productivity And ProfitabilityMy Profile

  3. Mayank May 12, 2014 at 3:18 pm #

    I found this blog really useful, we explained it very well about speed. But I wanted to know that will this script affect the site in any other manner.
    Mayank recently posted…BMW X6 M Wallpapers and Image GalleryMy Profile

  4. Yousuf Khan November 20, 2013 at 1:48 pm #

    Hi Bro Please Tell Me How I Do My Blog Load Faster I tried Everything I Searched on Google About This But I Can’t Find Any Good Solution 🙁 My Blog Is About Bollywood And Have Too Much Images Please Review My Blog And Tell Me What I Have To Do About Blog Page Speed And Guys Sorry For My English..

    • Dita Irvine December 8, 2013 at 1:44 am #

      Hey Yousuf,

      Your loading time is not horrendous. Check You could use Smushit from Yahoo to reduce the size (kbs) of images and also make sure that the images you upload are exactly the sizes you want. In gtmetrics you will get some ideas.

  5. Adrienne October 22, 2013 at 5:19 pm #

    Hi Dita,

    I had read this same thing on a blog last week by a fellow reader of mine so when I asked him about this he said my blog loaded just fine, actually faster then his. But I still have C’s on the GTMetrix site. He also said that there was a big difference between scores and speed so since mine loaded just fine not to worry about it. I know with a lot of the themes and plugins you can’t really make them all a 100% score.

    I tried adding the above mentioned code anyway and it didn’t work for me. I tried it at the beginning, the end, with the hashtags, without and continued to get a 500 error message so I gave up. I mean I’d love for my blog to be as fast as possible and if that would help I’m all for it. I don’t have a lot of plugins but I do have Thesis and I do have some CSS coding that’s always coming up in these darn reports.

    Oh well, I guess I’ll just leave it alone. I had a few red marks myself but my load time was faster then yours so I guess I’m good. Everyone tells me it’s fast although these sites don’t seem to say as much. Go figure.

    Thanks anyway for this information and hope you’re doing okay.


    • Dita Irvine October 22, 2013 at 11:01 pm #

      Hi Adrienne,

      I am surprised that it did not work. Did you copy it first to notepad just in case there are some appendages there from my site. It should be really simple to do. Maybe you can contact your webhost. I still deal with Hostgator and they are very helpful. As well, here is the code from GTmetrix

      I noticed that your site loads well in GTmetrix but your score is low. If you are uncomfortable adding the code than leave it alone. As long as your site is fast then that’s OK. Just check it periodically.

      As well, check out my other post on optimizing images the Smushit plugin works very well and does not seem to burden the site.

      Please let me know, I am curious why you cannot add the code. I checked error 500 and it has something to do with the web server.

      Best of luck


  6. Jane October 21, 2013 at 11:54 am #

    Thanks for the tips Dita! When I look up my site, I see that there are some (popular) plugin scripts that are causing the issues! And sadly, I really need those plugins 🙁

    Anyways I’m off to work on adding caching scripts. Thanks once again!
    Jane recently posted…Most Common Web Hosting Myths: Is Your Hosting Company Genuine?My Profile

    • Dita Irvine October 22, 2013 at 11:04 pm #

      Hi Jane,

      Isn’t it unfortunate? I had to keep some of the minor culprits but the one I talked about I really miss and I will still use it for squeeze pages but I will dedicate ither a directory or a subdomain to it.