Getting started

# Performance: CLS & Preload

This article explores the implementation of several key techniques in Cartzilla that enhance website loading performance and reduce Cumulative Layout Shift (CLS). These methods include preloading essential assets and effectively wrapping images and videos in Bootstrap's .ratio element to preserve aspect ratios.

## Preloading assets

Preloading assets is a critical technique used to instruct the browser to download and cache key resources early in the page load process. This ensures that fonts, icons, styles, and other content are available immediately when needed, reducing load times and preventing layout shifts. Below are examples of how Cartzilla preloads web fonts and icon fonts:

    <!-- Preloaded local web font (Inter) -->
    <link rel="preload" href="assets/fonts/inter-variable-latin.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Font icons -->
    <link rel="preload" href="assets/icons/cartzilla-icons.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="assets/icons/cartzilla-icons.min.css">

    <!-- Theme styles -->
    <link rel="preload" href="assets/css/theme.min.css" as="style">
    <link rel="stylesheet" href="assets/css/theme.min.css">

By preloading these assets, Cartzilla ensures that text and icons render instantly when the rest of the content loads, enhancing the perceived speed of the site and improving the user experience.

## Using the `.ratio` element

To further improve CLS, Cartzilla utilizes Bootstrap's `.ratio` utility class, which helps maintain the aspect ratio of images and videos. This technique prevents layout shifts that occur when media loads and expands into its designated space. Here are examples of how the `.ratio` element is used for predefined and custom aspect ratios:

    <!-- Predefined ratio -->
    <div class="ratio ratio-4x3">
      <img src="..." alt="...">
    </div>

    <!-- Custom ratio -->
    <!-- Aspect ratio formula: imageHeight / imageWidth * 100% -->
    <div class="ratio" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
      <img src="..." alt="...">
    </div>

These examples show how the .ratio element can be used to ensure that the space for an image or video is reserved, regardless of whether the media has finished loading. This method significantly reduces CLS by stabilizing the layout as the rest of the page continues to load.

Top