A practical walkthrough of real-world WordPress performance optimizations

When a WordPress site receives a low mobile or desktop score from performance testing tools like Google PageSpeed Insights or Lighthouse, warnings such as "Eliminate render-blocking resources", "Reduce unused JavaScript", and "Serve static assets with an efficient cache policy" are frequent. Developers often believe the solution is installing another caching plugin, but true performance improvements stem from optimizing the core theme.

This article outlines a step-by-step process to achieve significant performance gains on a sample WordPress site.

The initial audit revealed several common issues causing performance problems:

1. Gutenberg editor dependencies leaking to the frontend, loading unnecessary React libraries and causing heavy JavaScript bloat.

2. Dynamic timestamps in styles and scripts, disabling browser and CDN caching.

3. Synchronous web font loading via CSS @import declarations, blocking the critical rendering path.

4. Synchronous jQuery and jquery-migrate scripts blocking the rendering path.

5. Loading heavy plugin assets globally across pages, regardless of usage.

To address these issues, the following steps were taken:

1. Strip Gutenberg admin dependencies from frontend block scripts. Only include necessary frontend dependencies like jQuery, avoiding the heavy editor packages (wp-blocks, wp-element, wp-editor, wp-components).

2. Replace dynamic timestamp versioning with a centralized, static theme version constant. Increment this version number only when updating the site. This allows browsers to cache assets indefinitely and only re-fetch them upon deployment of new versions.

3. Eliminate CSS @import declarations and use modern font loading techniques. Remove @import url(...) rules, add preconnect hints in functions.php to resolve DNS and TLS handshakes early, and enqueue fonts centrally with display=swap to prevent Flash of Invisible Text (FOIT).

4. Defer jQuery loading and remove the deprecated jquery-migrate plugin. Instead, use vanilla JavaScript where possible or jQuery 3.6+ for modern features.

By implementing these optimizations, unnecessary megabytes of scripts were trimmed, render-blocking delays eliminated, and WordPress asset delivery streamlined. This resulted in substantial performance improvements, reducing the site's score from a frustrating 30–40 to a much higher value.