I promised you in the last post that I would tell you how to optimize your blog so that you can increase it’s speed and at the same time keep Google happy. Before optimising this blog and moving it to {inmotion hosting}, it used to take over 12 seconda for the page to fully load. Now it takes around 3 seconds. You have to admit that is a pretty big difference. This post will be the first of a series of posts that wil explain how it did it. The first step was to resolve the issues suppled by Google’s Page Speed Insight. The initial scan of this blog showed that as far as Google was concerned I had some high priority issues to resolve.

High priority.These suggestions represent the largest potential performance wins for the least development effort. You should address these items first: Serve scaled images, Leverage browser caching, Enable compression, Optimize images

For the purpose of this post I will show you how to resolve these issues starting off with serving scaled images.

How To Serve Scaled Images

serve scaled imagesA scaled image is when you’re displaying a scaled down image of a full size image that is hosted on your blog. This usually
happens when you reduce the size of an image so that it fits within the confines of your post, which was my issue. There are  also many sites who scale down their images so they fit in their sidebars or just to display a smaller version of the original one. The problem is that although people think that they’re conserving bandwidth and increasing speed by doing this they’re not because the server actually downloads the full image before displaying the scaled down one.

The solution is to only display images in the actual size you want. This will mean resizing the image offline and then uploading it back to your blog. Now when people access your site they’re only downloading the smaller image thereby increasing blog speed. Once I did this that warning disappeared.

How To Leverage Browser Caching

leverage browser cachingWhat Google wants us to do is to set an expiry date because ‘Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Too bad Google doesn’t show us how to do this. I looked for ages on the net and tried many plugins. None of the plugins I tested work I wasn’t having much luck on the net either until I came upon this post, How To Leverage Browser Caching In Apache.

What I did was to add the following code, just as the post suggested, into my .htaccess file and that resolved the second issue.

# Begin Leverage Browser Caching
Header unset Pragma
FileETag None
Header unset ETag
<FilesMatch “\.(ico|jpg|jpeg|png|gif|js|css|swf|pdf|flv|mp3)$”>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault “access plus 14 days”
Header set Cache-Control “public”
</IfModule>
</FilesMatch>
<FilesMatch “\.(html|htm|xml|txt|xsl)$”>
Header set Cache-Control “max-age=7200, must-revalidate”
</FilesMatch>
# End Leverage Browser Caching

Just keep in mind that the VPS Server I’m hosted on uses Apache and I made sure of that before making these changes.

GZIP Compression On WordPress

gzip browser filesMost people know that it’s a lot easier to upload or download a zipped file than an uncompressed one. This is because the zipped file is so much smaller. The same applies to websites which is why Google is looking to see if websites have it enabled. Naturally the first thing I tried was the WordPress plugins but although I didn’t get any error messages as far as Google was concerned my blog wasn’t compressed. Damn! :hairout_tb:

Oh well, I may as well resort to Googling to find an answer, and after a long search and many trials I came across How To Enable GZIP Compression On Apache. Once again, take note, your server has to be running Apache for this to work! This is the code I added to the .htaccess file.

# Enable GZIP
<IfModule mod_mime.c>
AddType application/x-javascript .js
AddType text/css .css
</IfModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/javascript
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
</IfModule>
# End GZIP

I went back and tested it with Google and much to my delight I had resolved another issue.  :clap_tb: If you want to check to see whether or not your site is compressed I found a site that will do a Http Compression Test.

Optimize Images For Your Blog

optimize browser imagesThe Google Page Speed Insight checks your site for optimised images because it knows they make your site load faster. This is because an optimised image is much smaller than the original. Luckily there is a WordPress plugin that will do that for all images in the media file, WP Smush.it. Unfortunately not all my images are in that file, but luckily I found a website, ImageOptizer.net, which allows you to optimize your images online. Better still, they had available a free tool for download that will let you optimize single files or even whole directories. That was a much better option. I simply downloaded my image directories, optimised them and then uploaded them again.

To improve site speed even further I downloaded the images from advertisers, optimised them and then uploaded them to my server. This is a much better option because there are times when the host site is down which then slows yours down as it tries to retrieve the image.

That;s it for this session. Don’t forget to join my list so you don’t miss out on future posts on how to optimize your blog. If you found this post helpful you may want to promote it via your favourite social network.

I would love to know if these tips worked for you and if you have any other ideas we can use to make our sites go faster. You know the drill, just leave a comment.


The FlexSqueeze Theme gives my blog that professional look. I loved it so much that I bought the developers license. It's the easiest most customizable theme I've come across. See how easy it is to change your theme's appearance! Compare it to Thesis to see how much better it is! Check out some of the latest Latest Updates

I highly recommend you to get your FlexSqueeze copy today!

Didn't Find What You Were Looking For? Search WassupBlog Now!
Copyright secured by Digiprove © 2012

    JVZoo Killer WordPress Plugins.

  • Covert Messenger New WordPress Plugin Lets You Easily Create Cool "Intant Messenger" Ads On Your Blogs - These Ads Will Suck Your Visitors In and Literally Force Them To Click On Any Link You Want!
  • CommentLuv Premium - Unlimited License The famous CommentLuv Premium is active on over 50,000 WordPress blogs. Finally available on JVZoo. Increase your comments, traffic and encourage visitors to share your posts. Affiliates http://ql2.me/clpaff
  • OTO Easy Video Press Flipping / Developer License
  • YourTube SuperStore Learn how to get a "Store Tab" in your YouTube channel so you can start selling products right from INSIDE your own YouTube channel as soon as tonight!

Tagged with: • • •

Filed under: Optimize Techniques • Wordpress Plugins • WordPress Tutorial

Like this post? Subscribe to my RSS feed and get loads more!