In some cases, SmartFrame images may appear to load more slowly than expected. This is typically due to the structure of the page and the way JavaScript is implemented.

If you encounter this issue, we recommend following the best practices outlined below.

Prioritize SmartFrame loading using fetchPriority

When multiple JavaScript files are being requested simultaneously, SmartFrame may be delayed. To ensure SmartFrame is prioritized, add the optional fetchPriority attribute to the <script> tag. Example:

<script async fetchPriority="high" src="https://static.smartframe.io/embed.js"></script>
<smartframe-embed
  customer-id="7d0b78d6f830c45ae5fcb6734143ff0d"
  image-id="imgp7068_3_copy_1676383547359"
  theme="standard"
  style="width: 100%; display: inline-flex; aspect-ratio: 6768/4517; max-width: 6768px;">
</smartframe-embed>
<!-- https://staging2.smartframe.io/embedding-support -->

This signals to the browser that the SmartFrame embed script should be loaded with higher priority.

Read more about the fetchPriority property of the HTMLImageElement

Avoid wrapping the embed code

Some CMS platforms may automatically insert additional wrappers around SmartFrame embed elements, such as <embed-html>. While this won’t prevent SmartFrame from working, it can delay code execution.

For optimal performance, embed the <smartframe-embed> element directly, without any additional containers.

Monitor Core Web Vitals

To ensure the best possible user experience, make sure your site’s Core Web Vitals remain in the green (good) range.

Poor Core Web Vitals scores may indicate delays or layout shifts caused by how third-party scripts, including embeds, are implemented.

Despite its many interactive features, SmartFrame is designed to have minimum impact on site performance. In fact, in many cases, it can boost page load speeds.

Website performance is commonly measured using Google’s PageSpeed Insights tool, and Core Web Vitals scores should be maintained in the green (optimum) range. When SmartFrame is correctly implemented, it performs strongly against these benchmarks and will not negatively impact your scores.

The examples below offer a general indication of SmartFrame’s performance capabilities, based on side-by-side PageSpeed comparisons of pages with and without SmartFrame. Full website integration may allow for further optimization.

Case 1 — Test page with images only

A side-by-side comparison of an image in a conventional format with a SmartFrame image.

Case 2 — Test page with HTML

A full-length webpage with and without SmartFrame images.

As each test run can produce slightly different PageSpeed results, the values above may not exactly match those obtained at a different time or location.

SmartFrame is also happy to work alongside any additional performance-measuring tools you may already use, and can monitor performance before and after integration to provide these results for full transparency.

If your Core Web Vitals scores do drop after adding SmartFrame images, this usually points to how third-party scripts are being loaded on the page. Following the best practices above – prioritising the SmartFrame script and avoiding unnecessary wrappers – will help keep your scores in the green range.