Rendering Optimization

The Rendering Optimization module is designed to improve page load performance by optimizing how JavaScript, fonts, and images are loaded. This module includes four configuration tabs: JavaScript, Resources, Fonts, and Lazy Load.

Tab 1: JavaScript

This tab contains options for optimizing JavaScript loading strategies to improve page render performance.

Option: Defer JavaScript

Description: Adds the defer attribute to all eligible JavaScript files.

How it works:

JavaScript files are loaded in parallel but execute only after the HTML parsing is complete
Prevents JavaScript from blocking page rendering
Scripts maintain their execution order based on dependencies

Use case: Recommended for most non-critical JavaScript that doesn't need to execute immediately on page load.

Default: Disabled

Option: Delay JavaScript

Description: Delays JavaScript execution until user interaction or timeout.

How it works:

Scripts are not loaded until the user interacts with the page (click, touch, keypress, scroll, mousemove) or the timeout expires
Uses type="text/plain" to prevent execution, then converts back when ready
Includes a timeout mechanism (configurable below)

Use case: Highly effective for below-the-fold scripts, analytics, and non-critical third-party scripts.

Default: Disabled

Option: Delay Timeout

Description: Maximum time (in milliseconds) to wait before loading delayed scripts.

Range: 500 - 5000 ms (default: 1000 ms)

How it works:

If no user interaction occurs, scripts are loaded automatically after the timeout
Lower values = faster script loading but less performance benefit
Higher values = better performance but delayed functionality

Default: 1000 (1 second)

Option: Move Scripts to Footer

Description: Moves eligible JavaScript files from the to the footer of the page.

How it works:

Scripts are loaded after the main content is rendered
Critical scripts (jQuery, jQuery UI, WooCommerce, etc.) are automatically excluded
Reduces render-blocking JavaScript in the head section

Safe list (automatically excluded):

jquery, jquery-core, jquery-migrate
jquery-ui-core, jquery-ui-tabs, jquery-ui-accordion

Default: Disabled

Option: Safe Mode Exclusions

Description: Automatically excludes critical scripts from delay functionality.

How it works: Prevents the following from being delayed:

Elementor, Bricks page builders
Motion page animations
Google Tag Manager, Analytics
reCAPTCHA
Cookie consent plugins
WooCommerce and cart fragments
MetForm

Default: Enabled (recommended for e-commerce sites)

Option: JavaScript Exclusions

Description: Custom exclusion list for JavaScript files that should not be optimized.

How to use:

Enter script handles or URLs, one per line
Supports partial matching, full handles, and URL patterns
Example: contact-form-7, some-plugin-script.js

Default: Empty

Pattern matching support:

Exact handle match: jquery
Partial match: google-analytics
URL match: cdn.example.com/script.js
Regex pattern: /^analytics.*\.js$/

Tab 2: Resources

This tab handles resource preloading and fetchpriority attributes for critical resources.

Option: Enable FetchPriority

Description: Adds fetchpriority attributes to critical resources.

How it works:

Helps browsers prioritize important resources (images, scripts, styles)
Works with manual rules defined below
Particularly effective for LCP (Largest Contentful Paint) optimization

Default: Disabled

Option: Enable Preload

Description: Adds headers for critical resources.

How it works:

Preloads resources that will be needed soon
Requires manual rule configuration
Automatically detects resource type (font, style, script, image) from URL extension

Default: Disabled

Manual FetchPriority Rules

Description: Define custom rules for resources that should receive high priority.

Configuration fields:

URL/Selector: Resource URL, handle, or CSS selector (e.g., .featured-image, #logo)
Type: img, script, or link
Priority: high or low
Condition: global, homepage, single, page, or archive

Example rules:

URL: /wp-content/themes/mytheme/hero-image.jpg
Type: img
Priority: high
Condition: homepage

Manual Preload Rules

Description: Define resources to preload on specific pages.

Configuration fields:

URL: Full URL or path to resource
Condition: When to preload (global, homepage, single, page, archive)

Example:

URL: https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
Condition: global

Featured Image Priority

Description: Automatically adds fetchpriority="high" to featured images on singular posts.

How it works:

Only applies to singular pages (posts, pages)
Controlled by manual rules
Helps improve LCP for featured images

Tab 3: Fonts

This tab optimizes font loading for better performance and reduced layout shifts.

Option: Font Display Swap

Description: Adds font-display: swap CSS property to font stylesheets.

How it works:

Forces fallback font display while web fonts are loading
Prevents invisible text during font loading
Reduces Cumulative Layout Shift (CLS)
Automatically adds display=swap to Google Fonts URLs
Adds preconnect hints for Google Fonts

Supported font services:

Google Fonts (fonts.googleapis.com, fonts.gstatic.com)
Font Awesome (use.fontawesome.com, cdnjs.cloudflare.com)
Material Icons
Generic icon fonts (dashicons, genericons, ionicons)

Default: Disabled

Font Optimization Process

Preconnect Hints: Adds for Google Fonts domains
URL Optimization: Appends display=swap to Google Fonts requests
CSS Injection: Adds font-display: swap to @font-face rules
Inline Styles: Handles inline CSS containing font definitions

Font Detection

The system automatically detects font stylesheets based on:

Handle names containing: google-fonts, font-awesome, roboto, open-sans, montserrat, etc.
URLs containing: fonts.googleapis.com, fonts.gstatic.com, fontawesome.com

Tab 4: Lazy Load

This tab controls lazy loading for images, iframes, and videos.

Option: Lazy Load Images

Description: Adds loading="lazy" attribute to images and enables JavaScript-based lazy loading.

How it works:

Uses native browser lazy loading (WordPress 5.5+) where available
JavaScript-based fallback for maximum compatibility
Replaces src with data-src and sets placeholder SVG
Adds decoding="async" for off-main-thread decoding
Adds devdoit-lazy class for styling

Image processing:

Processes tags, adding loading="lazy" if missing
Converts src to data-src for JS-based loading
Handles srcset by converting to data-srcset
Adds decoding="async" attribute
Adds CSS class devdoit-lazy

Default: Disabled

Option: Lazy Load IFrames

Default: Disabled

Option: Exclude First N Images

Description: Number of first images to exclude from lazy loading (LCP protection).

How it works:

First N images are NOT lazy loaded, keeping them eager
Protects LCP (Largest Contentful Paint) score
Recommended: Set to 1 for most sites (hero image)

Example:

Setting to 1 means only the first image on each page is excluded
Setting to 2 excludes first two images (e.g., featured image + first content image)

Default: 0 (no exclusion)

Recommendation: Set to 1 to prevent the featured image from being lazy loaded.

LCP Protection

Description: Prevents critical above-the-fold images from being lazy loaded.

How it works:

Images with fetchpriority="high" are automatically excluded
Featured images on singular pages receive special handling
First N images (configurable) are always loaded eagerly

Automatic Exclusions

The module automatically disables optimization on:

Admin pages: Always excluded
Customizer preview: Always excluded
WooCommerce checkout: Excluded (critical functionality)
WooCommerce cart: Excluded (AJAX cart fragments)
WooCommerce account pages: Excluded (logged-in user features)

Performance Impact

Optimization	Impact	Use Case
Defer JS	High	Most sites
Delay JS	Very High	Content-heavy sites
Font Swap	Medium	Sites using web fonts
Lazy Load Images	Very High	Image-heavy sites
Preload	Medium	Critical resource optimization
FetchPriority	Medium	LCP optimization

Troubleshooting

Scripts Not Loading

If scripts don't load after enabling delay/defer:

Check browser console for errors
Add problematic scripts to exclusions
Disable Safe Mode Exclusions temporarily
Check for JavaScript dependencies

Layout Shifts

If using Font Display Swap causes layout shifts:

Ensure fallback fonts are defined in CSS
Preload critical fonts via Resources tab
Consider using font-display: optional instead

LCP Issues

If LCP score worsens after enabling Lazy Load:

Increase "Exclude First N Images" to 1 or 2
Add featured image to manual fetchpriority rules
Ensure hero image has fetchpriority="high"