Optimize General Site Pages
General site pages are any pages on your site that are not initial access points for customers.
Use Progressive Rendering
By controlling the order in which components of a page load, you can give the impression of a faster loading page. Instant feedback from a partially rendered page or a progress bar makes the page feel faster to the customer. A blank page can seem to load more slowly, even if the total loading time for the blank page is shorter than the incrementally loaded page.
Use the following general guidelines:
- Focus on initial page rendering and then add external content via AJAX.
- Put JavaScript at the end of the page unless it's necessary for it to be at the top of the page. When the JavaScript is at the bottom, the page is loaded first and then the JavaScript is processed, which decreases the apparent load time, by making the page appear more quickly in the browser. You can also split the JavaScript, so you have some at the bottom and some at the top.
- Put CSS information at the top of the page. The browser must have the CSS information before it starts rendering. Having the CSS at the top makes it possible for the page to load faster.
- To keep the customer informed and give an instant response to interaction, add progress bars. For example, if you must spend time loading a flash file, return the page and put up a progress bar for the flash file.
Limit Domains
Each domain included on a page costs DNS resolution time. Many pages incorporate Scene7, Akamai, Salesforce B2C Commerce, Google (for Analytics), Verisign, Trusted Dudes, or Omniture. Each domain requires a DNS lookup, which can take from 20 to 120 milliseconds.
The standard recommendation for browsers is no more than two downloads per domain. Sometimes, it makes sense to split data across domains to use concurrent downloads. However, each domain requires a DNS lookup that takes more time.
B2C Commerce offers hosting of static content via its embedded CDN, and enables that by default.
Avoid 301 and 302 Redirects
Avoid 301 (permanent) and 302 (temporary) redirects. These redirects are wasted HTTP requests and can prevent caching. Temporary redirects are not cached, so the request is always issued. Permanent redirects change the behavior of search engines and therefore are usually cached.
Keep Pages Maintainable
As with any optimization process, there are always trade-offs. While consolidating code and removing comments can make pages faster to load, it makes them more difficult to maintain. Sometimes, it can make sense to sacrifice performance to make the site easier to maintain or extend.
Use Compression
B2C Commerce GZIPs all page components. This behavior is standard for all B2C Commerce production environments. All data delivered to the HTTP client is gzipped, with the exclusion of images and data for some older browsers.
Minimize Image Size
The image file format you use depends on the type of image (photographs vs. graphics), the size of the image, and how the image is composed (transparency or large blocks of color). In selecting or compressing your image formats, the goal is to make them as small as possible.
| File Type | Recommended For |
|---|---|
| gif | Most graphics. gif files have higher compression rates than GIF and support true colors and alpha-transparency. |
| GIF | Graphics that have large blocks of color. Also recommended for graphics that require transparency that must be shown in Internet Explorer 6. Internet Explorer 6 doesn't allow transparency for gif files. While there are tweaks to address this issue, the tweaks can cause more performance overhead. |
| gif | Photographs. |
Many graphics or web publishing tools add information (EXIF-information) to graphics files to make it easier to store and sort them. However, this extra information makes the files larger than they would otherwise be. You can use tools to strip any additional information included in the image by the digital camera or the image-processing software.
Reduce and Reuse CSS
B2C Commerce has the following recommendations for optimizing CSS use in your browser:
- Include inline CSS or references to external CSS files at the top of the page.
- Make CSS files external rather than inline. You can reuse the CSS more effectively.
- Only have one CSS file. One file is smaller than 10 compressed files. The disadvantage of having a single file is that the CSS file is less reusable and more difficult to maintain than multiple files.
- Don't duplicate CSS.
- Use page types and CSS cascading correctly. Correctly using cascading eliminates lot of unnecessary CSS code for the browser to process.
- Remove unused or redundant code from CSS files. Avoid unnecessary styles or media types.
- Avoid CSS expressions.
- Remove any non-standard CSS intended for Internet Explorer, such as JavaScript in CSS.
Use a Content Delivery Network
Content delivery networks serve content to a browser from a server that is geographically near to them. This arrangement can substantially reduce the time to load pages. An embedded CDN comes standard with B2C Commerce. Salesforce recommends that you host as much content as possible, especially CSS and JavaScript, with a content delivery network.
You can set a time to live (TTL) for static content in Business Manager. This setting is carried over to the embedded CDN or other content delivery networks.