WP Auditor bởi Aswin E

WP Auditor is a developer tool that performs deep performance analysis on any
webpage, with a focus on WordPress sites. Unlike generic tools, every issue
comes with real evidence — actual file URLs, byte sizes, DOM paths, and
plugin names — not vague suggestions.

HOW IT WORKS

The extension collects live data directly from the page you are viewing
(DOM structure, scripts, stylesheets, images, WordPress signals) and sends
it to a local Playwright backend, which runs a headless browser pass to
measure real network sizes, CSS coverage, and load timing. Results appear
in the sidebar alongside your page.

WHAT IT CHECKS

JavaScript
- Render-blocking scripts in without defer or async
- jQuery and jQuery Migrate loaded in production
- Duplicate libraries loaded by competing plugins
- Excessive JS file count and total payload size
- Inline script count

CSS
- Total stylesheet count
- Large CSS files over 100KB
- Page builder stylesheets (Elementor, Divi, WPBakery, Beaver Builder)
- Estimated unused CSS percentage via Chrome Coverage API

Network
- Total HTTP request count and page weight
- Third-party domains adding connection overhead
- External domains missing preconnect hints
- Full page load time

DOM
- Total node count (flags above 1500)
- Maximum nesting depth (flags above 15 levels)

Media
- Images served larger than their display size
- Images missing lazy loading
- CSS background images used instead of proper img tags

WordPress-Specific
- Plugin detection via asset URL paths (30+ plugins recognised)
- admin-ajax.php used for frontend requests
- WordPress version detection

Anti-Patterns
- Multiple separate Google Fonts requests
- Excessive font file variants
- Unthrottled scroll and resize event listeners

SCORING

Each issue is weighted by severity (Critical, High, Medium, Low) and a
score from 0 to 100 is calculated. The sidebar shows a breakdown by
category so you can prioritise fixes.

REQUIREMENTS

• Firefox 140 or higher
• A local Node.js backend running on port 3001
  (included in the download — one command to start)

This tool is intended for developers, QA engineers, and performance
auditors who need actionable evidence, not a traffic-light score.



WP Auditor is a developer tool that audits web pages for performance
issues, with a focus on WordPress sites. It uses a hybrid architecture:
the extension collects DOM/JS/CSS data from the active tab via a content
script, then sends it to a locally-running Node.js backend (included with
the extension) which performs a deeper network analysis using Playwright.


This extension requires a companion backend server running on
http://localhost:3001 to function. The backend is a Node.js/TypeScript
server (included in the downloadable package from our website) that the
developer runs locally on their own machine.

To start the backend:
cd backend
npm install
npx playwright install chromium
npx ts-node server.ts

The extension will show a red status dot and an error message if the
backend is not running. No data is sent to any external server — all
analysis happens locally on the user's machine.


The sidebar makes fetch() calls to http://localhost:3001 to:
1. POST the collected DOM data for analysis
2. Poll for the audit result

This is entirely local — no third-party servers, no cloud services, no
data leaves the user's machine.

• activeTab : Read the URL of the currently active tab
• tabs : Query the active tab to get its URL and send messages
• storage : Reserved for future settings persistence (not yet used)
• http:/// : Required to inject the content script into HTTP pages
  and to allow the sidebar to call localhost:3001
• https:/// : Required to inject the content script into HTTPS pages
  (most WordPress sites)

content.js is injected into the active tab only when the user clicks
"Audit This Page" in the sidebar. It reads:
- Script and stylesheet tags (src attributes only)
- DOM element count and nesting depth
- Image natural vs display dimensions
- Computed background-image styles (decorative image detection)
- window.jQuery global (version detection)
- Inline script text content (pattern matching only)
- Meta generator tag (WordPress version)

The content script does NOT:
- Read form inputs or user-entered data
- Access cookies or localStorage
- Send any data to external servers
- Persist any data

All collected data is passed to the local backend via the sidebar and
discarded after the audit report is generated.


The sidebar (sidebar/sidebar.js) uses DOMParser + replaceChildren()
for all dynamic HTML rendering — no innerHTML assignments. All user-facing
strings are passed through escHtml() for XSS safety. All click handlers
use event delegation via data-action attributes — no inline onclick handlers.

1. Install the extension temporarily via about:debugging
2. Start the backend: npx ts-node server.ts (requires Node.js 18+)
3. Navigate to any WordPress site (e.g. https://wordpress.org)
4. Click the WP Auditor toolbar icon to open the sidebar
5. Click "Audit This Page"
6. The sidebar will show a 3-step progress indicator and then display
   the audit report with scored issues, severity filters, and
   expandable evidence for each finding

If the backend is not running, the extension gracefully shows an error
message with setup instructions. No crashes or unhandled errors occur
in the offline state.


The extension itself (manifest, background, content, sidebar files) has
zero external dependencies and makes no network requests except to
http://localhost:3001 (the user's own machine).