HTML Processors
HTML is the entry point for every page optimization. pageflare runs up to eight distinct processors on each HTML file, each targeting a specific performance pattern. They always execute in the order listed here, with minification last.
Minification
Section titled “Minification”pageflare’s HTML minifier applies aggressive settings:
- Collapses whitespace in text nodes and between tags.
- Removes HTML comments (excluding conditional comments for IE compatibility).
- Strips optional closing tags.
- Minifies inline
<style>and<script>blocks using the same CSS and JS minifiers as the dedicated processors.
Because minification runs after all other HTML processors, it compresses the final output rather than intermediate markup that will be further modified.
Lazy loading
Section titled “Lazy loading”Adds loading="lazy" to <img> and <iframe> elements that do not already have a loading attribute. This defers off-screen resources and reduces initial page weight.
The processor respects an exclude list. Any image or iframe whose src matches a configured exclusion pattern is left untouched. This is useful for hero images or above-the-fold iframes that must load eagerly.
{ "lazy_load_images": true, "lazy_load_iframes": true, "lazy_load_excludes": ["hero.jpg", "/banners/"]}Resource hints
Section titled “Resource hints”Scans each HTML file for external resources referenced in <link>, <script>, and <img> tags, then generates and injects <link> elements in the <head>:
preload— for critical same-origin resources (fonts, above-the-fold images, render-critical scripts).preconnect— for cross-origin domains that assets are fetched from (Google Fonts, CDNs, analytics).dns-prefetch— for additional third-party origins where a full preconnect is not warranted.
Hints are deduplicated — if the same origin appears multiple times in a page, only one preconnect hint is emitted.
The asset graph (built during the analyze phase) provides the full list of referenced origins, so hints cover assets embedded deep in CSS files as well as those directly in HTML.
Critical CSS injection PRO
Section titled “Critical CSS injection ”Works in tandem with the critical CSS extraction processor. After the CSS processor extracts above-the-fold styles for each page, this HTML processor:
- Inlines the extracted critical CSS in a
<style>block in the<head>. - Converts the original
<link rel="stylesheet">tags to non-render-blocking loads using themedia="print" onloadpattern. - Adds a
<noscript>fallback that loads the full stylesheet normally for users without JavaScript.
This eliminates render-blocking stylesheets — the browser can paint the above-the-fold content without waiting to download and parse full CSS files.
Script deferral
Section titled “Script deferral”Moves render-blocking <script> tags so they no longer block parsing. Two strategies are available:
defer method (default)
Section titled “defer method (default)”Adds the defer attribute to external <script src="..."> tags that lack async or defer. Deferred scripts execute after the document is parsed but before DOMContentLoaded, preserving execution order.
user-interaction method
Section titled “user-interaction method”Delays script loading entirely until the user first interacts with the page (mouse move, scroll, keydown, touch). Scripts are then injected dynamically. This is more aggressive — suitable for analytics or chat widgets that do not need to run before interaction.
{ "js_defer": true, "js_defer_method": "user-interaction", // or "defer" (default) "js_defer_excludes": ["critical-init.js"]}YouTube facades PRO
Section titled “YouTube facades ”Replaces <iframe src="https://www.youtube.com/embed/..."> elements with a lightweight static placeholder. The placeholder consists of:
- The YouTube video thumbnail (loaded as a regular
<img>). - A play button overlay rendered in pure CSS — no external image.
- An inline event listener that replaces the placeholder with the real iframe on click.
A typical embedded YouTube iframe loads ~500 KB of JavaScript from YouTube’s servers. The facade loads nothing until the user clicks play, eliminating the weight entirely.
The replacement is fully self-contained — no external JavaScript library is injected. The facade markup is ~300 bytes.
WordPress bloat removal PRO
Section titled “WordPress bloat removal ”Targets WordPress-specific markup patterns that add page weight with no user-facing benefit:
| Removed element | Why it exists | Why it’s safe to remove |
|---|---|---|
Emoji detection script (wp-emoji-release.min.js) | Polyfills emoji for old browsers | Modern browsers render emoji natively |
| oEmbed discovery links | Auto-discovery for oEmbed consumers | Only matters for sites embedding your content |
| Feed autodiscovery links | RSS/Atom feed links in <head> | Not needed for page rendering |
| REST API link | Advertises the WP REST API endpoint | Not needed by browsers |
Shortlink <link> | WordPress-generated short URLs | Redundant with canonical |
Generator <meta> | Reveals WordPress version | No user benefit; minor security hygiene |
This processor works on any static export of a WordPress site.
SPA mode PRO
Section titled “SPA mode ”Converts a static multi-page site into a Single Page Application using the View Transitions API. It injects a small navigation interception script that:
- Intercepts same-origin link clicks.
- Fetches the target page with
fetch(). - Calls
document.startViewTransition()to animate between the current and new document. - Replaces
document.bodywith the new page’s body and updates<head>metadata.
The result is animated page transitions without a full browser navigation, dramatically improving perceived performance on multi-page sites.
Related concepts
Section titled “Related concepts”- CSS processors — critical CSS extraction that feeds the injection processor
- JavaScript processors — JS minification applied to inline scripts
- Processors — how processors are registered, ordered, and gated by tier