Skip to main content

Best practices for web content

To get the most out of the Frosmo Platform, follow these best practices for web content on your site.

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.

    Example: Picture element with three differently sized versions of the same image
    <picture>
        <source srcset="https://company.com/images/products/product-123-large.webp"
                media="(min-width: 1280px)">
        <source srcset="https://company.com/images/products/product-123-medium.webp"
                media="(min-width: 720px)">
        <img src="https://company.com/images/products/product-123-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.