Table of content

DJIA Cache – Assets Tab

The Assets tab contains settings for optimizing static files such as CSS, JavaScript, fonts, and images. These optimizations reduce render-blocking resources, improve caching efficiency, and help achieve better performance scores in tools like Google PageSpeed Insights.

Sections included in this tab:

  • Static Asset Caching
  • JavaScript Optimization
  • Delay JS
  • Resource Hints
  • CSS Optimization
  • Minification

Static Asset Caching

Enable browser caching for WordPress/theme/plugin assets

Enables long-lived browser caching headers for static assets.

These include:

  • CSS files
  • JavaScript files
  • images
  • fonts

When enabled, browsers can reuse previously downloaded assets instead of requesting them again.

Benefits:

  • faster repeat visits
  • fewer server requests
  • improved loading performance

Static asset TTL (seconds)

Defines how long static assets should remain cached in the browser.

Example:

31536000

This equals 1 year of caching.

Long cache lifetimes are recommended for assets that rarely change.

Add immutable directive where supported

Adds the immutable directive to cache headers.

Example header:

Cache-Control: public, max-age=31536000, immutable

This tells browsers that the asset will never change during its lifetime, allowing them to skip revalidation checks.

Benefits:

  • fewer conditional requests
  • improved browser performance

Auto-write .htaccess rules when possible

Automatically writes caching rules to the .htaccess file if it is writable.

⚠ Warning:
Incorrect .htaccess configuration can break site access.

Only enable this if you understand how your server handles Apache configuration.

.htaccess rules

This section manages server rules used for:

  • asset caching
  • compression
  • performance optimization

Enable gzip/deflate compression

Enables gzip or deflate compression through web server rules.

Compression reduces file sizes for:

  • HTML
  • CSS
  • JavaScript

Benefits:

  • smaller downloads
  • faster page loading

⚠ Warning:
If your server already manages compression, enabling this again may cause double compression issues.

JavaScript Optimization

Add defer to enqueued scripts

Adds the defer attribute to enqueued JavaScript files.

Example:

<script src="script.js" defer></script>

Deferred scripts load in parallel and execute after HTML parsing, reducing render-blocking resources.

⚠ Warning:
Some plugins rely on blocking script execution and may break when deferred.

Defer exclusions (script handles)

Defines script handles that must not be deferred.

Example:

jquery
wp-embed

Each handle should be placed on a new line.

Add async to enqueued scripts (if defer is off)

Adds the async attribute to JavaScript files if defer is disabled.

Example:

<script src="script.js" async></script>

Async scripts load independently and execute immediately after downloading.

⚠ Warning:
Async can change execution order and break dependencies between scripts.

Async exclusions

Defines script handles that must not use async loading.

Each handle should be placed on a separate line.

Delay JS

Enable Delay JS (HTML rewrite)

Delays JavaScript execution by rewriting <script> tags in the final HTML output.

Scripts will only run after:

  • user interaction
  • fallback timeout

This significantly reduces initial page load work.

⚠ Warning:
Delaying JavaScript can break features that must run immediately.

Use Safe mode and exclusions if issues occur.

Mode

Choose the delay mode:

Safe Mode (recommended)

Delays external scripts only.

Aggressive Mode

Delays external and inline scripts.

This can improve performance further but may break functionality.

Fallback timeout (ms)

Automatically executes delayed scripts after a specified time if the user does not interact.

Example:

3000

Scripts will run after 3 seconds even without interaction.

Delay exclusions

Keywords that match inside <script> tags to exclude scripts from delay.

Example:

jquery
gtag
analytics

Any script containing these keywords will not be delayed.

Resource Hints

Resource hints help browsers establish early connections with external resources.

Preconnect URLs

Defines origins for preconnect.

Example:

https://fonts.gstatic.com
https://cdn.jsdelivr.net

Preconnect allows browsers to prepare:

  • DNS lookup
  • TCP handshake
  • TLS negotiation

before resources are requested.

Preload font URLs

Defines font files to preload early.

Example:

/wp-content/themes/theme/fonts/font.woff2

Preloading fonts prevents delays during text rendering.

Preload CSS URLs

Defines CSS files to preload before page rendering.

Example:

/wp-content/themes/theme/style.css

This ensures critical stylesheets load earlier.

CSS Optimization

Inline critical CSS

Injects critical CSS directly into the page HTML.

This allows the browser to render above-the-fold content immediately without waiting for external stylesheets.

Benefits:

  • faster first paint
  • improved Core Web Vitals

Delay CSS loading (non-blocking)

Loads CSS asynchronously for styles not excluded.

This reduces render-blocking styles and speeds up page rendering.

Also delay CSS automatically when a post has Used CSS (metabox)

If a post contains Used CSS data, DJIA Cache automatically applies optimized CSS loading rules.

This allows post-specific CSS handling.

Delay exclusions

Defines styles that should not be delayed.

You can specify:

  • style handles
  • URL fragments

Example:

main-style
theme-style

Disable CSS handles globally

Completely removes specified stylesheets.

Example:

contact-form-7
woocommerce-layout

⚠ Warning:
Disabling critical styles can break layout or cause missing styling.

Always test changes carefully.

Minification

Minification removes unnecessary characters from code to reduce file sizes.

Minify HTML

Removes whitespace and comments from HTML output.

Benefits:

  • smaller page size
  • faster downloads

Minify CSS files

Creates minified CSS files and stores them in the cache.

Benefits:

  • reduced CSS file size
  • faster loading

Minify JS files

Creates minified JavaScript files stored in the cache.

Benefits:

  • reduced JavaScript size
  • improved script loading performance