Documentation

Performance

Introduction

Working with iFrames can result in a less performing website. The browser needs to request content from multiple sources. These requests are not executed at the same time, resulting in slower loading times.

Preloading content

To make your website loads as fast as possible we use the link type preload to tell the browser to fetch content from this URL and cache it for later use. More information about this tag can be found at https://w3c.github.io/preload/

Example static

If we want to embed a chart with the URL https://www.inflowchart.com/chart/examples/chart?embedded=true we need to tell the browser to preload this URL with the preload link type.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- Preload chart -->
        <link rel="preload" href="https://www.inflowchart.com/chart/examples/chart?embedded=true" as="document">
    </head>

Example javascript

If needed, use javascript to set the link tag dynamically with the correct URL.

<!-- Preload chart via JavaScript -->
<script>
    var res = document.createElement("link");
    res.rel = "preload";
    res.as = "document";
    res.href = "https://www.inflowchart.com/chart/examples/chart?embedded=true";
    document.head.appendChild(res);
</script>