Asset Optimisation

Advanced optimisation suite for CSS, JavaScript, fonts, and video content

Free, Pro+, & Business+ Features

Overview

Asset Optimisation combines CSS delivery, JavaScript management, local font hosting, and video facades. Enable one feature at a time, test representative templates, and compare lab and field measurements because results depend on the theme, plugins, content, hosting, and cache state.

Measured Tuning

Compare representative pages before and after each feature

Safe Rollback

Disable any feature to instantly revert all changes

AI-Powered

Intelligent analysis for optimal critical CSS generation

Feature Tiers

CSS and JS minification are free. Critical CSS, Unused CSS removal, and Script Manager require Pro+. Video Optimisation requires Business+. Performance Profile in Advanced Settings can override builder-site suppressions.

Critical CSS

What It Does

Critical CSS extracts and inlines the minimum CSS required to render above-the-fold content, eliminating render-blocking resources and improving First Contentful Paint (FCP).

Manual Mode

Write or paste your own critical CSS
Full control over critical styles
Ideal for developers

Automatic Mode

AI-powered CSS analysis
Viewport-based detection
Auto-regeneration on changes

Performance Impact

Critical CSS can reduce render-blocking work when CSS is the bottleneck. Confirm the generated coverage and compare FCP and LCP on representative pages before enabling it broadly.

Remove Unused CSS

How It Works

Scans your pages to identify CSS rules that aren't being used and removes them, significantly reducing file sizes. Uses PurgeCSS-like technology with intelligent safelist protection.

Safelist Protection

Default Protected Patternscss

/* WordPress Core */
.wp-*, .has-*, .is-*, .align*, .gallery*, .wp-block*

/* JavaScript Classes */
.js-*, .active, .open, .hidden, .loading, .error

/* Popular Frameworks */
.btn*, .modal*, .dropdown*, .nav*, .card*

/* Animations */
.animate*, .fade*, .slide*, .bounce*, .zoom*

/* Responsive Utilities */
.sm:*, .md:*, .lg:*, .xl:*, .2xl:*

Add your own patterns in settings using wildcards or regex:

Custom Safelisttext

.my-dynamic-class
.js-*
/^animate-/
.modal-*
#special-id

Test Thoroughly

Unused CSS removal can affect dynamic elements. Always test with JavaScript interactions and add necessary selectors to the safelist.

Advanced JavaScript Management

Loading Strategies

Fine-grained control over how individual JavaScript files load on your site.

defer

Downloads in parallel, executes after DOM ready. Maintains order.

async

Downloads and executes immediately. Doesn't block parsing.

delay

Loads only after user interaction (scroll, click, hover).

remove

Completely blocks script from loading on selected pages.

footer

Moves script to bottom of page to reduce blocking.

custom

Apply custom attributes and loading conditions.

Per-Page Asset Controls

Pro+ adds a ProRank Script Manager panel to public post types so you can stop a script or stylesheet on one singular page without creating a site-wide rule.

Open the page on the front end from the panel's signed Scan this page link.
Return to the editor after the scan records the enqueued script and style handles.
Select only the assets that the page does not need, then update the post.
Clear page and CDN caches, then test the public page while logged out.

Use exact handles and test first

Per-page choices apply only to singular views and preserve WordPress asset handles exactly. Do not disable a dependency unless you have tested forms, menus, checkout, consent, and other interactive paths on that page.

Pro Tip

Use delay loading for non-critical features like chat widgets and social media embeds when testing shows they contribute main-thread work. Recheck consent, forms, navigation, and interaction latency.

Content Visibility Learning

Optional content-visibility learning measures stable below-the-fold sections on real page views, then applies separate desktop and mobile intrinsic sizes so browsers can defer rendering without causing avoidable layout movement.

• Disabled by default and limited to singular public pages.
• Requires corroborated observations from multiple sources over time before a selector is approved.
• Uses a narrow selector grammar and rejects unstable or implausible geometry.
• Keeps mobile and desktop profiles separate and expires old evidence automatically.

Start with a canary page and verify desktop and mobile layout before enabling the learning option site-wide. A section without enough stable evidence is left unchanged.

Font Optimisation

Local Google Fonts

Downloads and hosts Google Fonts locally on your server, improving privacy (GDPR compliance) and performance by eliminating external requests.

Performance Benefits

• Eliminates DNS lookups to Google
• Reduces external HTTP requests
• Better caching control
• Faster loading in restricted regions

Privacy Benefits

• GDPR compliance
• No Google tracking
• No external data sharing
• Complete font control

Font Display Optimisation

font-display: swapcss

@font-face {
  font-family: 'Roboto';
  font-display: swap; /* Shows fallback immediately */
  src: url('/fonts/roboto.woff2') format('woff2');
}

Video Optimisation

Lightweight Facades

Replaces heavy video embeds (YouTube, Vimeo) with lightweight facades that load the actual player only when clicked, dramatically improving initial page load.

Business and Agency users can also control Video Optimisation for each post from the WordPress editor, without changing the site-wide provider settings.

What Changes on Initial Load

Direct Embed

Player resources:Immediate
Third-party requests:At page load
JavaScript:Blocking

Facade

Preview:Lightweight
Player requests:After click
JavaScript:On-demand

Measure transferred bytes and interaction behavior on your actual provider embed.

Safety & Cleanup

Automatic Cleanup on Disable

Every Asset Optimisation feature includes automatic cleanup. When you disable any module, all optimisations are instantly reverted, returning your site to its original state.

What Gets Cleaned Up:

Critical CSS removed from pages
Original CSS delivery restored
Downloaded fonts deleted

Script modifications reverted
Video embeds return to original
All caches automatically cleared

Compatible Cache Plugins:

WP RocketW3 Total CacheWP Super CacheLiteSpeed CacheWP Fastest Cache

Quick Start Guide

Recommended Activation Order

1
Video Optimisation
Lowest risk, highest impact. Enable for YouTube and Vimeo.
2
Font Optimisation
Very safe. Download fonts locally for privacy and speed.
3
Critical CSS
Medium risk. Test thoroughly after enabling.
4
Script Management
Configure specific scripts as needed.
5
Remove Unused CSS
Higher risk. Enable last and monitor carefully.

Important Notes

• Always test on staging first
• Clear all caches after enabling features
• Monitor for 24-48 hours before adding more optimisations
• Keep browser console open to check for JavaScript errors

Measure the Result

First paint

Compare FCP before and after on representative pages.

Largest content

Validate LCP in lab tests and field data when available.

Responsiveness

Check TBT in the lab and INP from real-user monitoring.

Transferred bytes

Compare CSS and JavaScript request counts and payload sizes.

Developer Reference

REST API Endpoints

API Endpointsjavascript

// Critical CSS
POST /wp-json/prorank-seo/v1/performance/critical-css/generate
GET  /wp-json/prorank-seo/v1/performance/critical-css/status/{task_id}
GET  /wp-json/prorank-seo/v1/critical-css/status

// Unused CSS
GET  /wp-json/prorank-seo/v1/ucss/stats
POST /wp-json/prorank-seo/v1/ucss/analyze


// Script Manager
GET  /wp-json/prorank/v1/script-manager/global
GET  /wp-json/prorank/v1/script-manager/analysis

// Font Optimisation
GET  /wp-json/prorank-seo/v1/font-optimization/stats
POST /wp-json/prorank-seo/v1/font-optimization/download

// Video Optimiser
GET  /wp-json/prorank-seo/v1/video-optimizer/stats
POST /wp-json/prorank-seo/v1/video-optimizer/posts/{id}/toggle

Hooks & Filters

Available Hooksphp

// Critical CSS
// Critical CSS thresholds
apply_filters('prorank_critical_css_required_groups', 3, $covered);
apply_filters('prorank_critical_css_min_bytes', 3200, $covered);

// CSS combine limits
apply_filters('prorank_css_combine_chunk_max_files', 24);
apply_filters('prorank_css_combine_chunk_max_bytes', 393216);
apply_filters('prorank_combined_css_url', $url, $handle, $media);

// CSS inline/async behavior
apply_filters('prorank_inline_css_minify_min_bytes', 512);
apply_filters('prorank_css_async_preload_budget', $default_budget);

// Script Manager
apply_filters('prorank_frontend_admin_asset_keep_handles', []);
apply_filters('prorank_strip_frontend_admin_assets', false);