Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 4.2

To get the most out of the Frosmo Platform, follow these best practices when integrating the platform with your site.

Table of Contents

Images

To optimize page load times:

  • Provide alternative versions of an image for different devices, display resolutions, and/or layouts. Use the <picture> element to define the image, so that the browser can choose the version that best fits each situation.

    Code Block
    languagexml
    themeRDark
    titleExample: Picture element with three differently sized versions of the same image
    collapsetrue
    <picture>
        <source srcset="https://company.com/images/products/product-1-large.webp"
                media="(min-width: 1280px)">
        <source srcset="https://company.com/images/products/product-1-medium.webp"
                media="(min-width: 720px)">
        <img src="https://company.com/images/products/product-1-small.webp" alt="Product 1" />
    </picture>


  • Use 300 pixels as the width for images displayed in recommendations, unless your site follows a different style rule.
  • Use the WebP image file format.
  • Use lazy loading for non-critical images, such as images below the fold.

Layout

  • To minimize layout shift, create placeholders for recommendations and other asynchronously loaded content placed above the fold.

    Recommendations always load asynchronously. If a recommendation placed above the fold completes loading only after the rest of the page is already rendered, the recommendation will introduce an unexpected layout shift. To avoid the shift, render a static placeholder for the recommendation. Make sure the placeholder has the exact same dimensions as the final recommendation content. Populate or replace the placeholder with the recommendation content once the content has finished loading.