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.
Sunday, August 21, 2011
Tuesday, August 9, 2011
How To Add A Tabbed Information Section On Your More Information Pages
Adding a tabbed information area on your product more information page is a request that I get fairly regularly. Adding tabbed sections to your product more information page gives you the ability to display more information for the customer, in an organized fashion, without taking up too much room. Tabs give the customer a sense of the information that you provide right at the beginning, and make it so that the customer can skip right to the information that they want without scrolling through your product more information page to find where the information is, or if you have that information at all. Here is a screenshot of what the tabs would look like:
I have added the JavaScript, CSS, images, and instructions needed for you to add this functionality into your own custom product template. You can read those instructions at http://laurenhillsdesign.com/ecommerce-tools/enhancement-product-more-information-tabs.html.
Friday, August 5, 2011
Web Page Speed - How Does Your Site Rank? Pt 1
It seems like lately many of my existing clients and some new clients have come to me worried about their page speed; I have had many emails referencing Google's Page Speed Online test page specifically. Yes, it is true that one of the factors on how your site ranks in Google is page speed, but it is only one factor of well over 100 factors. Some of the basics for making your page speed faster include caching, image sprites, and compressed files. I did a test on my own website to see how various factors affected my page speed according to Google's Page Speed Online: http://pagespeed.googlelabs.com/.
Starting Out: 82/100
I am beginning with a score of 82/100. Not bad, but not great. I had no High Priority suggestions, but I did have both Medium Priority and Low Priority. I am going to begin my testing by creating some image sprites. Image sprites are images that have many sub-images in them. For example, the Facebook buttons such as "like" "share" "send" etc, all use a sprite so that the little icon that is displayed changes based on what the button is for. All of those little icons, the thumbs up, the check mark, the text bubble, etc, are all part of the same image (see Facebook image sprite to the right). Before creating my image sprites, there were 9 images on my home page.
After Image Sprites: 90/100
Wow, what a difference! After creating and implementing the image sprites, I was down to 2 images. The page is loading much faster because the browser doesn't have to look for a bunch of different files, and the server doesn't have to serve up so many files. Combining CSS and JavaScript files into less files is typically what I would do next. However, since my site does not have a lot of features (no mini cart, no scrolling images, no customer registration) that require the use of JavaScript, I don't have many external files. I simply have one CSS file on my home page. When I look at my results in Google, I have no Medium Priority suggestions anymore; my only suggestions are Low Priority page speed suggestions.
Minifying CSS: 90/100
Ok, so my CSS wasn't overly full and minifying it didn't do much for me as far as page speed. Minifying CSS takes out all of the fluff. Any spaces, line breaks, comments, and pretty much anything that isn't strictly CSS must go. Because of this, I would only suggest doing this if you are done making changes to your CSS (I keep a back up on my computer so that it is easy to edit and re-minify if needed) because it is awfully hard to find the code you need and make changes on it if your entire CSS file consists of a single line. The minifyier that I had used was CSS min.
In part 2 of this post I will go over how to leverage caching or compressing your website by modifying your .htaccess file on the server.
Starting Out: 82/100
I am beginning with a score of 82/100. Not bad, but not great. I had no High Priority suggestions, but I did have both Medium Priority and Low Priority. I am going to begin my testing by creating some image sprites. Image sprites are images that have many sub-images in them. For example, the Facebook buttons such as "like" "share" "send" etc, all use a sprite so that the little icon that is displayed changes based on what the button is for. All of those little icons, the thumbs up, the check mark, the text bubble, etc, are all part of the same image (see Facebook image sprite to the right). Before creating my image sprites, there were 9 images on my home page.
After Image Sprites: 90/100
Wow, what a difference! After creating and implementing the image sprites, I was down to 2 images. The page is loading much faster because the browser doesn't have to look for a bunch of different files, and the server doesn't have to serve up so many files. Combining CSS and JavaScript files into less files is typically what I would do next. However, since my site does not have a lot of features (no mini cart, no scrolling images, no customer registration) that require the use of JavaScript, I don't have many external files. I simply have one CSS file on my home page. When I look at my results in Google, I have no Medium Priority suggestions anymore; my only suggestions are Low Priority page speed suggestions.
Minifying CSS: 90/100
Ok, so my CSS wasn't overly full and minifying it didn't do much for me as far as page speed. Minifying CSS takes out all of the fluff. Any spaces, line breaks, comments, and pretty much anything that isn't strictly CSS must go. Because of this, I would only suggest doing this if you are done making changes to your CSS (I keep a back up on my computer so that it is easy to edit and re-minify if needed) because it is awfully hard to find the code you need and make changes on it if your entire CSS file consists of a single line. The minifyier that I had used was CSS min.
In part 2 of this post I will go over how to leverage caching or compressing your website by modifying your .htaccess file on the server.
Wednesday, August 3, 2011
Summer Winding Down Encourages Changes On Your Site
With each new season comes a reminder to update the content on your website. The exciting news that was on your site last season is now a little outdated. The sales that were advertised or the top products that were advertised have changed. There are new and exciting things to be letting your customers share in. Two big focus points for the ending of summer are back to school and winter.
I was not a student who always looked forward to going back to school, although I often was excited to start a new school year. As a kid you look forward to seeing friends you haven't seen all summer or wondering who your new teacher is going to be, high school students are looking at the extracurricular activities they will be participating in, college students are moving back into dorms, prepping for their new semester of classes, and as always, looking for this semester/year to be better than the last. So with your store, you should help boost the excitement of a new school year.
For clothing, makeup or jewelry companies, get your customers excited about having some new outfits and new trends to show off. If you sell furniture, you might want to target college students and point out furniture pieces that are good for dorms or that are compact and functional. Most sites will have some way to advertise for or against the new school year. If you sell movies or books you could point out good 'break from studying' media choices. Students always want the latest in gadgets and electronics, so those are easy to advertise.
This time of year also brings colder weather. Before you know it, leaves will litter yards and the mountains will be covered in snow. The highlighted products on your site should be changing from t-shirts, biking gear and staying cool, to jackets, snow toys and keeping warm. It's great to highlight those products that help people transition to the new weather, or products that are used in the new weather. Join your customers in the excitement of the upcoming season by celebrating the characteristics of the new season.
 |
| National Collegiate Ethics Bowl |
For clothing, makeup or jewelry companies, get your customers excited about having some new outfits and new trends to show off. If you sell furniture, you might want to target college students and point out furniture pieces that are good for dorms or that are compact and functional. Most sites will have some way to advertise for or against the new school year. If you sell movies or books you could point out good 'break from studying' media choices. Students always want the latest in gadgets and electronics, so those are easy to advertise.
 |
| Snowboarding 2010 |
Subscribe to:
Posts (Atom)