Reduce URL and Page Size

Optimize the use of URLs and minimize page size. Page size is the total file size of all the resources that must be loaded for the page to function. Page size impacts load speed of the page on a browser, and it can also have a significant impact on mobile users.

We recommend the following best practices for optimizing pages and URLs:

• Reduce URL Parameters

  Remove unused URL parameters and POST data. In B2C Commerce, you can enable SEO URLs that substantially shorten the standard URL.

• Optimize Features

  Remove features from first pages and landing pages.

• Reduce DOM Size

  Use minimal, standard XHTML with minimal DOM nodes. For example, use the standard H3 HTML tag instead of a span class.

• Use CSS Cascading

  Rely on CSS cascading to get rid of class information, rather than specifying it explicitly.

• Remove Inline Comments

  Remove comments. Minimizing comments makes it harder to maintain the page, but makes it faster to load. For ISML templates, create ISML comments that use three dashes. The dashes are removed when the page is sent to the browser.

  For example, you can add the following comments in ISML:

   <!-- End User Can See --> <!--- Invisible to End User --->

  Comments in CSS, however, are always sent with the page.

  For example, you can add the following comment in CSS:

   /* Always Viewable */

• Use Optimized Images

  Ensure Hi-Res image file sizes are optimized to < 6 MB or have dimensions not exceeding 3000x3000 pixels.

  Choose the right image file type to reduce the page size as per the recommendations below.

  File Type	Recommended For
  JPEGs	For photographs only. JPEG file type can handle all of the colors in a photograph in a relatively small, efficient file size. JPEGs are typically more SEO-friendly than PNGs, especially if you don’t need transparent backgrounds, as they offer better compression levels
  PNG	Simple images or graphics using large, flat areas of color. This includes most designs, infographics, images with lots of text in them, and logos. PNGs are higher quality than JPEGs, but typically come with a larger file size. PNGs deal with areas of color and text with nice crisp lines, so you can zoom in and not lose any quality. They also support transparent backgrounds. If you have a choice, we recommend saving PNGs as “24 bit” format rather than “8 bit” because of the better quality and richer array of supported colors.
  GIF	For animated images only. GIF only uses 256 colors along with lossless compression, which makes it the best choice for animated images
  SVG/Sprites	For logos, diagrams, and icons or other high-resolution, computer-generated graphics. Multiple SVG images can also be placed into a single SVG file and each can be referenced by an ID rather than a pixel position.
  BMP	Not recommended
  TIFF	Not recommended

  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.

  If your landing page includes a series of similar-sized images (say, for a client logo bar), you can shorten your load time by combining them into an image sprite, then use CSS to display specific chunks of that sprite at a time.

• Optimize or Remove Unnecessary Custom Fonts

  Review and optimize the number of custom fonts you're using on the page. While a couple won't hurt, using them in excess could still hurt your page speed. Here’s a summary of the key things to consider when using custom web fonts:

  • At a minimum, use a WOFF2 font file to get the smallest size as there are no downsides.

  • Subset your fonts to include only the characters that are required. This could be to remove all but a few characters (as a font file correctly prepared can be smaller than a graphic), or limited to a specific language.

  • Implement a strategy for how typography behaves. Be it an all or nothing approach until the font is loaded or a carefully selected fallback.

  • Give the browser the best chance at getting fonts right by preloading required fonts.