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.