Sunday, August 21, 2011

Web Page Speed - How Does Your Site Rank? Pt 2

I did a post, Web Page Speed - How Does Your Site Rank? Pt 1, where I took my own website, optimized the images with image sprites, and tested how much of a difference it made in the page speed with Google. This time I would like to do the same thing with another website, a website with more images and other files such as JavaScript files, as well as add some server side optimization code that I read about in a blog post from LexiConn.com, Google’s Need For Speed (and 3 things you can do to meet that need).The site I will be working on is http://www.homeandstuff.com.  They are a relatively new website (opened earlier this year).  The site is getting a good amount of traffic, but I would like to see what a difference it will make to make these changes.  Both the immediate difference seen on the speed in Google, and the long term difference.  I will get an update on this website in a few weeks to see the progress.

Starting Out: 76/100
On the first test of the page speed, without making any changes, the site scored 76/100.  There were both medium and low priority suggestions as well as some experimental suggestions.  The first thing that I am going to do on this website is add in some additional code to the .htaccess file. The .htaccess file tells browsers a lot about your website.  You can include security/login information, set controls, specify where 404 page not found errors go, etc. I got my information from LexiConn's blog and in the .htaccess file for this website I added the following code:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/x-js application/x-javascript application/javascript text/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|js)$">
Header set Cache-Control "max-age=2419200, public"
</FilesMatch>
<FilesMatch "\.(css)$">
 Header set Cache-Control "max-age=604800, public"
</FilesMatch>



After .htaccess Change: 88/100
Adding the caching settings to the .htaccess file did a lot for this website's page speed according to Google.  One thing that you should note is that not all servers have this capability setup.  If you add the code listed above, and when you view your website you get a 500 error, talk with your hosting provider about making sure the server is setup for this type of .htaccess file setting.  Next I'll be changing the basics, no broken links or missing images, optimizing the order of CSS and JavaScript files, cleaning up HTML so that it is W3 Compliant.  

Clean Up: 89/100
For cleaning up your website, there are a few different online tools that you can use. A common tool is Google Webmaster Tools.  You can login to your Google Account, submit your website sitemap, and have Google analyze your website. In Google Webmaster Tools you will get things such as a list of duplicate titles, meta descriptions or meta keywords. You can get a list of missing or broken URLs and links, and other helpful information for cleaning up your website.To check if your website is W3 Compliant, I like to use http://validator.w3.org/.  There are browser plug-ins that make checking this information easy, but you can just go to http://validator.w3.org/, type in your page URL, and see what, if any, errors come up.  After fixing those errors, re-validate. For HomeAndStuff.com, there were 26 errors on the home page when I first validated it.  However, after a few changes to match the DOCTYPE tag, all the errors have been fixed and it is passing W3C validation.

Image Sprites: 90/100
I only created one image sprite for 4 images, the rounded corners at the top and bottom of the page, as well as the navigation and sale background bars. The merchant could create image sprites for the logo image, the credit card image at the bottom, the phone number, and even the 2 images to the right of the banner.  I would only suggest to create image sprites for images that are on more than one page, so the two images on the right of the banner, although they could be added into an image sprite, I would not suggest it. 

No comments:

Post a Comment