Perfmatters(簡稱PM)是WordPress性能、速度優化必備插件，使用它可以禁用無用CSS、JS，生成關鍵CSS，延遲加載JS和圖片，預加載關鍵資源等，非常強大好用。100%專注于提高Google Core Web Vitals分數。
如果要想在谷歌測速在工具中獲得手機端和電腦端95分以上，強烈推薦使用Perfmatters，優化效果比Wp Rocket還好。PM是付費插件沒有免費版本，點擊下載Perfmatters插件，永久更新，經過源代碼對比和殺毒驗證非常安裝。
下面是我們建站客戶網站在Gtmetrix.com和谷歌測速結果，由Astra Pro+Elementor Pro搭建，使用Perfmatters優化。速度非常快，而且還有優化空間，看結果不錯我們懶得進一步優化而已。
雖然插件很強大，但如果Perfmatters設置不到位，使用不當效果大打折扣。就跟畫畫一樣，除了工具，技法和經驗也非常重要。下面分享一些設置建議和優化思路，如有疑問歡迎評論留言。
注意：Perfmatters插件只是優化資產和圖片加載，要想全面進一步提升網站速度還有很多優化工作要做，具體請查看《終極WordPress速度優化教程》。
Perfmatters設置教程
Perfmatters設置很重要，要根據自己網站情況去設置才能發揮效果。下面教程使我們手寫干貨，希望對你有幫助。如果喜歡看視頻，可以看這個Youtube視頻(需要翻墻)，插件作者親自講解設置。
注意：同一個功能只能在一個地方(插件)啟用，多個地方啟用會有沖突。如果使用了Perfmatters的功能，要在其它插件禁用相同功能。
常規設置
點擊“設置” > “Perfmatters”進入Perfmatters常規設置界面。
按下圖設置，這是禁用一些不必要的功能和代碼。每個設置旁邊有個圓圈問號
，點擊可以查看詳細解釋。按鈕藍色代表已禁用，按鈕灰色代表不禁用。下面只解釋比較重要的設置內容，有疑問留言評論，我們看到都會回復。
注意：建議每禁用4項，打開主要頁面看下顯示是否正常，如有異常逐一取消禁用排查問題。
禁用表情符號：表情符號會加載wp-emoji-release.min.js，如果你的網站沒有使用表情符號(一般用于插入文章內容中)，建議禁用(99%網站不會用到它)。
禁用面板圖標：Wordpress自帶有圖標庫，會在前端加載一個Dashicon資源，不建議禁用。后臺登錄頁面密碼旁邊的眼睛圖標，前臺登錄狀態頂部顯示的狀態欄圖標都需要用到它，Variation Swatches for WooCommerce 之類插件也會用到它。
建議在資源管理器里面設置非登錄狀態禁用該資源，這樣速度快又不影響圖標正常使用。
移除jQuery遷移：“jQuery遷移”就是“jQuery Migrate”。 “jQuery Migrate”的作用是提升高級版本和低級版本代碼的兼容性，只有含有舊代碼的主題/插件會使用到它，現在大多數最新版本/主題插件都沒使用它。
建議先禁用它，檢查頁面顯示和功能是否有異常。如果一切正常繼續禁用，有異常取消禁用。
注意：目前(2024.7.02)Astra Pro固定頁眉功能用到“jQuery Migrate”，如果有啟用固定頁眉不能禁用“jQuery Migrate”。如果手動添加JS代碼實現固定頁眉功能，可以禁用。
禁用REST API：建議保存默認(開啟)。REST API是一個接口，塊編輯器、小程序、一些插件會用到它。如果你網站沒用到REST API，可設置為“登出時禁用”。下圖插件和功能使用REST API，如果不懂是什么意思建議選擇“默認(開啟)”。如果禁用要測試網站功能，有異常就啟用。
Password Protect WordPress插件、Contact Form 7、古騰堡編輯器、Elementor form等都用到REST API，需要選擇“默認(開啟)”。
移除評論：移除文章評論框，訪客無法評論。如果文章不需要評論功能可以關閉，一般不建議移除。文章評論有助于提高客戶體驗和SEO效果。平時應該盡量多讓訪客留下評論。
移除評論的URL：移除后文章評論框里的URL輸入框會消失，訪客無法輸入網址。可以避免垃圾外鏈，建議移除。
Remove Global Styles：如果你不使用谷騰堡編輯器的雙色濾鏡功能，就禁用這個，可以減少300多行代碼。我不使用古騰堡編輯器，就會禁用。
禁用Heartbeat：跟Wp Rocket的“心跳控制功能”是同個功能。作用：1-當您從編輯器創建/編輯文章時，它提供了定期自動保存文章功能；2- 如果有人正在編輯某個內容，列表頁會提示下圖內容“xxx當前正在編輯”。
建議選“只允許在編輯帖子/頁面時使用”，“Heartbeat 頻率”選60秒。可以大大減小CPU 使用率和大量 PHP 調用，減輕服務器負擔。
Heartbeat頻率：選最高60秒。
限制帖子修改：選擇“禁用帖子修改”。帖子修訂就是自動保存舊版本的文章/產品等，以便以后可以恢復它們，這會減慢數據庫以及占用很多磁盤空間。
絕大部分情況下我們不會去恢復舊版本的帖子，建議禁用此功能加快網站速度。如果需要這個功能，可以限制帖子修訂數量為1或2。
自動保存時間間隔：建議設置為5分鐘。默認情況下WordPress 每 60 秒自動保存一次文章、產品草稿，在斷網等情況下重新打開/加載頁面可以從自動保存的草稿中恢復內容，避免內容丟失。
Custom Login URL↑：修改后臺登錄地址，大大增加網站安全性。WordPress后臺默認登錄網址統一為xxx.com/wp-admin，很容易受到攻擊。這里輸入內容可以替換掉網址后綴”wp-admin”。
例如輸入dsdg-3ffa，后臺登錄地址會變成xxx.com/dsdg-3ffa/。修改后注意保存新登錄地址！
Disable Behavior如果選Message↓，進入后臺默認登錄網址會顯示Message那欄里面內容。還可以選擇顯示404錯誤頁面，自動跳轉到首頁，重定向到其它網址。
如果忘記后臺新登錄網址，進入FTP的wp-content文件夾，找到perfmatters這個文件夾，重命名為perfmatters#。這會禁用perfmatters插件讓新登錄地址失效，就可以使用舊登錄地址xxx.com/wp-admin登錄。
成功登錄后把文件夾名字從perfmatters#改回成perfmatters。進入插件列表頁，點激活perfmatters即可重新啟用插件，然后再查看/修改登錄網址。
如果是帶購物功能的電商網站，全部不要禁用！如果是2B外貿網站沒有在線購物功能，建議禁用上圖紅色框3項，很安全，點擊選項隔壁圓圈問號查看每個選項具體禁用哪些功能。
禁用腳本：禁用后，除了購物車、結帳頁面、個人帳戶頁面、產品列表頁、商店頁面、產品詳情頁、產品標簽頁外，其它所有頁面會刪除下圖Woocommerce代碼，大大提升頁面加載速度！
提示：2C電商網站不要開啟此功能。因為每個頁面頁眉一般會有購物車以及個人頭像圖標，如果啟用“禁用腳本”功能會導致購物車個個人頭像功能異常。
注意：禁用腳本后首頁也會禁用這些代碼導致無法在首頁通過短代碼或者Elementor 產品小部件插入產品，請按需決定是否禁用。不過也有解決方法。
我們建站會開啟“禁用腳本”這個功能，使用Elementor的“圖片框”小部件插入產品/。小部件的圖片用產品圖片，標題用產品標題，鏈接欄填入產品鏈接就行。或者更簡單的方法是使用“posts”小部件，調取顯示產品。
例如下圖我們首頁文章版塊，其實是用3個“圖像框”小部件
制作，也可以用同樣方法顯示產品(顯示不了價格)。
還有另外一種方法是使用Perfmatter的perfmatters_disable_woocommerce_scripts濾鉤子(hook)排除具體頁面禁用Woocommerce代碼。
如果你不懂上面這2個方法，又需要在首頁插入產品，不要禁用這個功能。改成手動在文章列表頁、文章詳情頁、聯系我們頁面、關于我們頁面等不使用Woocommerce的頁面手動禁用上面代碼，就是稍微麻煩點。
Assets設置
這一頁設置是最重要、最復雜、最麻煩的功能。速度提升主要靠它，仔細認真看。
打開啟用腳本管理器，可以禁用無用CSS/JS。
詳解JS異步(defer/async)和延遲加載(delay)區別
先了解一下JS異步(defer/async)和延遲加載(delay)的區別，有助于更好理解使用Perfmatters異步、延遲JS功能。
一個頁面有很多種代碼，一般情況下從上到下依次是CSS > JS > 主體html(網站內容)。有少部分CSS，JS會出現在html里面或者下面，3者穿插交替。瀏覽器加載網頁代碼和資源(圖片/字體等)會按照從上到下的順序加載。
默認情況下當加載到JS代碼時會停止加載html代碼，等JS代碼加載完并且執行完(功能)才會繼續加載html。很多JS對頁面內容顯示沒有影響，只是影響功能，而html才是影響內容顯示的關鍵。因此等JS加載+執行完再渲染顯示html內容很浪費時間。
下圖是默認情況下html和JS加載進度圖(從左往右)，綠色代表html加載時間，灰色代表JS下載+執行時間(藍色是下載,紅色是執行)。可以看到在遇到JS加載、執行時，html加載被中斷。
Defer也叫Async，是異步加載的意思。異步加載會把JS文件位置移動到主html(瀑布流)下方，在下載JS的時候(下圖藍色)html可以繼續加載(不會中斷)，因此縮短顯示內容加載時間。
不過JS加載完會馬上執行(下圖紅色)，在JS執行期間會中斷html下載(下圖灰色)，直到JS執行完畢再繼續加載html↓，還是會對html加載有點影響。Tips：Defer不會按順序加載，哪個JS先加載完就先執行哪個。
Delay是延遲加載，在JS下載的同時(下圖藍色)繼續加載html(不會中斷)，等到html全部加載完后才開始執行JS(下圖紅色)。和異步加載對比，延遲加載在JS執行期間不會中斷html加載，速度更快。
JS主要負責功能，只有少數JS會影響頁面內容顯示。代碼之間往往相互依賴糾纏，有時需要先執行某些JS后，關聯的內容/功能才能繼續正常顯示/執行。
延遲加載JS是最后才執行JS，打亂了代碼間的依賴關系，所以可能會導致頁面顯示和功能異常。而異步加載JS因為加載完馬上執行，所以很少會導致網站異常，是一種更加安全的JS優化方法。
延遲加載JS雖然會導致網站問題，可是對速度提升效果比異步加載JS好很多！能極大提升谷歌測速手機端分數，必須要使用。只要排除掉一些關鍵JS被延遲加載就可以解決網站顯示和功能異常問題。
排除哪些JS需要根據使用的主題、插件以及頁面制作方法決定，這里無法提供統一排除選項。應該排除哪些JS被延遲加載？菜鳥和高手的區別就在這里，緩存插件兼容性以及速度提升區別也在這里。這個有點有點復雜，請移步《Perfmatters 使用教程》”。
迪亞莫推出WordPress網站速度優化服務，幫你刪除/禁用網站無用JS、CSS代碼，延遲非關鍵JS加載，壓縮圖片，配置CDN加速等，極大提升網站速度。谷歌測速電腦端和手機端分數能去到95-100分，秒開頁面。
Defer Javascript：異步加載JS，啟用。會將 JavaScript 移動到頁面底部加載，助于解決谷歌測速提示的“渲染阻塞”錯誤。可以和下方的延遲加載JS一起使用。2者同時啟用會先延遲加載JS，無法延遲加載再異步加載。
Include jQuery：別啟用。這個是同時異步加載jQuery的意思，啟用后網站極大概率會出問題。
Exclude from Deferral：排除某些內容異步加載。把下面4行內容復制粘貼到方框里排除異步加載，我們發現如果異步加載這3個WordPress資源會導致前臺報錯，格式按圖，一行一個！。
jquery.min.jshooks.min.jsi18n.min.js
Delay JavaScript：延遲加載JS，啟用。會延遲所有JavaScript文件和內聯JS腳本的加載和執行，直到有用戶交互（例如，在頁面上移動鼠標、觸摸屏幕、滾動、按鍵、使用鼠標滾輪滾動），以此來提高性能。
它類似于圖片延遲加載功能，但適用于JS文件。此優化將改進PageSpeed中的以下建議：
- 刪除未使用的 JavaScript；
- 最小化/減少主線程工作；
- 減少JavaScript執行時間；
- 減少總阻塞時間；
- 縮短交互時間；
- First contentful paint；
- 其它核心網絡生命力因素；
Delay Behavior：建議選“Delay All Scripts”對速度提升效果最好，同時兼容性也最差，不過可以通過排除延遲加載一些關鍵JS來解決兼容性問題。
Excluded from Delay：排除延遲加載一些JS，下面“Perfmatters使用教程”會詳細講解。
Delay Timeout：啟用，這個可以提高兼容性。上面說到延遲加載JS后會直到用戶交互才會加載JS，實際情況是JS相互依賴，很多時間到了該加載的時候并沒有加載導致功能失效、顯示異常。
打開這個功能后從進入頁面開始算，10秒后會自動加載所有JS，無需等待用戶交互。這樣不影響頁面加載速度，同時又提高了JS代碼的加載效率。如果想調整10秒這個時間值，把下面代碼復制粘貼到functions.php最下面即可。
官方建議調整為7秒(聽官方的)，我們測試發現如果設置時間低于6秒有些功能不會被執行，并且Gtmetrix測速時間會變成6-7秒，不準確。
//把Perfmatters Time Out時間改為7秒add_filter('perfmatters_delay_js_timeout', function($timeout) { return '7';});
上圖這2個功能需要在“工具” > “Plugin設置”里面啟用“Show Advanced Options”后才會顯示出來，具體作用以及是否應該開啟看Plugin設置章節的講解。
Remove Unused CSS：打開，刪除無用CSS/生成關鍵CSS。因為插件主題編寫質量不高，每個人設置不一樣等原因，導致每個頁面都有很多無用JS、CSS代碼。這個功能打開后可以優先加載影響頁面內容顯示的關鍵CSS，推遲加載/不加載無用的CSS。
大部分網站使用“Remove Unused CSS”后：
- FCP 平均下降 15.20%。
- LCP平均下降19.66%。
- TTI 平均下降 14.95%。
Used CSS Method：如何加載關鍵（Used）CSS，建議選File。選File后會把關鍵CSS重新生成在一個新的CSS文件里面，選Inline會把關鍵CSS作為內聯CSS直接插入頁面html中。
選File是因為文件可以被緩存，而內聯CSS不行。舉個例子：訪客第一次進入一個產品詳情頁，關鍵CSS File就會被緩存到訪客的瀏覽器。訪客再打開其它產品詳情頁的時候就會直接從瀏覽器記錄調取關鍵CSS直接顯示頁面，而無需再去服務器下載。這樣速度更快，也能減輕服務器壓力。
Wp Rocket的關鍵CSS是內聯的，無法選擇File，所以我們選擇使用Perfmatter來生成關鍵CSS。不同插件生成的關鍵CSS精準度不一樣，有些插件此功能會導致頁面某些內容顯示出錯，需要排除相應CSS。感興趣自己對比研究下。
Stylesheet Behavior：上面“Used CSS Method”是選如何加載關鍵CSS，這個選項是選如何處理那些無用（Unused）CSS。
建議選“Delay”，會延遲加載無用CSS直到用戶交互，速度快，不過跟延遲加載JS一樣兼容性要差點。相反“Async”兼容性好點，速度提升稍遜色點。官方建議優先選Delay，出問題再排除延遲加載或者改為使用Async。
選“刪除”對速度提升最大，不過兼容性最差，可能導致頁面一些內容消失，需要排除一些CSS。如果不懂CSS不要選這個。
Excluded Stylesheets：如果有些關鍵CSS被當成非關鍵CSS延遲加載導致顯示慢，把那些CSS的名字或者路徑粘貼到這里，會重添加到關鍵CSS中。格式按下圖，一行一個！下面填入內容的也是，輸入格式按圖，不贅述。
可以填入CSS名字，也可以填入路徑。
Excluded Selectors：跟上面“Excluded Stylesheets”是一樣的作用，只是上面是把整個CSS文件納入關鍵CSS。這里是只把特定內容的CSS納入關鍵CSS。這個功能很好，可以精準控制關鍵CSS，比Wp Rocket適合我們手工黨。
例如加載頁眉的時候，導航圖標跳動了一下（顯示過程從大變小），可能是控制圖標大小的那個css代碼被當成無用css延遲加載了。此時可以把控制圖標的那個css的.class或者#id填入到這里。
CDN URL：如果你有使用CDN(不包括Cloudflare)，并且沒有使用Perfmatters的CDN重寫功能↓，而是使用Wp Rocket Rocket之類CDN重寫功能，需要在這里填寫CDN加速域名。
如果使用Perfmatters的CDN重寫功能或者沒有使用Perfmatters的刪除無用CSS功能，CDN URL留空白，別填。
Clear Used CSS：重新生成關鍵CSS的意思。如果你使用Elementor之類修改了頁面的布局、內容的外觀，導致CSS發生了變化，需要點一下這個按鈕重新生成關鍵CSS。或者點擊頂部工具欄按鈕清理↓。
注意：如果有使用CDN和緩存插件，需要先清理CDN緩存，再清理第三方(緩存)插件緩存，最后清理Perfmatters緩存，這樣才能正確清理緩存。
添加自定義CSS、JS、HTML代碼到頭部/頁眉（header）、主題（body）、頁腳（footer）。例如可以添加谷歌跟蹤代碼，預加載代碼等。
Elementor Pro的Custom Code功能跟這個一樣，可是更加強大還能選擇添加的代碼在哪些頁面生效，推薦使用。
Astra Pro主題的Custom Layout功能更加牛逼，不但能選擇添加的代碼在哪些頁面生效，還能選擇把代碼/內容插入到頁面的具體鉤子（hook）位置，推薦使用。
Preloading設置
這是預加載，預鏈接，DNS預取設置。也是很重要的一個功能，可以控制資源的優先加載順序，提升加載效率和速度。
Enable Instant Page：跟Wp Rocket的“鏈接預取”是同一個功能，鼠標滑過頁面中的任何鏈接都會預先開始加載該鏈接頁面，等訪客點擊那個鏈接顯示該鏈接頁面的速度會加快很多（因為預先加載了）。
這個功能可以提高訪客打開頁面鏈接的速度，可是也會增加網站負擔。如果你服務器配置高，帶寬足，建議打開。否則的保持關閉。
Preload Critical Images：預加載關鍵圖片。會按從上到下的順序優先加載頁面的圖片（不會預加載SVG圖片和icon圖標），加快圖片顯示速度，一般建議選2或3，選太多反而可能降低頁面速度。
注意：導航欄下拉菜單里面的圖片也會被預加載，被算入預加載數量里面。
Preload： 預加載，設置后可以預先（優先）加載關鍵資源，加快頁面顯示速度。跟下面Preload Critical Images功能是一樣的，區別是預加載除了支持圖片外，還支持CSS，JS等。
借助Preload，可以調整資源(尤其是頁眉、首屏內容)的加載順序，優先加載影響渲染的資源，加快頁面呈現。一般不要預加載超過4個內容，不然可能會造成堵塞變卡。
如果谷歌測速提示有資源堵塞渲染，試下把那些資源設置為預加載，重新測速看看有時可以解決堵塞渲染的問題。
如果啟用了上面提到的“Remove Unused CSS”功能，不能在預加載里面預加載CSS，不然會有沖突。
Fetch Priority：這是Google推出的一個HTML 屬性，用來設定資源的優先級(high或low)。它與上面提到的Preload(預加載)功能效果一樣，但沒有那么激進。
目前主要是谷歌(Chrome)和Edge瀏覽器支持fetchpriority屬性，其它瀏覽器不太支持。官方建議大多數情況下同時使用Preload(預加載)和Fetch Priority，點擊查看2者區別和用法。
預連接： 允許瀏覽器在 HTTP 請求之前設置早期連接，從而消除往返延遲并為訪客節省時間。一般用來預鏈接谷歌字體，如果你有使用谷歌字體，把字體網址輸入到這里。
DNS預取： 提示瀏覽器在空閑時間在后臺預先完成站外資源的DNS解析（例如Youtube視頻，CDN網址），點你點擊站外資源的時候加載速度會快點。一般用來預加載外部資源的網址。
谷歌瀏覽器按F12進入開發者工具，點擊 
可以查看當前頁面有哪些外部資源。把外部資源網址前綴輸入到預取框里就行。
延緩加載設置
這是圖片延遲加載功能。延遲加載圖片就是一開始只加載首屏以及距離首屏一定范圍內的圖片。范圍之外的圖片一開始不加載，直到訪客下拉頁面才根據距離逐漸顯示剩下的相片，以此大大減少加載內容和加載時間。
使用延遲加載前↓
使用延遲加載后↓
因此很多人說延遲加載圖片對提升速度很有必要，必須要做，這是對的確實對速度提升有幫助。可是有些頂級速度大牛又說延遲圖片加載對客戶體驗不好，不建議啟用。大家都說的沒錯只是角度和立場不一樣。
先說延遲加載圖片的缺點。延遲加載一般是使用瀏覽器的原生延遲加載或者使用JS延遲加載，理論上應該在圖片快要進入視覺區域時就提前預加載，等訪客滑動到圖片位置時，圖片就已經提前加載顯示出來。可很多時候實際情況并不是這樣。
大家平時瀏覽網頁應該有遇到圖片很遲才出現，出現的時候可能是一下子彈出來或者從模糊變清晰。訪客需要花時間和心情去等待，因此有些人說延遲加載圖片對用戶體驗不好。
根據我們多個站點優化經驗，排除首屏圖片被延遲加載，延遲加載首屏外圖片最好，兼顧了用戶瀏覽體驗，也提升頁面加載速度。
WordPress5.5開始具有原生延遲加載功能，使用的是瀏覽器的延遲加載。但是，我們建議使用Perfmatters中的延遲加載解決方案。為什么？由于以下原因，我們的解決方案比原生延遲加載更快更好：
- 原生延遲意味著它讓瀏覽器決定應該延遲加載什么，不幸的是默認情況下它太急切了，通常不會有太多資源被延遲加載，這意味著速度不會太快；
- 圖像必須上傳到WordPress 媒體庫，并添加寬度和高度，這意味著原生延遲加載可能不適用所有圖片；
- 原生延遲加載不支持 CSS添加的背景圖像；
- 原生延遲加載正在改進，但仍然缺乏對某些事情的支持，功能有限；
重要提示：啟用 Perfmatters 中的延遲加載后，WordPress中默認的原生延遲加載將自動禁用。
講完優化思路，現在開始設置優化圖片延遲加載。
Images：打開，啟用圖片延遲加載功能。
Exclude Leading Images：排除延遲延遲加載靠前面的圖片數量，選4或5。
iFrames and Videos：延遲加載iFrames和Videos，打開。大家都知道視頻體積很大，影響頁面加載速度。啟用此功能后會用自動用Youtube視頻的預覽縮略圖和輕量級 SVG 播放圖標替換 YouTube iframe。
一開始時只加載視頻封面圖片和播放圖標，不加載Youtube視頻。訪客點擊播放才開始加載視頻，這樣視頻對頁面的速度影響最小，這也是加載 YouTube 視頻最快的方式。
YouTube Preview Thumbnails：必須打開，這是上文提到的用視頻的預覽縮略圖作為視頻封面。
Exclude from Lazy Loading：排除延遲加載。把不想被延遲加載的圖片的名字或者.class添加到這里。網頁首屏的所有圖片都不應該被延遲加載，例如LOGO，多語言前面的國旗相片，用戶頭像，第一張banner圖片等。
前面設置了不延遲加載前4-5張圖片，一般情況下首屏圖片不多的話應該都會被排除延遲加載。但也會有例外情況，下面Perfmatters使用教程會詳細教大家如何檢查圖片是否被延遲加載以及如何排除。
注意圖片名字和.lass格式，一行一個！圖片名字用xxx.jpg這樣的格式就行，.class一定用 attachment-woocommerce_thumbnail 到排除框里，注意后面沒有 ”?符號！
如果你網站有彈窗(例如下圖)，并且彈窗里面有圖片，啟用延遲加載后彈窗的圖片可能顯示較慢，需要排除相應圖片被延遲加載。如果排除后還是顯示慢可以預加載試下。
Threshold：距離可視區域多少距離開始加載相片，插件作者建議設為600px。上面分析思路說到延遲后面圖片加載，等圖片快要進入視覺區域時就開始加載顯示圖片。這里就是設置距離可視區域少于多少距離時開始加載圖片。
Wp Rocket之類插件延遲加載圖片沒有這個設置選項，所以我們覺得Perfmatters的功能比較符合我們的優化思路。
DOM Monitoring：DOM 監控監視 DOM 的變化并動態延遲加載新添加的元素。這提高了兼容性，保證無限滾動元素的正常工作。
無限滾動元素最常見的例子就是無限循環的自動播放的幻燈片（banner之類），如果你的網站沒有自動播放+無限循環滾動的幻燈片之類元素，或者這些元素的圖片排除了延遲加載，就不要打開此功能，反之可以打開。
如果你網站有彈窗，并且彈窗里面有相片，啟用延遲加載后彈窗的圖片可能顯示較慢，啟用“DOM Monitoring”有助于圖片加快顯示。
Add Missing Image Dimensions：建議啟用。會給圖片添加width和height屬性優化頁面顯示效果。
如果圖像缺少width和height屬性屬性，可能會導致布局偏移，從而觸發 Core Web Vitals 中的 CLS 警告：Image elements do not have explicit width and height。
Fade In：建議啟用。當頁面快要下滑到被延遲加載圖片區域時，圖片會以當淡入效果（過渡更平滑）顯示出來，而不是立即彈出，訪客體驗比較好。
Fade In功能可能跟某些圖片輪播功能、wocommerce的圖片鼠標滑過切換顯示圖片功能、以及Elementor Call to Action小部件(鼠標滑過背景圖片動畫失效)等有沖突，如果網站出現這類型圖片顯示問題嘗試關閉Fade In功能或者排除相應圖片(頁面)的延遲加載。
CSS Background Images：背景圖片是通過CSS加載，因此常規情況下無法被延遲加載。打開這個功能后會多出一個輸入框，只要輸入加載背景圖片的那個CSS 的.class名字就可以延遲加載相應的背景圖片。注意格式，沒有. ，一行一個。
如果頁面的背景圖片是在首屏區域內（例如海報/banner，頂部標題的背景圖片），或者沒有背景圖片，那就不要打開這個功能。反之如果有，就打開。
Fonts設置
如果你沒使用谷歌字體，直接禁用，建議使用系統字體或者本地托管字體。
Local Google Fonts：如果網站有谷歌字體建議選禁用，然后手動切換使用系統字體。如果你覺得谷歌字體比較好看或者不知道如何切換使用系統字體，那就打開這個功能吧。
注意：該功能只能在一個地方啟用！如果主題、其它插件有同樣功能選一個地方啟用就行。
打開后會自動把谷歌字體下載到本地，然后本地托管谷歌字體。如果你有使用AWS，騰訊云CDN之類會改變資源網址的CDN，把CDN域名輸入到上圖CDN URL框，注意格式：https://cdn.xxx.com 。最后記得點擊“Clear Local Fonts”刷新字體。
CDN設置
打開后會把網站的圖片，JS，CSS網址前綴重寫成CDN網址。如果你使用的是Cloudflare，不要打開這個功能，因為CF 的CDN網址跟網站網址一樣。如果你使用Optimole之類插件單獨更改圖片網址為CDN網址，也不要打開這個。
一般是使用騰訊云或者亞馬遜AWS之類CDN，CDN網址跟原本網站網址不一樣，所以需要啟用此功能把網站的圖片，JS，CSS網址重寫成CDN網址才能把使用CDN功能。
注意：無法將通過外部CSS(非內聯)添加的背景圖像網址重寫到CDN網址，因為Perfmatters。如果是Elementor構建器里面的背景圖像，可以使用Elementor > “工具” > “替換網址” 功能把背景圖片網址手動更換成CDN網址。
成功替換網址↓
清理所有緩存(瀏覽器，網站后臺，CDN)，去前臺刷新頁面發現圖片已經從CDN加載。
更新：上述方法有個弊端，使用elementor編輯相應頁面后圖片網址會恢復成舊網址。建議改用手寫CSS添加背景圖片到相應版塊，不要使用ele編輯器添加。
Analytics設置
這個功能是添加谷歌分析代碼，非常實用、方便。如果需要通過這個功能安裝谷歌分析代碼，建議按圖設置。
追蹤ID：輸入谷歌分析里面的建立的網站ID。 在谷歌分析創建完數據量后會顯示下圖內容，紅色框那個就是衡量ID，把它復制粘貼到輸入框就行。
或者點擊“數據量”>再點擊網站進入上圖界面。
追蹤代碼位置：谷歌分析官方要求選“頭部”，為了避免別中斷加載等影響數據。如果你的網站速度不慢，其實位置選“底部”也完全沒問題，插件官方也是建議放“底部”。
Script Type：安裝什么類型的谷歌跟蹤代碼，不同類型的代碼跟蹤的數據不一樣，代碼體積也不一樣。具體看你怎么使用谷歌分析。我是選Minimal，代碼體積最小(1.5KB)速度最快，同時跟蹤的數據也最少，不過夠用。點擊查看各種類型跟蹤代碼區別。
IP匿名化：打開，遵守一些國家的隱私設置，我們得守法。
追蹤已登錄的管理員：關閉，不需要追蹤自己瀏覽頁面的數據。
Enable AMP Support：關閉，AMP已經名存實亡，沒人用了現在。
工具設置
點擊右上角”工具”，進入工具設置
Plugin設置
完全卸載：設置卸載Perfmatters插件后是否刪除插件所有數據和設置。如果決定不用這個插件，卸載前打開這個功能。
Hide Admin Bar Menu：不開啟的話,后臺頂部欄會出現Perfmatters快捷按鈕。可以重新生成關鍵CSS (Remove Unused CSS)，進入插件設置界面。如果啟用“Remove Unused CSS”功能，建議保持默認別動它。
Show Advanced Options：啟用后延遲加載JS設置最下面會新增下圖↓2個功能，具體作用看下圖文字解釋。如果你網站有遇到下圖2個問題就啟用這個功能，如果沒有遇到或者你看不懂下圖2個功能建議保持禁用。
如果遇到點擊延遲就打開它(Disable Click Delay)↓
如果在IOS瀏覽器遇到單擊無效需要雙擊才行，打開它(Enable FastClick)↓
Purge Meta Options：忽略，保持默認，勾選相應功能后不會出現在Meta選項框里。編輯頁面、文章、產品時會出現下圖↓Perfmatters Meta選項框，可以禁用當前頁面的異步加載JS，延遲加載JS，延遲加載圖片，鼠標滑過預加載鏈接功能，非常有用。
其它功能一眼懂，不多解釋。
Database設置
這是數據庫自動清理設置，和小火箭的自動數據庫優化功能，二者選其一就行。按下圖設置，頻率可以選Weekly每周或者Monthly每月自動清理。
Perfmatters使用教程
設置好只是用好這個插件的入門基礎，用好才是把網站速度優化到極致的關鍵。
使用Perfmatters禁用無用資源
先在Assets設置里面啟用腳本管理器，點保存。禁用完資源后不能關閉腳本管理器，不然的話禁用會失效。
1- 啟用后在編輯文章、頁面、產品時后臺頂部會出現“腳本管理器”文字，點擊后會進入正在編輯頁面的腳本管理界面。
2- 也可以在在文章、產品、頁面列表頁點擊吸引內容的“腳本管理器”↓進入腳本管理界面。
3- 或者在前端頁面網址后面加上/?perfmatters按鍵盤回車鍵也可以進入相應頁面的資源管理界面。例如本站首頁地址是https://diiamo.cn，添加腳本管理器后綴變成https://diiamo.cn/?perfmatters。訪問后進入下圖所示的腳本管理器界面。
如果需要進入一些帶?問號網址后綴的頁面的腳本管理器，可以在網址后面加&perfmatters，例如要進入搜索結果頁面腳本管理器可以訪問網址https://xxx.com/?s=&perfmatters，https://xxx.com改成你們搜索界面網址。
為了方便使用，先進入“設置”界面設置一下。
按下圖設置后點保存。然后點擊左上角“腳本管理器”回到資源管理界面。
注意：第三個測試模式打開后只有管理員才能看到禁用資源后的頁面效果，訪客訪問的還是沒有禁用資源的頁面。禁用完資源測試網站顯示和功能正常后記得回來關閉“測試模式”，清理緩存，禁用資源才會生效。
(MU) 模式 將腳本管理器提升到一個全新水平，提供更多控制權和禁用WordPress 插件查詢和掛鉤以及內聯CSS 和JS的能力，點擊查看MU模式詳細解釋和使用教程。新手不建議用這個功能。
下面是禁用腳本教程，先了解下圖“Locations”里面選項的意思。
1：文章詳情頁；
2：常規頁面，也就是后臺“頁面” 
?版塊里面的頁面；
3：產品詳情頁；
4：文章列表頁；
5：文章標簽頁；
6：作者頁面(很少網站會用到這種頁面，可以忽略)；
7：產品類別頁；
8：產品標簽頁；
9：產品存檔頁，按日期分類的產品列表頁，基本用不上，忽略；
下面是Perfmatters腳本管理器使用教程↓。
1- 如果要在所有前端頁面禁用資源，按下圖直接勾選“Everywhere”。
2- 如果需要只在某些類型頁面禁用資源，只在Disabled下面勾選需要禁用該資源的頁面類型。例如下圖設置的意思是只在文章詳情頁和常規類型的頁面禁用“wp-hook”這個JS。
3- 如果需要只在某些類型頁面加載資源，先勾選“Everywhere”全局禁用，然后在Exceptions下面勾選需要在哪些頁面加載該資源(排除在勾選的頁面禁用資源)。
例如下圖的“elementor-pro”CSS只在“pages”類型的頁面加載，在其它所有類型頁面(文章/產品列表頁/詳情頁，搜索頁，購物車頁面等)都禁止加載。
如果Exceptions下面選項沒有你想排除禁用的頁面選項，例如搜索結果頁面。或者你覺得使用Exceptions下面選項排除不夠精準，可以使用Regex，它可以和Exceptions下面選項同時使用，都生效。
例如下圖Regex輸入/\/\?s=/表示也在搜索結果頁面加載該資源。了解Regex使用方法和寫法。
注意：使用elementor制作的搜索結果頁面需要用到Archive Posts 
小部件，會用到下圖這個“elementor-fronted”CSS資源。如果你跟我們一樣設置這個資源只在Posts和Pages加載( 下圖)，需要按下圖在Regex里面輸入/\/\?s=/，讓它也在elementor制作的搜索結果頁面加載。
到此Perfmatters設置使用教程結束，如有疑問歡迎評論留言。
高級進階優化教程（付費）
如果按照上面教程優化到位，網站速度應該提升很多，可能還有些地方一直優化不到位，谷歌測速手機端分數一直上不去。工具是死的，網站以及思路是活的，要根據自己網站情況針對性優化才能起到最好效果。對插件使用和優化理解深淺也會影響效果。
下面付費內容包含高階優化思路、優化技巧、以及插件進階使用方法，可以讓你網站速度優化效果再上一層樓，也能增強你的WordPress速度優化技能。
注意：每個網站情況不一樣，有些網站問題出在根源上基本無法優化。例如服務器太差響應延遲高，安裝太多笨重插件前端加載太多代碼等。得先從根源上解決問題。
購買后享微信人工1對1咨詢服務↓，可以享受人工幫你分析網站問題并且給出優化建議/思路。如有其它速度相關疑問也可以留言/咨詢客服。
高階優化教程要求有一點點點點基礎，菜鳥新手如果完全不懂不要購買教程！看不懂或者操作后效果不好我們不負責。我們只幫審查網站提供優化建議，需要靠你自己操作優化。
限時福利：購買本高級進階優化教程，免費贈送一年ShortPixel圖片壓縮插件。可以無限制壓縮圖片，不限制站點數量，支持生成WebP和Avif格式圖片，極大提升網站速度。
購買本教程后，把個人中心已購資源截圖給微信客服(頁腳有二維碼)獲取插件API激活碼。
此內容查看價格為99元（VIP 8折、終身VIP免費），請先登錄購買后可查看/下載相應付費內容
檢查優化結果
按照上面方法優化后去谷歌點擊進入谷歌測速頁面測試下。正常情況下電腦端分數應該在95-100分，頁面加載時間在1秒內。手機端分數應該在90-100分，頁面加載時間在1.5-2.5秒。
如果分數達不到上述標準，很有可能是步驟沒做到位，再去仔細看一遍《終極WordPress速度優化教程》。也有可能是網站服務器、網站主題等不行影響了速度。
使用Perfmatters優化后速度反而變慢？
有的用戶反饋使用這個插件優化后速度還不如使用Wp Rocket、Wp fastest cache等插件時快。PM是資源優化插件，不具備緩存功能。而Wp Rocket、Wp fastest cache等插件的緩存功能可以極大提升網站速度。
請把PM跟緩存插件一起使用！把緩存插件中和PM一樣的功能都禁用，只在PM啟用同樣的功能。隨便一個簡單的緩存插件和PM搭配使用就能發揮非常不錯的效果，推薦免費的WordPress官方Wp Super Cache或者我們網站免費下載的Wp Fastest Cache Premium緩存插件。
也有可能是延遲加載JS功能把一些重要JS延遲加載了導致渲染時間增加，關閉延遲加載JS功能清理緩存看下。如果真是這樣，排除相應JS被延遲加載就行。
還有可能是CDN緩存還沒完成，瀏覽器隱私模式打開前臺刷新幾次，等過幾分鐘后再測速看看。
