mercredi 1 juillet 2015

Deferring google charts

I have this google charts code which works fine:

<script type="text/javascript" src="http://ift.tt/JuZcy0"></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:http://ift.tt/JuZcy0
http://ift.tt/1GOX7nA
http://ift.tt/1HwfAdf

Optimize CSS Delivery of the following:
http://ift.tt/1GOX634
http://ift.tt/1HwfylR

As I understand I have to load javascript Asynchronous or defer the loading.

How do I fix it.

Aucun commentaire:

Enregistrer un commentaire