如何让我的 Grafana iframe 加载得更快？

Question

I embeded 12 Grafana charts via iframe into my page

It take about ~ 21 seconds to load the page.

This same dashboard take on 3 seconds if I load it on the Grafana's site itself.

This is how I embedded it:

ajax.done(function (titles) {

// console.log('%c titles = ' + titles, "color: green;");

for (var i = 0; i < titles.length; i++) {

    var data         = {};
    data.sessionName = "{{ $sessionName }}";
    data.type        = "{{ $type }}";
    data.title       = titles[i];

    // console.log(JSON.stringify(data));

    $.ajax({
        method: 'POST',
        url: `/graphs/chartsBaseOnTitle`,
        crossDomain: true,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
            "Accept": "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
            "Cache-Control": "no-cache"
        },
        data: data,
        success: function(charts){

            // console.log('charts = ', charts);

            for (var i = 0; i < charts.length; i++) {

                var title     = charts[i].accordionTitle.replace(" ", "");
                var iFrameUrl = charts[i].iFrameUrl;
                var colSize   = 12/charts.length;

                var iframe = `
                <div class="col-sm-${colSize}">
                <iframe async id="${title}" src="${iFrameUrl}" width="100%" height="451px" frameborder="0"></iframe>
                </div>
                `;

                $('div#'+title).append(iframe);

                console.log('%c title = ' + title, "color: green;");

            }


        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });



}
});

What can I do different to reduce this huge latency ?

Answer 1

58.1 MB transferred - that's because you have 12 iframes = 12 Grafana windows and each iframe loads the same static files again and again:

• you may try to enable enable_gzip Grafana config
• ads proper cache headers to static Grafana resources, so they will be cached in the browser and they don't need to be redownloaded again and again - you may need reverse proxy in front of Grafana for that
• enable http2 protocol - you may need reverse proxy in front of Grafana for that

You may also to create first iframe and other iframes creates only when first iframe is loaded (or adds static delay).