內容簡介
這個外掛可以優化 WordPress 主題的頁面渲染。
功能
加上 loading="lazy" 或 loading="eager" 屬性到你的圖片中。
將 defer 或 async 屬性加在你的 script 上。
將 rel="preload" 屬性加在你的樣式表上,同時提供舊版本的瀏覽器 Polyfill。
移除內嵌式物件(如 Twitter 和 Instagram)預設的 script,等到使用者開啟預覽時再載入 script。
上述功能都是可選的,你可以透過白名單進行自訂。
案例 1. 圖片載入
如果你希望標題圖檔(.custom-logo)和主要文章縮圖(.post-feature-image)可以更快載入,因為它們是畫面中重要的元素,
只需要在設定畫面的「優先度高」欄位中輸入 custom-logo,post-feature-image,即可。
案例 2. 停止延遲載入
把 script 延遲載入的方式有時會破壞你的網站。
比方說,如果一個使用 inline script 標籤的 script 需要即時操作,這個方式就會失敗。
<script id="some-script-js" src="somescript.js" defer></script>
<script>
new SomeScript();
</script>
要避免這種情況,只需要在設定畫面的「禁止延後」欄位中輸入 some-script 即可。
通常情況下,WordPress 中載入的許多 JavaScript 都源自 WordPress 核心、插件、主題、自訂程式碼等等。
為了優化 JavaScript 載入,試誤法可以很有效。
案例 3. 關鍵樣式表
rel="preload" 屬性可以讓樣式表非同步載入,但是會造成 FOUC(Flush of Unstyled Content) 現象。
為了避免這種情況,在設定畫面的「禁止清單」欄位中加入關鍵的 CSS,通常來說是主題的主樣式表。
外掛標籤
開發者團隊
原文外掛簡介
This plugin optimize page rendering of WordPress theme.
Features
Add loading="lazy" or loading="eager" with your images.
Add defer or async attributes to your scripts.
Add rel="preload" to your stylesheets. Polyfill for old browsers is also available.
Remove default script helper of embeds(twitter, instagram) and load one after user interaction.
All of above are selectable and you can customize with white list.
Case 1. Image Loading
If you wish header logo(.custom-logo) and main post thumbnail(.post-feature-image) should be load faster because they are in first view.
Just put custom-logo,post-feature-image at High Priority section in your setting screen.
Case 2. Stop Defer
Defering JavaScripts sometimes breaks your site.
For example, if a script requires just in time operation with inline script tag, it will fail.
To avoid this, Add some-script handle name in Deny Defer section in your setting screen.
Generally speaking, many JavaScripts loaded in your WordPress are issued by WordPress Core, plugins, themes, your custom code, and so on.
To optimize JavaScript loading, try and error approaches works fine.
Case 3. Critical Stylesheet
rel="preload" attributes makes your stylesheets loaded asynchrounsely, but FOUC(Flush of Unstyled Content) happens.
To avoid this, include critical CSS to Deny List in your setting screen. Critical CSS are generally your theme’s main stylesheet.
