How to improve SmartFrame loading performance

| Help center

How to improve SmartFrame loading performance

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.

Use a single <script> tag

If you plan to embed multiple SmartFrame images on a single page, ensure the <script> tag is included only once — ideally in the <head> section of your site. Then, place individual <smartframe-embed> elements wherever needed across your page(s). Example:

<script async 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://smartframe.io/embedding-support -->

This helps avoid duplicate script calls and reduces loading delays.

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://smartframe.io/embedding-support -->

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

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.