ProRank SEO
Docs/Performance/Asset Optimization

Asset Optimization

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

Core Feature

Overview

Asset Optimization is a comprehensive suite of performance features designed to dramatically improve your website's loading speed and Core Web Vitals scores. With intelligent CSS optimization, advanced JavaScript management, local font hosting, and video facade technology, your site will load 30-50% faster.

30-50% Faster

Typical performance improvement with all features enabled

Safe Rollback

Disable any feature to instantly revert all changes

AI-Powered

Intelligent analysis for optimal critical CSS generation

Core Feature

Asset Optimization features are available with ProRank SEO Core license and above. Features are automatically disabled if license expires, with all optimizations cleanly reverted.

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 typically improves First Contentful Paint by 20-40% and eliminates render-blocking CSS.

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.

Pro Tip

Use delay loading for non-critical features like chat widgets and social media embeds to reduce Total Blocking Time (TBT) by 40-60%.

Font Optimization

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 Optimization

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

Video Optimization

Lightweight Facades

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

Performance Impact

Before Optimization

  • YouTube Embed:~1.2MB
  • HTTP Requests:15+
  • JavaScript:Blocking

After Optimization

  • Lite Facade:~15KB
  • HTTP Requests:1
  • JavaScript:On-demand

98% Size Reduction

Safety & Cleanup

Automatic Cleanup on Disable

Every Asset Optimization feature includes automatic cleanup. When you disable any module, all optimizations 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. 1

    Video Optimization

    Lowest risk, highest impact. Enable for YouTube and Vimeo.

  2. 2

    Font Optimization

    Very safe. Download fonts locally for privacy and speed.

  3. 3

    Critical CSS

    Medium risk. Test thoroughly after enabling.

  4. 4

    Script Management

    Configure specific scripts as needed.

  5. 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 optimizations
  • • Keep browser console open to check for JavaScript errors

Expected Performance Improvements

20-40%

Faster FCP

30-50%

Faster LCP

40-60%

Less TBT

30-50%

Smaller Size

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
POST /wp-json/prorank-seo/v1/unused-css/scan
GET  /wp-json/prorank-seo/v1/unused-css/status
POST /wp-json/prorank-seo/v1/unused-css/clear

// Script Manager
GET  /wp-json/prorank-seo/v1/script-manager/scripts
GET  /wp-json/prorank-seo/v1/script-manager/rules
POST /wp-json/prorank-seo/v1/script-manager/rules
DELETE /wp-json/prorank-seo/v1/script-manager/rules/{handle}

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

// Video Optimizer
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
apply_filters('prorank_critical_css_content', $css, $context);
apply_filters('prorank_critical_css_viewport', $viewport);

// Unused CSS
apply_filters('prorank_unused_css_safelist', $patterns);
apply_filters('prorank_unused_css_exclude_handles', $handles);

// Script Manager
apply_filters('prorank_script_rules', $rules);
apply_filters('prorank_script_should_load', $should_load, $handle);

// Font Optimization
apply_filters('prorank_fonts_to_download', $fonts);
apply_filters('prorank_font_display_value', 'swap');

// Video Optimizer
apply_filters('prorank_video_providers', $providers);
apply_filters('prorank_video_should_optimize', $should, $url);

Next Steps