May 2012 Newsletter
Over the past 2 months I have been reviewing ways to evaluate your website speed with suggestions on how to speed up your website. Here are Part 1 and Part 2.
This month I will cover image control as part of speed. If your website speed (home page and a typical internal page) is over 2 seconds when evaluated under WebPageTest.org, your web design probably needs to be reworked.
Many building product manufacturer websites I review have one or more of the following problems.
1. Four of five large rotating images on the home page. Each of these images take time to download and generally slow the site down. Few users will wait for all 4 or 5 images to display as they want to go elsewhere. I recommend the use of four smaller images combined with text as more effective. The user can quickly see they types of products you make, and select the one they want. Our WebFormat example will demonstrate what I mean. Faster, simpler and more effective.
https://www.4specs.com/webformat/
2. Images that are not compressed. Frequently the image has been saved for maximum appearance and not optimized for web browsing. If your products are visual, you may want to provide large high resolution images selected by the user and not automatically downloaded.
I use Photoshop Elements for our work at 4specs - a $99 or less program. I typically save the showcase listing images as a jpg at 30% using Photoshop or jpg medium for Photoshop Elements. Going to WebPageTest.org for your pages, select Performance Review on the black navigation bar to see if any of your images need to be compressed. Any images that are not sufficiently compressed will be indicated.
3. Too many junk images. These are images used for spacing, navigation boxes, border corners and the like. Eliminate them. Do a simpler design that does not require the junk images. Convert any navigation images to CSS driven links.
4. More than 6 images on the page, especially if you have speed problems on the site. Six is the key number. Originally browsers would download only 2 files at a time from a server. New browsers (say since 2007) have a default at 6 files per server. The browser does not count physical servers, just server names or IP numbers. There are several ways to speed up the images:
a. Use a Content Distribution Network - CDN. This is what WebpageTest.org recommends. When I evaluated this, the page was somewhat slower due to the additional DNS look up. Also, most building product manufacturer websites do not have enough traffic to justify setting up a CDN. Based on our 2011 survey, less than 10% of the websites exceeded 25,000 user sessions a month and probably do not exceed their bandwidth limits. Do consider a CDN such as Amazon Cloudfront for movies and major downloads - say over 500,000 bytes.
b. Use multiple servers to serve the additional images. This has an added advantage as no cookies (your website cookies and Google Analytics cookies) would be sent with the image. Cookies can require more bandwidth than smaller images. I use multiple virtual servers with 4specs to keep our pages speedy. In the Connection View below you can see the 4 servers I am using these servers to serve images when this page was written. [No longer done.] These all reside on the same physical server and permit me to download more images at a time than the norm.
4specs is hosted on a dedicated server using multiple IP numbers. If your website is hosted on a virtual server with shared IP numbers - a name-based virtual hosting - you can set up additional domain or subdomain names for the images. For example, Yahoo uses yimg.com for many of their images. I occasionally see 8 or 10 different subdomains being used to serve the images on several image-heavy websites I visit. The IP method I use avoids the additional DNS lookups for each subdomain. Your web people should know how to set up the multiple names. One caution - be sure the image is consistently called from the same file/domain location each time across the entire website.
The multiple IP solution is even more important on a faster connection. WebPageTest.org permits testing at 1.5, 5 and 20 Mbps connections. The last image on the bottom shows a 20 Mbps connection for our heaviest page on 4specs - 0.37 seconds load time at 20 Mbps as compared to around 1.4 seconds on a dsl-speed connection. In comparison most building product websites have download times of 4 sectons to alomst 20 seconds.
c. Use a delayed loading javascript program. This is also called a lazy load. Images not in the viewing area are not loaded until the hidden area is moved into the users vision. This is especially useful for a page with a hundred images, such as a furniture web page. These two web pages have good examples, alternatives and problems described..
https://appelsiini.net/projects/lazyload/
https://davidwalsh.name/lazyload-plugin
Our goal is to help you have a better and faster website. Call or email if you have any questions or suggestions.
Colin
--------------------------------------
Colin Gilboy
Publisher - 4specs
Contact us
