Javascript 稍后加载元素，以提高页面速度，但使其对SEO可见？

我正在使用billboard.js显示页面折叠下方的某个位置

添加billboard JS代码导致我的移动页面速度从90+下降到75-80

我的代码的结构如下：

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

$.getScript('/js/d3.v5.min.js', function() {
    $.getScript('/js/billboard.min.js', function() {
        $.getScript('/js/moment.min.js', function() {
            //the rest
        });
    });
});

...
...
...
函数绘图图（t）{$（“.chart_holder”）.show（）；

有没有办法让图表稍后加载，以解决谷歌页面速度问题，如：

• 减少JavaScript执行时间
• 保持请求计数低，传输大小小（额外的JS文件相当大）

• 最小化主线程工作（脚本评估）

同时，允许搜索引擎爬虫理解我通过向访问者显示数据图表为他们提供了附加值？这可能有利于SEO，因此我不想以谷歌看不到的方式隐藏图表

编辑：

这就是图表的名称：

$(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")
        }
    }
    )
}

$（文档）.ready（函数（）{
$.ajax（{
类型：“GET”，url：“chart/data.php”，数据类型：“json”，数据：{
项目id:“项目”
}
，成功：功能（t）{
void 0！==t.criteria？t.criteria[0]。长度警告：这是基于这样的假设，即如果延迟1秒，谷歌页面速度计算将不计算脚本加载，我还没有验证自己。谷歌页面速度计算脚本将来可能会更改，请确保在有延迟和没有延迟的情况下进行测试。

注意：当然，如果整个页面的显示依赖于脚本，这可能会损害用户体验。对于OP的问题，这似乎是可以接受的

这里的技巧是在页面加载后使用1000毫秒的超时来加载脚本，完成后，显示图表：

$(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);
});

最小化http请求
billboard.js提供了d3+billboard.js的打包版本


所以，如果您需要处理文件计数，请处理打包版本

惰性渲染
从
1.11.0
版本中，添加了延迟图表渲染的新功能。（内部将保留渲染过程）


var图表=bb.generate({
...,
呈现：{
懒惰：是的，
注意：错误
}
});
setTimeout（函数（）{
//在要渲染的点调用“.flush（）”
chart.flush（）；
}, 1000);
由于您没有说明如何调用drawChart，假设您在某处也有
drawChart（“t”）；
，猜测可能是使用
setTimout（function（）{drawChart（“t”）}，10）；
或者，作为jquery，
$（function（）{drawChart（“t”）；}延迟调用
我已经编辑了我的代码。你能告诉我应该修改哪一行吗？延迟对SEO来说仍然可见吗？小心。任何关于SEO的问题都是离题的，会让你的问题结束。坚持提高速度，不要问SEO。你的新代码显示你的图表在页面加载后已经加载（在第二次请求获取数据后）。因此，请求在以后加载数据是没有意义的。@Rob good catch-表明人们从不阅读他们添加到问题中的标签！