1

I'm using billboard.js to display this type of chart somewhere below the fold of my page.

Adding the billboard JS code is causing my mobile page speed to decrease from 90+ to 75-80.

My code is structured like this:

<!-- chart area -->
<div class="chart_holder">
    <div id="chart_area"></div>
</div>
...
...
...
<script src="/js/d3.v5.min.js"></script>
<script src="/js/billboard.min.js"></script>
<script defer src="/js/moment.min.js"></script>
<script type="text/javascript">function drawChart(t){$(".chart_holder").show(),.........);</script>

Is there any way to make the chart load later, in order to solve google page speed issues like:

  • Reduce JavaScript execution time

  • Keep request counts low and transfer sizes small (Extra JS files are pretty big)

  • Minimize main-thread work (Script Evaluation)

While at the same time, allow Search engine crawlers to understand that I'm providing added value to my visitors by displaying them data charts? It might be good for SEO so I don't want to hide the chart in a way that google can't see it for example.

EDIT:

This is how the chart is called:

$(document).ready(function() {
    $.ajax( {
        type:"GET", url:"chart/data.php", dataType:"json", data: {
            item_id: 'item'
        }
        , success:function(t) {
            void 0!==t.criteria?t.criteria[0].length<=2?$(".chart_holder").hide(): drawChart(t): $(".chart_holder").hide()
        }
        , error:function() {
            console.log("Data extraction failed")
        }
    }
    )
}
user8411456
  • 347
  • 1
  • 5
  • 18
  • As you don't state how you're calling drawChart, assuming you also have `` somewhere, a guess might be to delay that with `` or, as jquery, `` – freedomn-m Dec 13 '19 at 11:25
  • I've edited my code. can you tell which line exactly should I modify? and will delaying it still be visible for SEO? – user8411456 Dec 13 '19 at 11:39
  • Careful. Any questions about SEO are off topic and will get your question closed. Stick to speed improvement and don't ask about SEO. – Rob Dec 13 '19 at 11:41
  • Your new code shows that your chart is **already** loading after the page has loaded (after a 2nd request to get the data). So a request to load it *even* later makes no sense. – freedomn-m Dec 13 '19 at 11:42
  • @Rob good catch - shows people never read the tags they add to their questions! – freedomn-m Dec 13 '19 at 11:45
  • I read the tag and it is programming related - simply make sure that the crawler sees the content. its a factual question. the question is not whether it will be beneficial or not. Is there any other way then to increase page speed with this code? – user8411456 Dec 13 '19 at 11:50
  • "page speed to decrease from 90+ to 75-80" has no meaning by itself, I guess you mean in the stats from Google (which is meaningless for any other than Google). Please don't call me picky, page analysis scripts can behave very differently. Can you confirm on that point? – Kaddath Dec 13 '19 at 13:01
  • @Kaddath I elaborated in my question 3 bullet points of why the score decreases, and it revolves around the extra JS used by this billboard.js. – user8411456 Dec 13 '19 at 14:04
  • I hesitate to post as an answer because I haven't tested myself, but it seems [from a comment in an old answer of mine](https://stackoverflow.com/a/50411411/7393478) that since recently, a 1 sec timeout is necessary for it to work for Google. You can try to combine this answer (the load listener part) with [what's there](https://stackoverflow.com/questions/9611714/delay-script-loading) to see if this works.. – Kaddath Dec 13 '19 at 14:32
  • how will it differ from document ready? – user8411456 Dec 13 '19 at 14:43
  • Yeah sorry, you use jQuery while the OP in the question I answered wasn't. You can use document ready to lauch the `setTimeout` of 1000ms that will add the script and draw the chart, of course. In case of jQuery it can be simpler to load the script with [this method](https://stackoverflow.com/questions/7111131/best-way-of-dynamic-script-loading) then – Kaddath Dec 13 '19 at 16:04
  • Can you post it as solution? I don't understand how to modify my code – user8411456 Dec 13 '19 at 17:38
  • I added the code, please let me know if it works for Google page speed ;) – Kaddath Dec 17 '19 at 13:05

2 Answers2

1

CAUTION: this is based on the assumption that Google page speed calculations will not count the script loading if it is delayed 1 second, I haven't verified myself. Google page speed calculation script may change in the future, be sure to test with and without the delay.

NOTE: of course it can be damaging for user experience if your entire page display rely on the script. For the OP's problem, it seems acceptable.

The trick here is to use a timeout of 1000ms after page load to load the script and when done, display the chart:

$(document).ready(function() {
    setTimeout(function() {
        //you may need to change URL to a full URL here (with 'http://domain.etc')
        $.getScript('/js/billboard.min.js', function() {
            //you probably can keep this in your <script> tag, put it here if you have 'X is undefined' errors coming from calls to billboard's stuff
            function drawChart(t){$(".chart_holder").show(),.........);
            //your ajax call and the chart display
            $.ajax( {
                type:"GET", url:"chart/data.php", dataType:"json", data: {
                    item_id: 'item'
                },
                success:function(t) {
                    void 0!==t.criteria?t.criteria[0].length<=2?$(".chart_holder").hide(): drawChart(t): $(".chart_holder").hide()
                },
                error:function() {
                    console.log("Data extraction failed")
                }
            } );
        });
    }, 1000);
});

ALSO: It's not clear from the question if you need the 3 scripts in the code for the chart or only billboard. If you want to delay the 3 of them, you need to chain getScript calls like this:

$.getScript('/js/d3.v5.min.js', function() {
    $.getScript('/js/billboard.min.js', function() {
        $.getScript('/js/moment.min.js', function() {
            //the rest
        });
    });
});
Kaddath
  • 5,933
  • 1
  • 9
  • 23
0

Minimizing http request

billboard.js provides a packaged version of d3 + billboard.js.

https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js

So, if you need to deal with file counts, deal with packaged version.

Lazy rendering

From the 1.11.0 release, added new feature to delay chart rendering. (Internally it will hold the rendering process)

https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender

var chart = bb.generate({
  ...,
  render: {
    lazy: true,
    observe: false
  }
});

setTimeout(function() {
    // call '.flush()' at the point you want to be rendered
    chart.flush();
}, 1000);
Jae Sung Park
  • 900
  • 6
  • 9