Improving Home Page Load Performance After Embedding Dashboards

Adhoc
, , ,
#1

Hello Team, we are using open source BI Helical Insight enterprise edition 6.1 GA
We are facing a home page loading performance issue after A dashboards into our application.

When users navigate to the dashboard page, it takes noticeable time to load, affecting user experience. Our dashboard is quite big though with 17 -19 panels present with lot of customizations as well as custom charts also present. When we individually open any panel it hardly takes 1-2 seconds to load.

Is there a way to improve performance so that the dashboard loads faster after navigation?

#2

Hello, as your dashboard itself is quite big with lot of panels, hence we will have to use another method to improve the performance. One of the thing which you can always do is to use tabbed view or limiting the number of panels in the dashboard.

However if that is not possible then below is another approach which we have provided.

Optimized Approach: Load Dashboard in Background

As soon as the user logsin inside your application, we can immediately start loading the home dashboard in the background. Hence by the time he might navigate and come to the home dashboard, it might already be partially/fully loaded and will render quite fast.

How it works

  • Load the dashboard iframe on initial page load (hidden)
  • Let it render in the background
  • When user clicks to open dashboard → just show already loaded iframe

Sample Implementation 

<!DOCTYPE html>
<html>
<head>
<title>Iframe Preload Test</title>

<style>
.page {
display: none;
}

.active {
display: block;
}

#dashboardFrame {
width: 90%;
height: 80vh;
border: 2px solid black;
}
</style>

<script>
function showPage(id){
document.querySelectorAll(".page").forEach(p => p.classList.remove("active"));
document.getElementById(id).classList.add("active");
}

window.onload = function(){
console.log("App started");

// Start loading dashboard in background
var iframe = document.getElementById("dashboardFrame");
iframe.src = "http://<HI_SERVER>/#/report-viewer?dir=<DIR>&file=<FILE>.efwdd&mode=open&username=<USER>&password=<PASSWORD>";
}
</script>

</head>

<body>

<button onclick="showPage('page1')">Page 1</button>
<button onclick="showPage('page2')">Dashboard Page</button>

<div id="page1" class="page active">
<h3>Page 1</h3>
<p>
Dashboard is already loading in background.
Wait for a few seconds before opening dashboard page.
</p>
</div>

<div id="page2" class="page">
<h3>Dashboard Page</h3>
<iframe id="dashboardFrame"></iframe>
</div>

</body>
</html>

Why this improves performance

  • Dashboard rendering starts before user navigation
  • Reduces perceived load time significantly
  • Provides smoother user experience

Important Considerations

  • Ensure authentication (username/password or token) is handled securely
  • Avoid exposing credentials in URL (use token-based auth if possible)
  • Works best when users are likely to open the dashboard after landing

Result

  • Dashboard appears almost instantly when opened

  • Eliminates waiting time for users

  • Improves overall application responsiveness

Thank You,
Helical Insight.