Defer loading google charts

[Viktor Ka]

I have this google charts code which works fine:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" async>

google.load("visualization", "1", {packages:["corechart"]});

var t1 = 'IndexTitle'

var t2 = 'IndicatorTitle'

google.setOnLoadCallback(function(){drawChart1(t1)});

google.setOnLoadCallback(function(){drawChart2(t2)});

function drawChart1(t){

var data = new google.visualization.DataTable();

data.addColumn('string','Date');

data.addColumn('number','Close');

data.addColumn({type: 'string', role: 'tooltip'});

data.addRows([ChartIndexData...........]);

var options = {

title: t,

colors:['black'],  

legend: {position: 'none'},

chartArea:{left:60,top:20,width:'90%',height:'90%'}

  };

var chart = new google.visualization.LineChart(document.getElementById('chart1_div'));

chart.draw(data, options);

}

function drawChart2(t){

var data = new google.visualization.DataTable();

data.addColumn('string', 'Date');

data.addColumn('number', '');

data.addColumn({type: 'string', role: 'tooltip'});

data.addRows([ChartIndicatorData...................]);

var options = {

title: t,

legend: {position: 'none'},

chartArea:{left:60,top:20,width:'90%',height:'60%'}

 };

var chart = new google.visualization.LineChart(document.getElementById('chart2_div'));

chart.draw(data, options);

}<%

</script>

The problem is when I test the page on Google PageSpeed insite the score is 49/100 because of the script above:

Remove render-blocking 

JavaScript:https://www.google.com/jsapi

https://www.google.com/…ile=visualization&v=1&packages=corechart

https://www.google.com/…at+en,default+en,ui+en,corechart+en.I.js

Optimize CSS Delivery of the following:

https://www.google.com/…bdd6ab2d343a51d49841bf93d022fb/ui+en.css

https://ajax.googleapis.com/…static/modules/gviz/1.0/core/tooltip.css

As I understand I have to load javascript Asynchronous or defer the loading. How do I fix it.

[Daniel LaLiberte]

Hi Viktor,

You can set up a document onload handler and wait until then to call google.load().  That should allow the initial page load to complete before starting the chart rendering.

But then you also have to change your callbacks that you set up with google.setOnLoadCallbackI().  Instead of those calls, create one drawCharts function, and pass it to the google.load() call using the 'callback' property, like this:

function onloadHandler() {

  google.load("visualization", "1", {packages: ["corechart"], callback: drawCharts});

  

  var t1 = 'IndexTitle'

  var t2 = 'IndicatorTitle'

  function drawCharts() {

    drawChart1(t1);

    drawChart2(t2);

  }

}

document.onload = onloadHandler;

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Viktor Ka]

document.onload = onloadHandler;

did not worked. Tried

window.onload = function () { 

 google.load("visualization", "1", {packages: ["corechart"], callback: drawCharts});

 

 var t1 = 'IndexTitle'

 var t2 = 'IndicatorTitle'

 function drawCharts() {

   drawChart1(t1);

   drawChart2(t2);

 }

}

and it worked. Also, now I was able to change

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

to

<script type="text/javascript" src="https://www.google.com/jsapi" async></script>

which pushed the Google PageInsite score from 49 to 82. Still Google page insight shows

Optimize CSS Delivery of the following:

https://www.google.com/…bdd6ab2d343a51d49841bf93d022fb/ui+en.css

https://ajax.googleapis.com/…static/modules/gviz/1.0/core/tooltip.css

as I understand these CSS are loaded when

google.load("visualization", "1", {packages: ["corechart"], callback: drawCharts});

is called. How do I optimize that?

[Daniel LaLiberte]

window.onload is what I meant to suggest.  Glad it works for you.  You can, of course, move the contents of that handler out of the function, except for the google.load() call itself.

Since you are only loading the visualization library and its css files as late as possible, I don't think there is any thing more you can do to "optimize" it.  I wouldn't worry about it if the page performs well in your experience.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Viktor Ka]

the average page load time by google crawler is 620 milliseconds. the highest load time by google crawler is 1.2 seconds. So, I am not as worried by the load time as being penalized by google for having not mobile friendly page. For desktops the Google PageInsight gives score above 95 (green) out of 100 for my pages which I consider is good. Yet, for mobile devices, the score is 82 (yellow) for the pages that have charts because of the google apps.

It would be not good to get punished by google for using google tools. 

 

[Daniel LaLiberte]

Does this score translate into some actual punishment by google, or it just a score to alert you to the apparent performance of the loading behavior?

On Thu, Jul 2, 2015 at 11:08 PM, Viktor Ka <hghli...@gmail.com> wrote:

the average page load time by google crawler is 620 milliseconds. the highest load time by google crawler is 1.2 seconds. So, I am not as worried by the load time as being penalized by google for having not mobile friendly page. For desktops the Google PageInsight gives score above 95 (green) out of 100 for my pages which I consider is good. Yet, for mobile devices, the score is 82 (yellow) for the pages that have charts because of the google apps.

It would be not good to get punished by google for using google tools. 

 

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.