I am currently working on an admin monitoring panel to display live values from Influxdb using the Grafana tool. I composed the application using docker and want it to run on my local server. I have around 10 pages related to monitoring inside my application, and not all but some of these pages have up to 25 different panels.
The problem is, whenever I increase the number of panels inside a page, more slower it loads. After around 15 panels, the application becomes so slow (around 15 seconds), which is unacceptable for me.
I have tried merging different panels into a single panel, but the program style completely changes if I do. I need to embed the graphs inside my web application using iframe, and I need to put one and only panel on each iframe.
Does anybody have recommendations to reduce loading time of applications for using many panels inside a single page? Any recommendation would be so helpful to me, I have been working on this problem for a week, and I still have not make progress
Here is an example code demonstrate how i embed my graphs into the web application:
**Edit: I forgot to preformat the code segment
<iframe src="http://localhost:3000&panelId=68" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=25" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=22" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=70" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=72" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=45" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=71" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=25" width="450" height="200" frameborder="0"></iframe>
<iframe src="http://localhost:3000&panelId=68" width="450" height="200" frameborder="0"></iframe>