Even a B2B web site that needs to display complex product specifications and price points to retail customers can still be aesthetically pleasing, says Michael Hanreck, managing partner at PAG Leisurewear, an apparel wholesaler. The only hard and fast design rules are to make a site useful and pleasing to customers without the pages taking too long to load, he says.

Ideally, a retailer’s home page loads in no longer than six seconds, adds Mariano Ferrario, director of e-commerce solutions for software vendor NetSuite, which PAG uses for its web site and back-end accounting.

Hanreck and Ferrario explained how a retailer can design a web site that both looks good and displays quickly today at the IRCE Focus: Web Design + Mobile Commerce conference in Orlando, in a session titled, “How beauty and speed can coexist in web design.”

“Dealing with trade web sites possibly makes you think you should do something else with your life,” Hanreck said of the B2B sites typical in the garment industry. Less than two weeks ago, PAG launched a redesigned web site using NetSuite software that, he said, has the look of a consumer-oriented fashion retail site, but includes extra functionality specific to the needs of PAG’s customers, he said. For example, the site displays all 55 colors of a particular T-shirt in both the order of the color wheel and alphabetically so customers can find what they need either by name or visually. The site also highlights pertinent information a reseller would be seeking, such as the weight of the fabric and the number of items included in one case.

PAG is still tweaking the site to optimize it for performance, Hanreck said. That includes pinpointing as many small technical details that could be slowing page load times as possible and fixing them.

Ferrario gave his top five quick fixes any retailer can make to optimize site performance:

1. Optimize all images, which usually account for most of the data a server is transferring to an end user’s web browser and thus much of any delay in a page loading. A retailer should crop images to make sure there are not extra white spaces around them, reduce the color depth if possible and use as small a file format as possible, for instance a PNG-8 versus a PNG-32 (the number refers to the size of the color palette encoded, as in eight hues versus 32). Retailers should also remove any unnecessary meta-data that might have been automatically included in an image file, such as the time, date and location of when the photo was taken, Ferrario said.

2. Reduce the number of calls to a server that the web page makes. One way to do this is to use a “CSS sprite,” a single file containing all the images that need to appear on the page. That way, the site can use one server request to transfer 20 image files, for instance, rather than asking for 20 images one by one.

3. Eliminate any extra spaces or unnecessary information from all files that load on a page. That includes removing extra indents in lines of code developers write to build the site, Ferrario said. A compressor can also minimize file sizes and reduce page load times by up to 70%, he said.

4. Use a content delivery network to bring the server files closer to the customer—the fewer “jumps” files have to make to travel from the server on which they are hosted to the laptop of a shopper at home, the faster the web pages will load for her. Content delivery networks can reduce a page load time by up to 30%, Ferrario said.

5. Use progressive rendering, also known as asynchronous loading, to load more important page elements first. In addition to enabling a web page to load more efficiently by directing what loads when, progressive rendering can help appease shoppers by reassuring them the full site is coming and giving a sense of how long it will take, Ferrario said. For example, a retailer might want a big sale banner to appear first before all the side navigation elements. “That provides users with visual feedback right away that something is happening,” he said.

The process isn’t ever finished, Ferrario advised. “Performance is an ongoing initiative that doesn’t stop when your site is live,” he said. Retailers need to continue monitoring their sites, especially whenever they make changes, he said, in order to tell if an update significantly affects page load times.

Favorite