[WP小技巧]How to eliminate render-blocking resources

Eliminate render-blocking resources簡介

什麼是eliminate render-blocking resources?

當Visitors 到一個網站時, 本地端的瀏覽器會開始從上到下讀取整個網站的內容, 過程中若遇到有CSS或是JavaScript(JS)這二種檔案類型時, 就會暫時轉換HTML的畫面, 而造成載入效能降低, 這樣子就很有可能讓使用者立刻離開!

在GTmetrix and PageSpeed Insights 這二個線上測試網站中, 就會出現建議改善的項目!

下方內容會先以CSS的部份來做調整, 再來才是JS的部份.

Purify CSS

一開始進入PurifyCSS Online這個網站, 然後輸入要測試的網址, 再來按下[Clean up CSS], 等一會之後, 下方就會呈現目前有哪些是沒使用的狀態, 最後點選[download combined ,purified & minified CSS]就能下載修改後的CSS檔.

複製styles.pure.css內容

下載後, 直接開啟此檔案, 把裡面所有的內容先複製起來, 下圖所顯示只是一部份的內容, 此檔內容很多.

修改Autoptimize外掛中的內容

要使用這個功能, 需先安裝Autoptimize此外掛, 勾選[CSS Options / Eliminate render-blocking CSS? ], 然後貼上剛才所複製的內容就可以, 最後要記得儲存且清除cache才會有作用.

Defer JavaScript

JS與HTML的互動關係有三種:

• Script
• Async Script
• Defer Script

Script-> HTML會先轉換畫面, 當碰到JS檔案時, 先暫停轉換, 優先下載JS然後執行它, 再接著後續動作. (預設行為).

Async Script–>HTML會先轉換畫面, 當碰到JS檔案時, 會利用非同步方式, 同時下載JS, 然後要執行JS的時候, 才會暫停轉換, 再接著後續動作.

Defer Script–>HTML會先轉換畫面, 當碰到JS檔案時, 會利用非同步方式, 同時下載JS, 直到轉換畫面完成後, 才會執行JS.

通常會利用外掛來改變它的行為, 但外掛的數量過多, 也會讓網站效能降低, 所以這裡用代碼方式去做替換.

先到網站主機內, 找尋佈景主題的位置, 然後編輯[functions.php]這個文件, 大多都是以下路徑:

//public_html/wp-content/themes/使用中的佈景主題名稱/ , 加入以下代碼, 就完成了.

[溫馨提醒]

修改任何佈景主題內的文件時, 建議使用子佈景主題, 以避免造成網站不正常!

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

重新測試

到這裡就完成了, 可以再次線上測試了! 這裡還是要注意, 如果網站有掛廣告輪播時, 也要注意是否顯示正常!

總結:

利用以上的方法, 可以改善網站載入的速度, 儘管有些複雜的步驟, 但有基礎能力的網站主, 相信並不難做到.

以上僅供參考!

Share via: