Resource Prioritization Foundation
Browsers do not load a webpage linearly from top to bottom; they analyze the HTML and prioritize resources based on perceived necessity. Resource prioritization is how you influence that queue so the browser spends bandwidth and CPU on the above-the-fold experience first.
Prioritization is about controlling the Critical Rendering Path. By deferring non-essential JavaScript and preloading critical above-the-fold assets, you clear the network and CPU queue, dramatically improving LCP and INP.
Core Concepts: Resource Loading Phases
| Phase | Description | WordPress Examples |
|---|---|---|
| Critical | Must load before the first visual paint; affects LCP directly | Hero image, above-the-fold web font, base CSS |
| High Priority | Needed quickly after the first paint | Navigation JavaScript, font fallbacks |
| Medium Priority | Functional, but not urgent for the initial view | Scroll animations, secondary interactive buttons |
| Low Priority | Can load late or only on user interaction | Chat widgets, comment systems, 3rd-party trackers |
Typical Problems Without Prioritization
| Problem | Symptom | Root Cause |
|---|---|---|
| Render-blocking CSS | Blank white screen for 2–3 seconds | Heavy theme stylesheets loaded synchronously in <head> |
| Delayed interaction | High INP/TBT | Large JS bundles executed before the user can interact |
| Layout shifts | High CLS | Fonts or images loading late and pushing text down |
| Unused assets | Bloated page size | Plugins aggressively enqueuing scripts globally |
Why Use Perfmatters
While caching plugins handle the server side, a plugin like Perfmatters gives you surgical control over frontend resource delivery:
| Feature | Benefit |
|---|---|
| Delay JavaScript | Eliminates TBT/INP delays by holding third-party scripts until user interaction. |
| Script Manager | Unload unnecessary JS/CSS on a per-page or post-type basis (e.g., unloading form CSS on the homepage). |
| Preload Assets | Instructs the browser to prioritize the LCP hero image and critical fonts. |
| Disable Core Bloat | Strips out WordPress defaults like emojis and dashicons, saving ~50–100 KB per page. |
| Local Google Fonts | Removes the external DNS lookup and allows font preloading. |
Implementation Philosophy
- Less is More: Load only what is needed, precisely where it is needed.
- Surgical Control: Use the Script Manager to unload assets at the page/template level, rather than relying on global toggles.
- Defer vs Delay: Use
deferfor essential functional JS (like mobile menus). Usedelaystrictly for third-party or below-the-fold scripts. - Preload Selectively: Preload the LCP image and exactly one or two critical fonts. Overloading the preload queue defeats its purpose.
- Audit Plugin Enqueues: Assume every new plugin will load its assets globally until proven otherwise.
- Static / Blogs
- Dynamic / WooCommerce
Strategy: Delay and unload aggressively.
Reason: Content-focused pages are heavily cached and require minimal JavaScript to function. You can delay almost all JS.
Strategy: Defer with care; use highly contextual unloads.
Reason: Logged-in sessions, cart updates, and checkout scripts must remain functional and cannot simply be delayed until interaction.
Baseline Metrics to Watch
| Metric | Target |
|---|---|
| LCP | < 2.5s (ideally < 1.8s for static) |
| INP | < 200ms |
| CLS | <= 0.1 |
| JS Payload | < 150 KB initial, < 300 KB total |
| CSS Payload | < 75 KB critical, < 150 KB total |
Troubleshooting Matrix
| Symptom | Metric Affected | Likely Cause | Fix |
|---|---|---|---|
| Blank screen on load | LCP | Render-blocking styles | Generate Critical CSS; defer main stylesheet |
| Button clicks delayed | INP | Main thread blocked by JS | Delay third-party JS; defer theme scripts |
| Text shifts after load | CLS | Fonts swapping late | Preload local fonts; use font-display: swap |
| Page size remains huge | Total Bytes | Global plugin bloat | Use Script Manager to unload unused assets |
Quick Lab
Perfmatters Configuration Lab
- Install Perfmatters and enable Delay JS.
- Add a heavy third-party script (like Google Analytics) and verify it does not load until you move the mouse.
- Enable the Script Manager and navigate to your homepage. Unload a plugin's CSS (e.g., Contact Form 7) specifically for the homepage.
- Enable Local Google Fonts and set the primary heading font weight to preload.
- Run PageSpeed Insights and measure the reduction in JavaScript execution time and improvement in LCP.
Cheat Sheet
View Cheat Sheet
| Do | Don't |
|---|---|
| Delay non-critical third-party JS | Don't load everything synchronously in <head> |
| Preload only the hero image and critical font | Don't preload all assets blindly |
| Use Script Manager to unload by post type | Don't globally disable scripts without testing |
| Defer mobile menu and toggle JS | Don't delay core interactivity scripts |
| Lazy-load embeds and below-fold images | Don't auto-load third-party media on page load |
Mastering resource prioritization flips the browser's default behavior from "load everything now" to "load only what the user sees first." This is the key to passing Core Web Vitals on mobile devices.