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

前言介紹

  • 這款 WordPress 外掛「Async JS and CSS」是 2013-08-24 上架。
  • 目前有 1000 個安裝啟用數。
  • 上一次更新是 2017-11-28，距離現在已有 2713 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 2.6 以上版本才可以安裝。
  • 有 51 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

dmikam |

外掛標籤

JS | async | headjs | javascript | asynchronous |

內容簡介

當網頁被瀏覽器加載時，所有放置在 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 標籤之前載入：

* 插入 標籤

* 插入 標籤

* 在所有文件加載後，生成帶有 JavaScript 的 標籤

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

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

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

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

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

原文外掛簡介

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

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Async JS and CSS」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

最新版本

延伸相關外掛（你可能也想知道）

  • Clear Cache for Me 》Clear Cache For Me 是一個 WordPress 外掛，適用於 W3 Total Cache 和 WP Super Cache，因為它們不知道 widget 何時更新，且在更新 widget 和 menu 時都不會...。
  • SOGO Add Script to Individual Pages Header Footer 》已經在 Gutenberg 上進行測試, 創建一個簡單的方式，為個別頁面、文章或自訂文章類型的標題和頁腳添加 JavaScript 代碼，, 例如: 在感謝頁面上添加轉換代碼, ...。
  • LuckyWP Scripts Control 》「LuckyWP Scripts Control」外掛允許您將自訂代碼插入和管理網站。例如，您可以插入 Google Analytics 代碼、Google Search Console 驗證元標記、Facebook ...。
  • Simple Header Footer HTML 》這個外掛可以讓您的使用者插入自訂的 CSS，或是加入自訂的標頭或 JavaScript 到網站中，而不必編輯主題檔案。與類似的標頭/底部外掛不同的是，這個外掛的設計...。
  • Shadowbox JS 》Shadowbox 是一款支援網路上所有最流行的媒體發佈格式的線上媒體觀看應用程式。Shadowbox 基於 JavaScript 和 CSS 撰寫，且高度可自訂。透過使用 Shadowbox，...。
  • ReactPress – Create React App for WordPress 》ReactPress 讓你可以輕鬆地創建、構建和部署 React 應用程序到現有的 WordPress 網站。使用你的 React 知識為你的 WordPress 客戶創建單頁應用程序。, 只需幾...。
  • JS & CSS Script Optimizer 》功能, , 將多個腳本群組成單個文件（最小化 http 請求次數）, 將多個 CSS 文件組合成單個文件（使用「media」進行分組）, 使用 Dean Edwards 的 JavaScript P...。
  • Add Admin JavaScript 》此外掛提供了新增自訂動態功能至 WordPress 管理員頁面及應用 JavaScript 的能力。您可以透過此插件輕易地定義要新增到所有管理員頁面中的 JavaScript，包含...。
  • WP Minify Fix 》這個外掛是 WP Minify 的分支，旨在修復錯誤和添加功能，因為 WP Minify 自 2012 年 6 月 4 日以來就沒有進行更新了。, 這個外掛將Minify engine整合到您的 W...。
  • Append Link on Copy 》透過這個外掛，您可以自動在從您的網頁複製的內容中添加文字或 HTML。, 當訪客從您的網站複製任何文字時，會附加連結至該頁面，因此如果文字貼上到其他地方，...。
  • Typed JS: A typewriter style animation 》。
  • Custom CSS/JS 》歡迎使用由PieSolutions開發的 WP Custom CSS JS 外掛。, 如果您想在網站上增加 HTML、CSS、Javascript、Jquery 或追蹤像素，而又不想去更動主題檔案，這個輕...。
  • Specific CSS/JS for Posts and Pages 》Specific CSS/JS for Posts and Pages 是一個外掛，允許你為特定的文章或頁面加入自訂的 CSS 或 Javascript 檔案，或是直接在標頭中嵌入程式碼。, 外掛官方網...。
  • NGT jsDelivr CDN 》這個外掛會將所有 WP 核心資源替換成由 jsDelivr 提供的版本。, 以下的條件必須符合，才能從 jsDeliver 提供外掛資源：, , 該外掛必須在 wp.org 上托管。商業...。
  • Optimize More! 》這是一個「自助」WordPress頁面速度優化套件。, 控制您的CSS和JS交付：異步載入CSS，延遲CSS和JS直到用戶互動，刪除未使用的CSS和JS文件，預加載關鍵CSS和JS...。

文章
Filter
Apply Filters
Close
Mastodon