Use preload to reduce load time

The powerbi.preload API is used to reduce the load time of the embedded content in Power BI when your embedded content is on a different page. Preload uses a minimal configuration (only type and embedURL) to help download the scripts required to embed Power BI content before your users navigate to that page. This provides a faster experience when displaying embedded reports and dashboards. Preload should only be used if the Power BI content is on a different page of the web application.

Note

As a best practice for performance, we recommend using the bootstrap method instead of preload.

How to use preload

powerbi.preload() is used to download the necessary scripts before embedding your content. The browser stores these scripts in its cache, making the initial call to powerbi.embed() faster. To use preload, you must provide the type of embedded entity and a base URL for Power BI (embed URLs without any specific URL parameters such as reportId or groupId).

// Building the config object
let config = {
    type: 'report',
    embedUrl: 'https://app.powerbi.com/reportEmbed',
};

let element = powerbi.preload(config);

The preload event will fire when the preload is complete.

element.on('preloaded', function () {
    ...
});

Next steps