Skip to content

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.

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.

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/"]
}

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.

Works in tandem with the critical CSS extraction processor. After the CSS processor extracts above-the-fold styles for each page, this HTML processor:

  1. Inlines the extracted critical CSS in a <style> block in the <head>.
  2. Converts the original <link rel="stylesheet"> tags to non-render-blocking loads using the media="print" onload pattern.
  3. 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.

Moves render-blocking <script> tags so they no longer block parsing. Two strategies are available:

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.

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"]
}

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.

Targets WordPress-specific markup patterns that add page weight with no user-facing benefit:

Removed elementWhy it existsWhy it’s safe to remove
Emoji detection script (wp-emoji-release.min.js)Polyfills emoji for old browsersModern browsers render emoji natively
oEmbed discovery linksAuto-discovery for oEmbed consumersOnly matters for sites embedding your content
Feed autodiscovery linksRSS/Atom feed links in <head>Not needed for page rendering
REST API linkAdvertises the WP REST API endpointNot needed by browsers
Shortlink <link>WordPress-generated short URLsRedundant with canonical
Generator <meta>Reveals WordPress versionNo user benefit; minor security hygiene

This processor works on any static export of a WordPress site.

Converts a static multi-page site into a Single Page Application using the View Transitions API. It injects a small navigation interception script that:

  1. Intercepts same-origin link clicks.
  2. Fetches the target page with fetch().
  3. Calls document.startViewTransition() to animate between the current and new document.
  4. Replaces document.body with 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.