Accelerating the loading of panels embedded via iframes in an external application

Grafana
1

Hello.
I have a web application with several dozen Grafana 9 charts and panels embedded into it.

When I open my web application in a browser, it loads these dozens of iframes. I can see that the browser downloads each iframe with all its JS, CSS, and other content independently for each iframe. Because of this, loading takes a long time; sometimes I wait up to 10 seconds watching many jumping Grafana logos before I see the indicators I need in the iframe.

However, if I open the same panels and charts in Grafana’s native interface, the data loads instantly.

My question is, can I speed up iframe loading? I’m using the standard embedding method that Grafana offers on the Embed tab - <iframe src="https://my-grafana/d-solo/b30655a5-94c8-4d84-92cb-76ebcc5e4657/dashbord?orgId=1&from=1708282663231&to=1710874663232&panelId=36" width="450" height="200" frameborder="0"></iframe>

2

what kind of web server is it? And since this is not a grafana issue you might want to look at something like this

3

I’m using nginx

server {
  listen 443 ssl;
  server_name my-grafana;
  client_max_body_size 15M;
  root /var/www/html;

  access_log /var/log/nginx/dashboards.dev-access.log;
  error_log /var/log/nginx/dashboards.dev-error.log;

  ssl                  on;
  ssl_certificate /etc/letsencrypt/livefullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/privkey.pem; # managed by Certbot
  ssl_protocols        TLSv1 TLSv1.1 TLSv1.2;

  location / {
    proxy_set_header HTTPS on;
    proxy_set_header X_FORWARDED_PROTO https;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host my-grafana;
    proxy_set_header Origin https://my-grafana;
    proxy_redirect off;
    proxy_read_timeout 10800s;
    proxy_pass http://10.11.0.1:4000;
  }
}

I understand that it’s not a direct issue with Grafana. I was just looking to learn about best practices or perhaps clever tricks. Through the same web server, Grafana’s native interface displays panel content instantly, but when loaded via iframes, loading multiple panels is significantly slower. Thanks.

1 Like
4

What do you see in your dev console of your browser network tab? might be better off posting such things in ngnix forum but I think @jangaraj might have something to say about your setup

5

Hello,

The bottom line is that the Grafana panel, when embedded using an iframe, contains all the basic styles and scripts to work independently and independently of the environment in which the embedding is performed.

However, when there are several dozen panels, each of the panels is loaded autonomously and independently, which requires a lot of resources.

My initial question is whether there are any tricks that would optimize the loading of content from Grafana.

For example, don’t download the same thing X times. Without embedding in Gradana’s native interface, dashboards work great. And through the same web server, in the same browser.

Thank you