Question

我有这个谷歌图表代码，工作正常：

<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>

问题是当我在Google PageSpeed上测试网页时，由于上面的脚本，得分为49/100：

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

据我所知，我必须加载javascript Asynchronous或推迟加载。

如何修复它。

Answer 1

尝试

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

  var t1 = 'IndexTitle'
  var t2 = 'IndicatorTitle'

  function drawCharts() {
    drawChart1(t1);
    drawChart2(t2);
  }
}

它有效。此外，现在我能够改变

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

到

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

将Google PageInsite的得分从49推高到82.仍然是Google pageInsight显示

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

据我所知，这些CSS是在

时加载的

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

被调用。我该如何优化呢？

推迟谷歌排行榜

1 个答案: