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

回答

相關問題