July 2010 Newsletter

Speed Up Your Site - Images

**** The 4specs Perspective

You want your visitors happy and not frustrated. And now Google is now using your website speed in their search rankings!
https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

The next few newsletters will be focused on speed - some of the concepts are taken from a Yahoo paper, others are from the SEO Gadget site with a good summary on the Bruce Clay website. I have tailored my comments for the typical construction product manufacturer website and not websites in general:

https://developer.yahoo.com/performance/rules.html

[link no longer available]

[link no longer available]

I recommend that you start with the images on your website. You should be able to improve performance with little work and see significant results in speeding up your website. There are four factors you will want to work on:

  1. Eliminate junk images and use CSS-based navigation
  2. Use smaller images
  3. Compress images
  4. Use the best image format

Start with the Google Webmaster Tools Program we discussed last month and have some results of your average page speed. See last month's newsletter:
Using the Google Sitemap Program to Improve Your Website

You can start to evaluate your specific pages. Run Web Page Test - https://www.webpagetest.org/ - on your site. Run the home page and one of your higher visited inside pages. Print out the first few pages of each run or save them as a pdf. Linked below are the pdfs from Web Page Test for the 4specs Home Page and Handrails page you can see as examples.

1. Eliminate Junk Images - If your site navigation depends on clicking through an image rather than text, you may be able to eliminate many of the images by changing to a CSS-based navigation system. Here are examples of different types of CSS-based navigation systems. Generally the search engines prefer these over image-based navigation:
[link no longer available - search for CSS navigation and you can find others]

2. Use Smaller Images - Look at the images that appear on all your pages - perhaps your logo - and larger (in dimension size) images. Can you make them smaller (shorter and narrower) and still be effective. I use Photoshop Elements (around $100) to resize and compress all the images on 4specs. If you change the image size (width and height dimensions) you will have to rename the image file and change the code on your html pages.

3. Compress Your Images - Open each image in Photoshop Elements (or CS4/5) and save for the web (or jpg = 30%). You can save the image back in your files. It is not necessary to change the file name (and the html pages where the images are used).

4. Use the best image format - There are 3 types of image formats used on the web.

  1. JPG - best for photos and images with many colors
  2. GIF - better for logos and images with a limited range of colors
  3. PNG - similar to gif, and file sizes are somewhat smaller than a GIF. Generally a PNG-8 is better than a gif and includes transparency.

PNG's are displayed properly by IE7+ and Firefox browsers. There are 2 types of PNG's. PNG-8 is a better format than GIFs for most logos. PNG-24 was designed as a replacement for JPGs. While PNG-24 has transparency, the file sizes are typically larger than the equivalent JPG. A PNG-24 with transparency does not always work with Internet Explorer 6.

The 4specs logo is a PNG-24 with transparency. When viewed in IE6 (Internet Explorer 6) the image is set on a darker gray background than the rest of the background. I chose to use a PNG-24 as it looks better (although the PNG-24 image is about 1,000 bytes larger) than a gif or PNG-8 for most of our visitors. I knew that the IE6 user would not have the best appearing page. IE6 is about 11% of our users. While there are ways to work around the problem, I decided to take the simpler solution and let the IE6 users see this:

IE6

One more image suggestion will be covered in more detail in a future newsletter. In my efforts to accelerate 4specs' speed, I evaluated using a CDN (Content Distribution Network) as recommended by Yahoo and WebPageTest. After testing and evaluating options, I decided to serve the logo, icons and some of the manufacturer ads from 2 different static IPs on our web server to improve the download time. For example, while our logo is integrated into the page, the image comes from a separate IP number - on the same server. More in a future newsletter:.
[No longer doing this - 9/2014]

Questions and comments are always appreciated.

--------------------------------------

Colin Gilboy
Publisher - 4specs
Contact us