使用 Query Monitor 調(diào)試 WordPress 并提高網(wǎng)站性能

在處理安裝了數(shù)十個(gè)或更多插件的 WordPress 開發(fā)項(xiàng)目時(shí)，經(jīng)常會(huì)遇到性能問題。但是，找出導(dǎo)致性能問題的原因并不總是那么容易。識(shí)別麻煩插件的常用方法是停用插件，直到找到性能瓶頸。

但是，你可以使用免費(fèi)的 Query Monitor 插件來更好地解決問題。它可以幫助您調(diào)試性能問題，更有效地開發(fā)網(wǎng)站，并更好地處理您的 WordPress 網(wǎng)站。

在本指南中，您將了解有關(guān) Query Monitor 所需了解的所有信息——它是什么、它的作用以及如何使用它。

什么是Query Monitor？

Query Monitor是一個(gè) 100% 免費(fèi)的插件，可幫助您調(diào)試 WordPress 網(wǎng)站的性能和開發(fā)。

您可以將其視為 Chrome 開發(fā)人員工具，但專門針對(duì) WordPress。您可以深入研究數(shù)據(jù)庫(kù)查詢、腳本、時(shí)間安排等。您還可以查看大量有用信息，例如一般環(huán)境信息和特定頁(yè)面的詳細(xì)信息。

然后，Query Monitor 以一種易于訪問的方式呈現(xiàn)所有這些信息，您可以從站點(diǎn)上的任何位置訪問這些信息。

Query Monitor 由Human Made的首席 Web 工程師 John Blackbourn 維護(hù)。他還有其他幾個(gè)有用的插件，包括WP Crontrol（非常適合wp-cron 調(diào)試）和 User Switching（非常適合調(diào)試不同用戶角色的體驗(yàn)）。

John 反應(yīng)迅速，并不斷致力于維護(hù)和改進(jìn) Query Monitor。Automattic 和其他贊助商支持他的工作。

Query Monitor 有什么作用？

Query Monitor 可以幫助您調(diào)試的不僅僅是對(duì) WordPress 數(shù)據(jù)庫(kù)的查詢，它也深入到許多其他領(lǐng)域，包括以性能為中心的調(diào)試和一般的開發(fā)調(diào)試。

以下是 Query Monitor 可以幫助您分析和調(diào)試的許多詳細(xì)信息的示例：

• 數(shù)據(jù)庫(kù)查詢，包括顯示來自特定插件的查詢
• PHP 錯(cuò)誤
• 內(nèi)存使用情況
• HTTP API 調(diào)用
• 排隊(duì)的腳本和樣式，包括依賴項(xiàng)
• 鉤子和動(dòng)作
• 主題模板文件
• 語言和翻譯
• 重寫規(guī)則
• 塊編輯器塊
• 一般環(huán)境信息
• WordPress 管理屏幕

Query Monitor 的一個(gè)顯著限制是它主要用于“即時(shí)”調(diào)試。當(dāng)它向您顯示數(shù)據(jù)庫(kù)查詢、時(shí)間等信息時(shí)，它只是針對(duì)當(dāng)前頁(yè)面加載進(jìn)行的。

它通常不跟蹤或顯示歷史信息/趨勢(shì)，盡管 John 說此功能計(jì)劃用于未來版本。

如何使用 Query Monitor 調(diào)試 WordPress 并提高性能

既然您知道什么是 Query Monitor 以及它的作用，那么讓我們來了解如何使用 Query Monitor 來調(diào)試站點(diǎn)的性能以及用于一般開發(fā)調(diào)試的其他一些工具。

我們將向您簡(jiǎn)要介紹查詢監(jiān)視器界面及其工作原理。然后，我們將深入研究界面中的每個(gè)區(qū)域。

Query Monitor 簡(jiǎn)介

Query Monitor 沒有自己獨(dú)立的界面區(qū)域。相反，它會(huì)在前端和后端的 WordPress 管理欄中顯示新信息。

Query Monitor 最初會(huì)顯示一個(gè)包含四個(gè)信息的快速摘要：

• 頁(yè)面生成時(shí)間——屏幕截圖中的 0.05 秒。
• 內(nèi)存使用峰值——屏幕截圖中的 7.7 MB。
• SQL 查詢所用的總時(shí)間（以秒為單位） – 屏幕截圖中的 0.00 秒。
• SQL 查詢總數(shù)– 屏幕截圖中的 54 個(gè)。

如果單擊此摘要，您將打開整個(gè)查詢監(jiān)視器界面，該界面顯示為您當(dāng)前正在查看的前端或后端頁(yè)面上的窗口覆蓋。

Query Monitor 提供的所有功能和信息都包含在此覆蓋窗口中。

如果您希望更改覆蓋窗口的布局，可以單擊右上角的按鈕將其切換到側(cè)邊欄界面。您還可以使用拖放來更改窗口的大小。

Query Monitor 界面及其信息僅對(duì)管理員（或WordPress 多站點(diǎn)上的超級(jí)管理員）可見。

還有一個(gè)選項(xiàng)可以設(shè)置身份驗(yàn)證 cookie 以仍然查看查詢監(jiān)視器輸出，即使您沒有登錄（或者您以具有較低用戶角色的用戶身份登錄）。我們稍后將在指南中分享如何執(zhí)行此操作。

讓我們?yōu)g覽界面中的每個(gè)選項(xiàng)卡，并解釋如何使用它來調(diào)試您的 WordPress 網(wǎng)站。

概述

概述選項(xiàng)卡顯示來自管理欄摘要的更多詳細(xì)信息和一些一般環(huán)境信息。

例如，“概覽”選項(xiàng)卡不僅可以查看內(nèi)存使用峰值，還可以進(jìn)一步查看峰值使用情況與您的服務(wù)器和 WordPress 內(nèi)存限制的比較。

這里沒有什么太詳細(xì)的——它只是一個(gè)概述（因此得名）。

查詢

查詢選項(xiàng)卡可讓您深入了解您正在查看的頁(yè)面的每個(gè)數(shù)據(jù)庫(kù)查詢。它是查詢監(jiān)視器中信息最豐富的區(qū)域之一，當(dāng)您考慮插件的名稱時(shí)，這很有意義。

對(duì)于每個(gè)查詢，您可以看到以下信息：

1. 完整的查詢
2. 查詢調(diào)用者
3. 查詢組件（例如是來自核心、主題還是插件）
4. 行數(shù)
5. 查詢花費(fèi)的時(shí)間

在一般調(diào)試中，您可以使用它來查找阻礙您網(wǎng)站性能的緩慢加載查詢。

查詢監(jiān)視器將按您的主題和各個(gè)插件分解查詢，以便您可以看到每個(gè)擴(kuò)展的影響。

假設(shè)一個(gè)特定的插件導(dǎo)致大量加載緩慢的查詢。在這種情況下，你需要找到一種方法來解決這個(gè)問題——要么通過優(yōu)化插件設(shè)置或服務(wù)器配置中的某些內(nèi)容（例如使用數(shù)據(jù)庫(kù)或?qū)ο缶彺妫辞袚Q到更高效的不同插件。

在主選項(xiàng)卡中，您可以查看每個(gè)查詢的所有高級(jí)信息。

如果您想了解有關(guān)特定查詢的更多信息，請(qǐng)單擊加號(hào)圖標(biāo)以展開更多詳細(xì)信息。

如果您在這里看到異常低的數(shù)字，可能是由于某種類型的緩存——例如頁(yè)面緩存或緩存其數(shù)據(jù)庫(kù)查詢的插件。因此，在調(diào)試時(shí)禁用緩存會(huì)很有幫助。

該區(qū)域還有一些子菜單可幫助您查找特定類型的查詢：

• 重復(fù)查詢
• 來電者查詢
• 按組件查詢

重復(fù)查詢

重復(fù)查詢區(qū)域突出顯示重復(fù)查詢并列出“潛在的麻煩制造者”，以幫助您調(diào)試它們并簡(jiǎn)化事情。

請(qǐng)求者查詢

請(qǐng)求者查詢區(qū)域可讓您查看此頁(yè)面上的所有請(qǐng)求者。如果您單擊一個(gè)，您可以看到該請(qǐng)求者的查詢列表。

按組件查詢

按組件查詢區(qū)域顯示了所有進(jìn)行查詢的組件的列表，包括 WordPress 核心、您的主題和各個(gè)插件。

您可以單擊特定組件以查看其所有查詢。

同樣，這是最有價(jià)值的報(bào)告之一，因?yàn)樗梢宰屇业教囟ǖ牟寮@些插件會(huì)因查詢緩慢而降低您的網(wǎng)站性能。

如果您沒有按組件查看查詢，請(qǐng)閱讀此內(nèi)容

如果您在 Query Monitor 中看不到組件信息，可能是因?yàn)?Query Monitor 無法符號(hào)鏈接其 db.php 文件。在這些情況下，您會(huì)看到如下所示的錯(cuò)誤消息。

這里有兩個(gè)可能的原因：

1. 您站點(diǎn)的wp-content 文件夾的文件權(quán)限。
2. wp-content/db.php 文件已經(jīng)存在（可能是因?yàn)橄馱3 Total Cache這樣的緩存插件）。

您可以在這篇 GitHub 文章中看到一些修復(fù)和解決方法。如果您覺得通過 SSH 連接到您的服務(wù)器很舒服，您可以使用WP-CLI 命令解決問題。

大多數(shù)查詢監(jiān)視器的功能仍然可以解決此問題，但在修復(fù)此問題之前您將無法看到任何組件信息。

日志

日志選項(xiàng)卡是一個(gè)高級(jí)選項(xiàng)卡，可讓您設(shè)置要記錄的消息和變量。這可以幫助您調(diào)試技術(shù)問題或密切關(guān)注您的站點(diǎn)以發(fā)現(xiàn)問題。

當(dāng)您第一次安裝查詢監(jiān)視器時(shí)，此選項(xiàng)卡不會(huì)顯示任何內(nèi)容，因?yàn)槟鷽]有設(shè)置任何日志記錄變量。

但是，如果您確實(shí)想設(shè)置自定義日志記錄變量，則可以使用如下簡(jiǎn)單語法進(jìn)行設(shè)置：

do_action( 'qm/debug', 'This happened!' );

Query Monitor 支持以下操作，可讓您在不同級(jí)別記錄問題：

• qm/emergency
• qm/alert
• qm/critical
• qm/error
• qm/warning
• qm/notice
• qm/info
• qm/debug

如果您想了解更多信息并查看一些示例，請(qǐng)查看Query Monitor日志記錄變量頁(yè)面。

請(qǐng)求

請(qǐng)求選項(xiàng)卡顯示當(dāng)前請(qǐng)求的查詢變量。

還有查看Request Headers和Response Headers的子菜單，這可能對(duì)性能調(diào)試更有幫助。

例如，也許您想調(diào)試緩存行為或 CDN 行為。在Response Headers子菜單中，您可以看到 Cache-Control 行為，讓您可以在您的站點(diǎn)上調(diào)試瀏覽器緩存。

塊

僅當(dāng)您查看使用 WordPress 古騰堡塊編輯器構(gòu)建的頁(yè)面時(shí)， “塊”選項(xiàng)卡才可見。

這里的一件聰明的事情是，它會(huì)告訴您該塊是來自 WordPress 核心還是其他插件。

模板

只有在站點(diǎn)前端使用Query Monitor時(shí)，模板選項(xiàng)卡才會(huì)可見。它可以幫助您查看和調(diào)試您正在查看的頁(yè)面的模板層次結(jié)構(gòu)。

您可以看到該頁(yè)面的特定模板文件以及各種模板部分和正文類。

這與性能沒有任何關(guān)系，但對(duì)自定義主題開發(fā)可能是有益的。

管理屏幕

僅當(dāng)您在WordPress 管理儀表板中使用查詢監(jiān)視器時(shí)，管理屏幕選項(xiàng)卡才會(huì)可見。您可能不會(huì)經(jīng)常使用它，但如果您需要在自定義管理屏幕中調(diào)試行為，它會(huì)很有幫助。

如果您查看帶有列表的管理屏幕，它將顯示自定義列過濾器和操作。它還將向您顯示 get_current_screen 的狀態(tài)。

腳本

在查詢選項(xiàng)卡之后，腳本選項(xiàng)卡可能是查詢監(jiān)視器中下一個(gè)最有用的性能調(diào)試區(qū)域。

此選項(xiàng)卡顯示頁(yè)面上每個(gè)排隊(duì)的JavaScript 腳本及其依賴項(xiàng)和依賴項(xiàng)。您還可以使用過濾器快速查找來自特定主機(jī)或具有顯式依賴項(xiàng)/依賴項(xiàng)的腳本。

作為粗略的規(guī)則，更多的腳本等于一個(gè)更慢的網(wǎng)站，因?yàn)樗鼈儠?huì)增加頁(yè)面大小并添加 HTTP 請(qǐng)求。

您可以使用此區(qū)域來發(fā)現(xiàn)不同擴(kuò)展的影響，并找到減少每個(gè)頁(yè)面上加載的排隊(duì)腳本數(shù)量的方法。

不過，查詢監(jiān)視器不會(huì)向您顯示所有這些腳本的加載時(shí)間。如果你想看到這一點(diǎn)，你需要使用速度測(cè)試工具并深入研究瀑布分析——Pingdom和GTmetrix都是很好的選擇。

拓展閱讀：誰是最佳的網(wǎng)站性能檢測(cè)工具：GTmetrix、PageSpeed Insights、Pingdom Tool、WebPageTest

樣式

Styles選項(xiàng)卡類似于Scripts選項(xiàng)卡，但它顯示排隊(duì)的 CSS而不是 JavaScript。這是另一個(gè)方便的選項(xiàng)卡，用于在您的站點(diǎn)上調(diào)試性能。

與腳本一樣，在頁(yè)面上加載更多樣式表通常會(huì)導(dǎo)致網(wǎng)站加載速度變慢。

在此區(qū)域中，您可以發(fā)現(xiàn)不同擴(kuò)展程序?qū)δW(wǎng)站的影響。您可以使用此信息來減少頁(yè)面上需要加載的樣式表的數(shù)量，這將減少文件大小和加載頁(yè)面所需的 HTTP 請(qǐng)求。

與腳本一樣，Query Monitor 不會(huì)深入分析 CSS 的加載方式以及它是否會(huì)阻止站點(diǎn)的關(guān)鍵部分加載。為此，您需要再次使用瀑布分析。

鉤子和動(dòng)作

Hooks & Actions選項(xiàng)卡列出了當(dāng)前頁(yè)面中的所有掛鉤和操作，以及它們的優(yōu)先級(jí)。

對(duì)于操作，您可以展開單個(gè)操作以查看與該操作關(guān)聯(lián)的實(shí)際文件和代碼行。您還可以按組件過濾操作，以從 WordPress 核心、插件和主題中查找操作。

這個(gè)領(lǐng)域并不真正關(guān)注性能，但它便于定制開發(fā)。

語言

語言選項(xiàng)卡顯示您網(wǎng)站上的語言和文本域以及用于每個(gè)擴(kuò)展的語言文件。

如果您有一個(gè)英語單語言網(wǎng)站，這不是很有用。但是，如果您有一個(gè)多語言站點(diǎn)和/或您的站點(diǎn)使用的語言可能沒有完整的翻譯包覆蓋范圍，則此選項(xiàng)卡會(huì)很有幫助。

HTTP API 調(diào)用

HTTP API 調(diào)用選項(xiàng)卡向您顯示頁(yè)面加載期間發(fā)生的所有服務(wù)器端 HTTP 請(qǐng)求，包括請(qǐng)求詳細(xì)信息、時(shí)間和HTTP 狀態(tài)代碼。

如果插件或主題的 HTTP API 調(diào)用速度很慢，這通常是導(dǎo)致性能不佳的“隱藏”原因，您需要找到解決此問題的方法，或者通過更改擴(kuò)展設(shè)置中的某些內(nèi)容或切換到不同的擴(kuò)展名。

對(duì)于許多頁(yè)面，您應(yīng)該看到“沒有 HTTP API 調(diào)用”，這是一個(gè)好兆頭，因?yàn)檫@意味著沒有任何東西妨礙您網(wǎng)站的性能。

能力檢查

Capability Checks區(qū)域可讓您查看哪些用戶功能可以訪問您正在查看的當(dāng)前內(nèi)容。這可以很方便地查看不同的用戶是否可以訪問某些前端或后端內(nèi)容。

但是，出于性能原因，默認(rèn)情況下禁用此功能。如果要啟用它，則需要編輯站點(diǎn)的wp-config.php文件并添加以下代碼段：

define( 'QM_ENABLE_CAPS_PANEL', true );

環(huán)境

環(huán)境選項(xiàng)卡提供了站點(diǎn)環(huán)境的詳細(xì)摘要，包括：

• PHP
• 數(shù)據(jù)庫(kù)
• WordPress
• 服務(wù)器

您可以查看重要的詳細(xì)信息、限制、版本號(hào)、配置設(shè)置等。

這也可以為有關(guān)性能的重要決策提供信息。

例如，如果您發(fā)現(xiàn)站點(diǎn)的內(nèi)存限制是有限的，您可能希望增加內(nèi)存限制以避免與內(nèi)存限制相關(guān)的錯(cuò)誤。

同樣，如果您發(fā)現(xiàn)您使用的是舊版本的 PHP，您可能需要升級(jí)到最新版本以提高性能。

條件句

條件選項(xiàng)卡可幫助您查看哪些條件語句適用于您正在查看的頁(yè)面，這有助于自定義開發(fā)。

您可以看到“真”條件句和“假”條件句。

如何以非管理員用戶身份查看Query Monitor信息

在某些情況下，您可能希望以不同的用戶角色或注銷用戶的身份查看查詢監(jiān)視器信息。這對(duì)于WooCommerce 商店、會(huì)員網(wǎng)站和類似網(wǎng)站非常有用。

您需要在瀏覽器中設(shè)置身份驗(yàn)證 cookie 來完成此操作。設(shè)置該 cookie 后，無論何時(shí)訪問該站點(diǎn)，您都可以查看查詢監(jiān)視器信息，即使您已注銷。

要設(shè)置身份驗(yàn)證 cookie，請(qǐng)單擊查詢監(jiān)視器面板右上角的齒輪圖標(biāo)。然后，單擊設(shè)置身份驗(yàn)證 cookie按鈕。

如果您想禁用此功能，您可以返回此界面并單擊清除身份驗(yàn)證 cookie按鈕以刪除 cookie。

如果您將其與來自同一開發(fā)人員的另一個(gè)有用插件User Switching結(jié)合使用，您可以在站點(diǎn)上的不同用戶角色之間快速切換。

如何使用Query Monitor擴(kuò)展

到目前為止，我們只專注于核心 Query Monitor 插件中的功能和分析選項(xiàng)。但是，一些第三方插件可以進(jìn)一步擴(kuò)展查詢監(jiān)視器。

這些可以添加對(duì)特定性能技術(shù)的支持，例如 Memcached 和Redis，以及特定的 WordPress 插件，例如WooCommerce 或 GiveWP。

Query Monitor 還支持Debug Bar 插件的所有附加組件，它添加了ElasticPress、Elementor、Cache Lookup 等的集成。

您可以在此 GitHub 頁(yè)面上查看 Query Monitor 插件的完整列表。

總結(jié)

如果您想調(diào)試 WordPress 網(wǎng)站上的性能和開發(fā)問題，Query Monitor 插件是最好的免費(fèi)工具之一。

要分析您網(wǎng)站的性能，您可能需要最關(guān)注界面的這些區(qū)域：

• 概述
• 查詢
• 日志（適用于更高級(jí)的用戶）
• 腳本
• 樣式
• HTTP API 調(diào)用
• 環(huán)境

但是，如果您開發(fā) WordPress 網(wǎng)站，其他領(lǐng)域也很方便。

立即嘗試 Query Monitor，看看它有什么幫助。如果您不想將它安裝在您的實(shí)時(shí)站點(diǎn)上，您可以隨時(shí)創(chuàng)建一個(gè)臨時(shí)站點(diǎn)并將其安裝在那里，以查看您的站點(diǎn)底層發(fā)生了什么。

拓展閱讀：

• 網(wǎng)站性能檢測(cè)工具：GTmetrix、PageSpeed Insights、Pingdom Tool、WebPageTest
• 如何使用瀏覽器的開發(fā)者工具調(diào)試網(wǎng)站
• 11 個(gè)為開發(fā)者準(zhǔn)備的 WordPress 調(diào)試插件
• 詳細(xì)介紹 WordPress 配置文件 wp-config.php
• 如何開啟和設(shè)置WordPress調(diào)試模式
• WordPress 調(diào)試模式基本指南
• WordPress開發(fā)者可選的23個(gè)優(yōu)秀的PHP代碼編輯器和IDE
• 12 款實(shí)用的 WordPress 網(wǎng)站手機(jī)端移動(dòng)設(shè)備測(cè)試工具
• 在WordPress中調(diào)試和修復(fù)503服務(wù)不可用錯(cuò)誤
• 提高 WooCommerce 商店速度的十種方法
• Imsanity：限制上傳圖片尺寸大小
• 使用WebP圖片加速您的網(wǎng)站
• 如何在 WordPress 中使用 WebP 圖片？
• 如何優(yōu)化圖片來提高WordPress網(wǎng)站加載速度
• WordPress緩存指南及緩存插件推薦
• 6個(gè)好用的WordPress Lazy Loading延遲加載插件