JavaScript File Optimization #3

New Issue

2026-09-13T07:22:46Z

kevin.bataille commented

2026-09-13 07:22:46 +00:00

Problem Statement

Render-blocking JavaScript delays page rendering. Multiple JS files increase HTTP requests. Scripts may execute before the DOM is ready.

Solution

Minify JavaScript files, combine them into fewer requests, defer loading until after HTML is parsed, and delay execution until user interaction.

User Stories

As a site owner, I want to minify JavaScript files, so that file sizes are smaller
As a site owner, I want to combine JavaScript files into fewer requests, so that HTTP overhead is reduced
As a site owner, I want to defer JavaScript loading, so that HTML parsing is not blocked
As a site owner, I want to delay JavaScript execution until user interaction (scroll, click, touch), so that page is interactive faster
As a site owner, I want to remove jQuery Migrate if not needed, so that page weight is reduced
As a site owner, I want to delay inline scripts, so that they don't block rendering
As a site owner, I want to exclude specific JavaScript files from optimization, so that compatibility is maintained
As a site owner, I want to see which JavaScript files are being optimized, so that I can verify the changes
As a site owner, I want safe scripts (analytics, consent) to load immediately, so that tracking works correctly
As a site owner, I want the optimization to work with CDN URLs, so that external resources are handled correctly

Implementation Decisions

JavaScript minification using independent implementation
Output buffering to detect and modify script tags
Defer via adding defer attribute to script tags
Delay via wrapping scripts in event listeners
Safe list for scripts that should not be delayed
File combination with cache-busting filenames

Testing Decisions

Test JavaScript files are minified
Test JavaScript files are combined into single file
Test deferred scripts have defer attribute
Test delayed scripts only execute on user interaction
Test safe list scripts are not delayed
Test excluded files are not modified
Test with CDN URLs

Out of Scope

CSS optimization (separate issue)
Image optimization (separate issue)

Further Notes

JavaScript optimization should work independently of CSS optimization.

## Problem Statement Render-blocking JavaScript delays page rendering. Multiple JS files increase HTTP requests. Scripts may execute before the DOM is ready. ## Solution Minify JavaScript files, combine them into fewer requests, defer loading until after HTML is parsed, and delay execution until user interaction. ## User Stories 1. As a site owner, I want to minify JavaScript files, so that file sizes are smaller 2. As a site owner, I want to combine JavaScript files into fewer requests, so that HTTP overhead is reduced 3. As a site owner, I want to defer JavaScript loading, so that HTML parsing is not blocked 4. As a site owner, I want to delay JavaScript execution until user interaction (scroll, click, touch), so that page is interactive faster 5. As a site owner, I want to remove jQuery Migrate if not needed, so that page weight is reduced 6. As a site owner, I want to delay inline scripts, so that they don't block rendering 7. As a site owner, I want to exclude specific JavaScript files from optimization, so that compatibility is maintained 8. As a site owner, I want to see which JavaScript files are being optimized, so that I can verify the changes 9. As a site owner, I want safe scripts (analytics, consent) to load immediately, so that tracking works correctly 10. As a site owner, I want the optimization to work with CDN URLs, so that external resources are handled correctly ## Implementation Decisions - JavaScript minification using independent implementation - Output buffering to detect and modify script tags - Defer via adding defer attribute to script tags - Delay via wrapping scripts in event listeners - Safe list for scripts that should not be delayed - File combination with cache-busting filenames ## Testing Decisions - Test JavaScript files are minified - Test JavaScript files are combined into single file - Test deferred scripts have defer attribute - Test delayed scripts only execute on user interaction - Test safe list scripts are not delayed - Test excluded files are not modified - Test with CDN URLs ## Out of Scope - CSS optimization (separate issue) - Image optimization (separate issue) ## Further Notes JavaScript optimization should work independently of CSS optimization.

kevin.bataille added the phase-2 label 2026-09-13 07:28:51 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: kevin.bataille/wp-recache#3