解決 PageSpeed Insights 顯示 javascript 禁止轉譯 (Render)

更新日期:2015-02-12

禁止轉譯到底是什麼東西?也就是網頁繪製過程中被塞住了,繪製被迫停了下來等待。像是使用 <script> ,網頁要等到它下載完並解析代碼完成才會再進行繪製,因此對較慢的server或是較大的js檔案來說,網頁會受到延遲展開。


因此 <script> 有一個屬性叫做『defer』,可以讓 js 檔案在背景繼續下載,而且網頁繪製不會停止,我們可以藉由下方的 function ,幫 wordpress 原本使用的 js 檔案,都增加這個 defer 屬性。

add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    return "$url' defer='defer";
}, 11, 1 );

補充:

用一個時間軸圖來解釋這個 defer 和 async

在〈解決 PageSpeed Insights 顯示 javascript 禁止轉譯 (Render)〉中有 2 則留言

  1. 我建議不要用了,因為有些 javascript 有時候必須要先載入執行,網頁才不會有錯誤,除非你能知道哪幾隻 js 可延後載入。
    至於 PageSpeed 分數,看看就好~

    回覆

發佈留言