[WordPress] 外掛分享: Async JS and CSS

首頁外掛目錄 › Async JS and CSS
800+
安裝啟用
★★★★
4.2/5 分(51 則評價)
3033 天前
最後更新
問題解決
WordPress 2.6+ v1.7.13 上架:2013-08-24

內容簡介

當網頁被瀏覽器加載時,所有放置在 HEAD 標籤內的東西都會在頁面內容之前以阻止方式先載入。所以內容會在最後一刻,也就是所有 JavaScript 和 CSS 檔案載入後才傳送給使用者。

如果你是一個網站管理員或只是想讓你的網站在搜尋引擎上的排名更好(是的,他們更喜歡更快的網站),只需看看 Google PageSpeed ​​Insights,你會發現最重要的事情之一是速度,而你的網頁速度緩慢的原因之一就是 "渲染阻塞 JavaScript 和 CSS"。

本外掛會使所有由其他外掛載入的腳本都以非同步方式載入,就像 Google PageSpeed ​​Insights 建議的一樣。
所有 CSS 檔案將直接插入到文件代碼中,或從文件開頭移至結束之前,就在關閉 BODY 標籤之前(或就在您放置 wp\_foot() 函式的地方)。有各種方法可以實現這一點 - 它們都在外掛的配置頁面中。

外掛使用 wp\_enqueue\_script 使所有腳本以異步方式載入,也可以檢測 wp_head 和 wp_footer 鉤子中包含的腳本。

使用 wp\_enqueue\_style 加載的所有 CSS 檔案可通過四種方法之一在關閉 BODY 標籤之前載入:

* 插入 <link rel =" stylesheet " ...> 標籤

* 插入 <style>@import url(...);</style> 標籤

* 在所有文件加載後,生成帶有 JavaScript 的 <link rel =" stylesheet " ...> 標籤

* 將所有 CSS 代碼直接插入到文檔中(最快的方式)

我受到了異步 JavaScript 的啟發,因此創建了這個小型外掛。但它的工作方式完全不同。

已知的不兼容問題
* Internet Explorer 7 - 某些腳本可能無法正確載入(正在嘗試解決)

* 外掛 - WP JetPack - Share - 一切正常,但 "More" 下拉菜單有問題

* 外掛 - Google Analyticator
特別感謝:* NicMic
待辦事項
* 內聯 JS
* 最小化 JS
* 快取

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.7.13) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Async JS and CSS」→ 直接安裝(推薦)

原文外掛簡介

When your page is loaded by browser – all that stuff placed in HEAD tag is loaded before the page content – in blocking way. So the content is delivered to user in the last moment, after all javascript and css files are loaded.
If you are a webmaster or just want to make your web to make better your positions on search engines (yes, they preffer faster webs), just take a look on Google PageSpeed Insights – you’ll see that one of the mos important things is fastenes and one of the reason why your page is not so fast – is “Render-blocking JavaScript and CSS”.
This plugin makes ALL scripts loaded by other plugins to be loaded in asynchronous way just like Google PageSpeed Insights recommends.
All CSS files will be inserted inline into the document code or moved from the document beginning to the end, just before closing BODY tag (or just where you placed wp_foot() function). There are various methods to do that – they are all in plugin’s configuration page.
Plugin makes all scripts to be loaded asynchronously using wp_enqueue_script and also can detect scrips included inside of wp_head and wp_footer hooks.
All CSS files loaded using wp_enqueue_style can be loaded just before closing BODY tag by four methods:
* inserting tag

* inserting

* generating tag with javascript after all have loaded

* inserting ALL CSS CODE INLINE into the document (the fastest way)

I was inspired to create this small plugin by Asynchronous Javascript but it works in completely different way.
Known incompatibilities
* Internet Explorer 7 - Some scripts could be loaded impropertly (trying to fix it)

* Plugin - WP JetPack - Share - everithing works but "More" dropdown menú

* Plugin - Google Analyticator

Special thanks

* NicMic

TODO

* Inline JS
* Minify JS
* Cache

延伸相關外掛

文章
Filter
Apply Filters
Mastodon