移除禁止轉譯 JavaScript

當 PageSpeed Insights 偵測到您的 HTML 參照了封鎖外部 JavaScript 檔案 (位於網頁不需捲動位置部分),就會觸發這個規則。

總覽

瀏覽器必須先剖析網頁,才能將網頁內容呈現給使用者。如果剖析時遇到封鎖外部指令碼,瀏覽器便會停止剖析並下載該 JavaScript。每當發生這種情形,都會增加網路來回行程,致使首次轉譯網頁的時間延遲。

建議

建議您以內嵌方式處理用於呈現不需捲動位置區域的 JavaScript,並且讓為網頁增添額外功能的 JavaScript 延後載入,直到不需捲動位置的內容傳送完成。提醒您,如要藉由這種方式改善載入時間,您還需要最佳化 CSS 的傳送方式

內嵌小型 JavaScript

如果外部指令碼很小,您可以將指令碼直接置入到 HTML 文件中。以這種方式嵌入小型檔案,瀏覽器就能繼續轉譯網頁。舉例來說,如果 HTML 程式碼的內容如下:

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

資源 small.js 則如下所示:

  /* contents of a small JavaScript file */

您即可像下方這樣嵌入指令碼:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

small.js 嵌入 HTML 文件,可消除對其的外部要求。

延後載入 JavaScript

為了防止 JavaScript 封鎖載入網頁,建議您使用 HTML async 屬性來載入 JavaScript。例如:

<script async src="my.js">

如果您的 JavaScript 資源使用 document.write,使用非同步載入就會不安全。我們建議重寫使用 document.write 的指令碼,改以其他技術取代。

此外,非同步載入 JavaScript 時,如果網頁載入的指令碼彼此具有相依性,請務必確認應用程式以正確的相依順序載入指令碼。

常見問題

如果使用 JQuery 這樣的 JavaScript 程式庫,該怎麼做?
許多 JavaScript 程式庫 (例如 JQuery) 都可用來強化網頁,為網頁添加互動性、動畫及其他效果。不過,這些行為大多可以在不需捲動位置的內容轉譯後再安全加入。請研究是否可以把這些 JavaScript 的執行和載入延後到網頁載入之後。
如果使用 JavaScript 框架來建構網頁,該怎麼做?
如果網頁內容是由用戶端的 JavaScript 建構,那麼您應該研究一下是否可以嵌入相關 JavaScript 的模組,以免產生額外的網路來回行程。同樣的,利用伺服器端轉譯可以有效改善首次載入網頁的效能:在伺服器上轉譯 JS 範本並嵌入到 HTML 中,一旦應用程式載入完成,即從用戶端進行範本化。如要進一步瞭解伺服器端轉譯,請參閱 http://youtu.be/VKTWdaupft0?t=14m28s