使用PageSpeed消除jQuery的渲染阻塞JavaScript

我在页面底部添加了jQuery。然而，当我在PageSpeed Insights的运行我的网站（移动），我得到的错误：使用PageSpeed消除jQuery的渲染阻塞JavaScript

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 2 blocking script resources and 1 blocking CSS resources.

This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load.

Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

见：http://learnyourbubble.com和https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=mobile

然而，jQuery是在页面的底部加入。所以它应该低于折扣。

我该如何删除此错误？

来源

2016-04-25 Yahya Uddin

这篇文章应该解释很多发生的事情的：https://varvy.com/pagespeed/critical-render-path.html

总之，虽然问题是，镀铬需要加载jQuery和你的基础的javascript给最初呈现页面的。这就是为什么它阻止。仅仅是因为javascript出现在html之后，并不意味着html可以显示。当jquery/foundation被加载时，DOM的渲染仍然会阻塞，因为chrome认为它们对正确显示的页面至关重要。 Pagespeed特别抱怨这些问题，因为它们很大。为了缓解这个问题，你可以做几件事情，其中一些在上面的文章中有详细描述，其中一些在这里https://developers.google.com/speed/docs/insights/BlockingJS。告诉Chrome最简单的方法是，这些脚本不是至关重要的，并且可以在“下面”加载它们，即向它们添加defer或async标记。

来源

2016-04-25 02:24:09 jpopesculian

我不知道你的意思，因为它实际上抱怨'jquery.min.js'，'foundation.min-b3d0e64456.js'和'风格3cc919a01d.css'。我明白为什么它会抱怨这种风格。css'，但我不明白为什么它会抱怨另外两个js文件，就像页面结束一样。我为这个问题添加了一个pagespeed链接。请记住我正在查看的“移动”标签。 –

你是完全正确的！我的答案与真正的问题无关。我做了一个快速编辑并提供了一些资源。 – jpopesculian

你试过装异步

Make JavaScript Asynchronous By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we recommend using the HTML async attribute on external scripts. For example:

<script async src="my.js">

See Parser Blocking vs. Asynchronous JavaScript to learn more about asynchronous scripts. Note that asynchronous scripts are not guaranteed to execute in specified order and should not use document.write . Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.

来源

2016-04-25 03:29:17 NooBskie

我看到错误调用基金会（），但我会假设你已经删除它来排除这种可能性，但是这可能是因为之前这个相同的调用发生加载。尝试总是附上你的代码，如：

(function($) { 
    // DOM ready 
})(jQuery);

来源

2016-04-25 03:31:17 Dylan

它与你的字体文件。

请看瀑布中的请求19和20。这些字体文件被认为是CSS。

注意到字体文件加载之后第一次绘制（绿色垂直线）是如何发生的？

然后注意15个JS文件被加载到字体（CSS）文件的前面。

这就是谷歌正在采取的。

拥有16个JS文件已超越过度。

试试这个：在浏览器中禁用JavaScript。注意唯一的变化是在菜单标题中。有16个JS文件值得吗？我想不是。

来源

2016-05-09 23:36:14 Misunderstood

-1

请与它的工作对我来说延迟标签尝试。

<script src="filename.js" defer>

来源

2017-10-24 09:32:30

使用PageSpeed消除jQuery的渲染阻塞JavaScript

回答

相关问题