Page Optimization¶

CSS Settings tab¶

CSS Minify¶

OFF

Extra white space characters, newline characters, and comments will be stripped from all included CSS files if this option is enabled.

CSS Combine¶

OFF

All individual CSS files will be combined into a single CSS file.

Generate UCSS¶

OFF

Unique CSS (UCSS) is a QUIC.cloud service that can be used with the CSS Combine setting to create a single streamlined CSS file for each page of your site. This combined file may be unique for each page because it includes only the CSS needed to render that specific page.

Including only the necessary CSS keeps each combined CSS file small and may significantly reduce processing time.

A Run UCSS Queue Manually button appears when URLs are waiting in the queue. Gray URLs have not yet been submitted to QUIC.cloud; green URLs have been submitted for processing.

UCSS Inline¶

OFF

Enable this setting to store generated UCSS inline with the HTML rather than in a separate CSS file. This reduces additional CSS file loading.

CSS Combine External and Inline¶

OFF

By default, the CSS Combine option combines only local CSS files. When this option is enabled, external CSS files and CSS found inline in the HTML are also included in the combined file. Including all possible CSS in this way helps maintain CSS priorities, which should minimize potential errors caused by CSS Combine.

CSS HTTP/2 Push¶

This setting has been deprecated as of v4.4.3.

Load CSS Asynchronously¶

OFF

This option defaults to OFF. When it is OFF, web pages load normally: the browser loads the CSS from the HTML header before displaying the content in the HTML body.

When you turn this option ON, CSS and HTML load at the same time. Asynchronous processing can make pages load more quickly, but they may initially appear without formatting. To prevent this, LiteSpeed automatically generates Critical CSS when Load CSS Asynchronously is enabled.

Critical CSS is the collection of styles required to display above-the-fold content properly. These styles are inserted inline into the HTML and processed with it, preventing the content from appearing unformatted.

A Run CCSS Queue Manually button appears when URLs are waiting in the queue. Gray URLs have not yet been submitted to QUIC.cloud; green URLs have been submitted for processing.

CSS Per URL¶

ON

Set this option to OFF to generate Critical CSS per post type instead of per individual page. This can save significant CCSS quota and disk space; however, it may result in incorrect CSS styling if your site uses a page builder.

Inline CSS Async Lib¶

ON

This setting inlines the asynchronous CSS library to avoid render-blocking.

Font Display Optimization¶

Default

This setting appends font-display to all @font-face rules before caching CSS to specify how fonts should be displayed while they are being downloaded.

JS Settings tab¶

JS Minify¶

OFF

Extra whitespace characters, newline characters, and comments will be stripped from all JS if this option is enabled.

JS Combine¶

OFF

All individual JS files will be combined into a single JS file.

JS Combine External and Inline¶

OFF

Turn this option ON to include external and inline JavaScript in the combined file when JS Combine is also enabled. This option helps maintain JS execution priorities, which should minimize potential errors caused by JS Combine.

JS HTTP/2 Push¶

This setting has been deprecated as of v4.4.3.

Load JS Deferred¶

OFF

Both the Deferred and Delayed options hold JavaScript processing until the HTML has finished loading. The difference is in the timing:

• Deferred runs the JS as soon as the HTML finishes loading. This is the classic mode for deferred JavaScript.
• Delayed runs the JS only after detecting user activity, such as a key press or mouse movement.

Both options should improve your page speed score, but Delayed has greater potential because it can remove JS entirely from the page speed score calculation.

HTML Settings tab¶

HTML Minify¶

OFF

Extra whitespace characters, newline characters, and comments will be stripped from all HTML if this option is enabled.

DNS Prefetch¶

Empty List

With this setting, you can perform DNS resolution for the listed domains before they are requested. Prefetching DNS results can significantly reduce latency for visitors as they click external links, particularly on mobile networks. Enter domains one per line in the format //www.example.com.

Learn more.

DNS Prefetch Control¶

OFF

Widely enable DNS Prefetch for all URLs in the document, including images, CSS, JavaScript, and so forth. This can improve page loading speed.

DNS Preconnect¶

Empty List

This setting is similar to DNS Prefetch, but it goes further: whereas DNS Prefetch performs only DNS resolution, DNS Preconnect also performs the connection handshake with the specified sites.

Enter domains one per line in the format //www.example.com.

Learn more.

HTML Lazy Load Selectors¶

Empty List

You can lazy load HTML content by its selector, generally an ID or class. List selectors one per line.

<span id="example">
<p>This is content I wish to lazy load.</p>
</span>

HTML Keep Comments¶

Empty List

HTML comments are discarded when you minify HTML. This setting allows you to keep comments that match patterns in the list. Enter one pattern per line.

Remove Query Strings¶

OFF

This setting strips query strings from static resources. Browsers and proxy servers may not cache static resources with query strings. Removing the strings allows the resources to be cached, resulting in faster page loads.

Load Google Fonts Asynchronously¶

OFF

You may not want to enable asynchronous loading for all of your CSS, but you may want to enable it for Google Fonts. If enabled, this option loads Google Fonts asynchronously without loading the other CSS that way. It also implements a preconnect to Google.

Remove Google Fonts¶

OFF

This option removes all Google Fonts from your site. Be sure to test it. Unless you have suitable replacement fonts stored locally, your site's style could change dramatically.

Remove WordPress Emoji¶

OFF

If enabled, this setting removes the extra JavaScript file used to add emoji support in older browsers. Visitors using modern browsers with native emoji support will not notice a difference.

Remove Noscript Tags¶

OFF

When you use Lazy Load iframes, Lazy Load Images, or Load CSS Asynchronously, LiteSpeed adds <noscript> tags. These tags support older browsers that do not support JavaScript and modern browsers where JS is turned off for security reasons. They tell the browser what to do if it cannot run the associated script. However, these tags take up space.

When this option is enabled, LiteSpeed-added <noscript> tags are removed, reducing page size but also reducing compatibility with browsers that have no functioning JavaScript. You will need to decide whether the efficiency gains are worth the compatibility trade-off.

Media Settings tab¶

Learn more about Lazy Load on our blog.

Preload Featured Image¶

This feature has been removed. We now automatically preload all Viewport Images as part of our VPI service.

Lazy Load Images¶

OFF

When enabled, this setting loads images only when they are visible in the viewport. The remaining images load as they scroll into view. When you turn this option ON, the WordPress core Lazy Load feature is automatically disabled.

This feature can make images appear suddenly. You can improve the effect with CSS by adding a fade-in or another effect to the loading images.

/* Part 1: Before lazy load */
img[data-lazyloaded] {
    opacity: 0;
}

/* Part 2: Upon lazy load */
img.litespeed-loaded {
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

The key is the data-lazyloaded attribute selector, which targets elements based on their attributes.

Before an image is lazy loaded, it has the data="lazyloaded" attribute, which enables Part 1 of the CSS code.

Once the image is loaded, that attribute goes away, Part 1 no longer applies, and Part 2 takes effect. This CSS example makes the image fade in, but you can replace it with any CSS effect you wish.

Basic Image Placeholder¶

empty string

When Lazy Load Images is enabled, a gray box appears as a placeholder until an image loads. If you prefer a more creative placeholder, you can specify your own base64 image. Enter it here or use the LITESPEED_PLACEHOLDER constant in your wp-config.php file. If both are defined, this setting takes precedence over the wp-config.php constant.

Responsive Placeholder¶

OFF

Responsive image placeholders can be used when the images have width and height attributes. Placeholders use the same dimensions as the images, which helps reduce layout shifts.

Responsive Placeholder SVG¶

<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}" viewBox="0 0 {width} {height}"><rect width="100%" height="100%" fill="{color}"/></svg>

If you generate a placeholder locally, you can specify an SVG to use. It will be converted to a base64 placeholder on the fly.

Responsive Placeholder Color¶

#cfd4db

Use the color picker to generate responsive placeholders in any color you like.

LQIP Cloud Generator¶

OFF

Low Quality Image Placeholder (LQIP) is a QUIC.cloud service that generates a unique placeholder: a blurred, minified version of the original high-quality image.

LQIP Quality¶

4

Specify the quality of your generated LQIPs. Larger numbers produce higher-resolution, better-quality placeholders, but also larger files that increase page size. Valid values range from 1 to 20.

LQIP Minimum Dimensions¶

150 x 150

For relatively small images, generating LQIPs may be unnecessary. Specify the dimensions, in pixels, of the smallest files you want to send for LQIP requests. Images are excluded from LQIP only if both dimensions are smaller than these values. If either dimension exceeds the limit, the image will be sent. Valid dimensions are greater than 10 pixels and less than 800.

Generate LQIP In Background¶

ON

LQIPs must be generated the first time a page is visited. If this setting is ON, generation runs in the background via a cron-based queue. The Responsive Placeholder settings are used until generation is complete.

If this setting is OFF, placeholders are generated while the visitor waits, which may slow down the first visitor's page load.

If images are in the queue, a Clear LQIP Queue button appears. You can press it to remove all items from the queue. However, removed items will not be processed by the LQIP service unless they are added back to the queue.

Lazy Load iframes¶

OFF

This setting works like Lazy Load Images, but applies to iframes instead of images.

Add Missing Sizes¶

OFF

Setting explicit width and height values for images is good practice. It reduces layout shifts, improving user experience and page scores. When enabled, this option allows LSCache to add missing width and height attributes to images automatically.

WordPress Image Quality Control¶

82

Use this option to set WordPress's image compression quality. Any number smaller than 100 is accepted, but lower values produce more noticeable compression.

Auto Rescale Original Images¶

OFF

This option helps save disk space and bandwidth by scaling original images down automatically. The default scaled-size threshold is 2560px, but you can adjust it using the WordPress API filter big_image_size_threshold described in the WordPress documentation.

VPI tab¶

VPI stands for “Viewport Images.” This service excludes above-the-fold images from lazy loading. For each post URL submitted to the queue, QUIC.cloud detects which images would be visible in the viewport when the post loads. These are called Viewport Images (or VPI), and LiteSpeed Cache loads them with the page. VPI images are not lazy loaded, but all other below-the-fold images for the URL are.

Viewport Images¶

OFF

Turn this setting ON to use the QUIC.cloud VPI service. Viewport Images are generated automatically in the background on QUIC.cloud servers, so they do not affect your servers.

Use the LiteSpeed Options metabox to override detected VPIs for individual posts.

Viewport Images are preloaded, giving them priority so they are among the first assets to load during a page's life cycle.

Viewport Images Cron¶

OFF

When Viewport Images is enabled and this setting is ON, Viewport Images are generated in the background via a cron-based queue. If it is OFF, you can manually submit URLs waiting to be processed.

A Run VPI Queue Manually button appears when URLs are waiting in the queue. Gray URLs have not yet been submitted to QUIC.cloud; green URLs have been submitted for processing.

Media Excludes tab¶

Lazy Load Image Excludes¶

empty string

Some images need to load immediately, regardless of where they appear on the screen. You may want to exclude images visible in both the initial mobile and desktop viewports, such as your site logo, to avoid layout shifts. Enter one item per line. You may use a full URI or a partial string. Partial strings are useful when an entire directory of images must load immediately. Do not use wildcards.

Lazy Load Image Class Name Excludes¶

empty string

Images containing these class names will not be lazy loaded. Enter one full or partial class name per line.

Lazy Load Image Parent Class Name Excludes¶

empty string

Images whose parents contain these class names will not be lazy loaded. Enter one full or partial class name per line.

Lazy Load iframe Class Name Excludes¶

empty string

iframes containing these class names will not be lazy loaded. Enter one full or partial class name per line.

Lazy Load iframe Parent Class Name Excludes¶

empty string

iframes whose parents contain these class names will not be lazy loaded. Enter one full or partial class name per line.

Lazy Load URI Excludes¶

empty string

Images and iframes on the pages listed here will not be lazy loaded. Enter one URI per line. Partial strings may be used. URIs are compared with the REQUEST_URI server variable. To indicate the beginning of a URI, add ^ to the beginning of the string. To require an exact match, add $ to the end of the string.

LQIP Excludes¶

empty string

Images listed here will not be included when generating Low Quality Image Placeholders. Enter images one per line; partial strings are allowed.

If the LQIP service encounters an error while processing an image, that image is automatically added to this list and excluded from future LQIP processing.

Localization tab¶

Gravatar Cache¶

OFF

Gravatars can be cached locally if this setting is ON.

Gravatar Cache Cron¶

OFF

Turn this setting ON to refresh the Gravatar cache using a cron job.

Gravatar Cache TTL¶

604800

This setting specifies how long, in seconds, Gravatars are cached. Any value larger than 3600 is acceptable.

Localize Resources¶

OFF

You may want to use this setting if a page-scoring site recommends optimizing JavaScript or other resources hosted on domains such as Google or Facebook. You cannot control or optimize those resources directly. Set Localize Resources to ON to copy the resources to your local system, where they can be optimized as needed.

Use the Localization Files field to specify which resources to localize.

Localization Files¶

This setting lets you use local copies of external JavaScript resources. Enter a URL to localize it. A list of Recommended URLs is provided by default, but you can choose other resources.

If Localize Resources is set to ON, resources listed here are copied and replaced with a local URL. This works only with HTTPS URLs, not HTTP URLs.

Enter URLs one per line.

Comments are supported. Start a line with # to make it a comment.

# example sites
https://www.example.com/a.js
https://static.example.com/b.js
https://cdn.example.org/a.js

Tuning tab¶

Tuning tab¶

JS Delayed Includes¶

empty string

List JavaScript filenames or partial strings for inline JS code, one per line, to ensure the listed JS is always delayed.

JS Excludes¶

empty string

If you enabled minification, combination, or push for JavaScript in the JS Settings tab, you can exclude JS here. List any JS files to exclude from optimization, one per line. You may enter full URLs or partial strings. Wildcards are not needed.

JS Deferred/Delayed Excludes¶

empty list

If Load JS Deferred is enabled in the JS Settings tab, you may want to exclude some JavaScript files from being deferred or delayed. List them here, one per line. You may enter a full URI or partial strings to match; do not use wildcards.

Guest Mode JS Excludes¶

empty list

You may want to exclude some JavaScript files or inline JS code from Guest Mode. List them here, one per line. You may enter a full URI or partial strings to match; do not use wildcards.

URI Excludes¶

empty string

To exclude pages from optimization, enter a full path or partial string here.

Optimize for Guest Only¶

ON

When set to ON, CSS and JavaScript optimizations are performed only for non-logged-in visitors.

When set to OFF, optimizations are performed for all visitors. Each user role will have its own set of generated CSS and JavaScript.

Role Excludes¶

unchecked

You may want to exclude some user roles from optimization. For example, if you are an admin testing new functionality, you may want to exclude your administrator role until testing is complete.

Tuning CSS tab¶

CSS Excludes¶

empty string

If you enabled minification, combination, or push for CSS in the CSS Settings tab, you can exclude CSS here. List any CSS files to exclude from optimization, one per line. You may enter full URLs or partial strings. Wildcards are not needed.

UCSS Inline Excluded Files¶

(Formerly UCSS File Excludes and Inline)

empty string

In some cases, you may prefer to exclude a CSS file from the UCSS calculation and instead add its full contents inline with the HTML. List CSS files here, one per line. Full URLs and partial strings are accepted.

UCSS Selector Allowlist¶

empty string

There may be CSS selectors, generally IDs or classes, that you always want included in the calculated Unique CSS. List the selectors here, one per line. They will be combined with our predefined list, available here on GitHub. Inspect the content if you need help identifying the appropriate selectors.

This setting is specifically for selectors that appear in the CSS. Entering parent IDs or classes from the HTML will not work.

Make sure you reference each CSS selector exactly as it appears in the CSS file.

<div class="parent-class">
    <p class="child-class">I am a child</p>
</div>

.child-class {
    font-size: .75em;
}

Be careful with pseudo-classes such as :hover, :active, and :visited. The UCSS engine ignores pseudo-class selectors in CSS content, except for :not. To include a pseudo-class selector in the UCSS result, add the main selector to UCSS Allowlist without the pseudo-class or colon (:).

.example-class {
    font-weight: normal;
}
.example-class:hover {
    font-weight: bold;
}

UCSS URI Excludes¶

empty string

To exclude pages from UCSS optimization, enter a full path or partial string here.

Separate CCSS Cache Post Types¶

page

By default, one set of Critical CSS is saved for each post type: Posts, Pages, and Products (if you have a custom post type called “Product”). If every item in a post type has different formatting, one set of Critical CSS is not enough. Add that post type to the box to generate Critical CSS for each item of that type.

Separate CCSS Cache URIs¶

empty string

If some pages do not follow the same formatting rules as the rest of their post type, enter their URIs or partial URIs here. Separate Critical CSS files will be generated for paths containing these strings. URIs are compared with the REQUEST_URI server variable. To indicate the beginning of a URI, add ^ to the beginning of the string. To require an exact match, add $ to the end of the string.

CCSS Selector Allowlist¶

empty string

There may be CSS selectors, generally IDs or classes, that you always want included in the calculated Critical CSS. List them here, one per line. They will be combined with our predefined list, available here on GitHub. Inspect the content if you need help identifying the appropriate selectors.

This setting is specifically for selectors that appear in the CSS. Entering parent IDs or classes from the HTML will not work.

Make sure you reference each CSS selector exactly as it appears in the CSS file. For examples, see UCSS Selector Allowlist; they also apply to this setting.

Critical CSS Rules¶

empty string

When Load CSS Asynchronously is enabled in the CSS Settings tab, Critical CSS is generated automatically. You may want to identify additional definitions that must load first to style above-the-fold content properly. Enter those rules here as plain CSS, exactly as they appear in your stylesheet. They will be appended to the generated CSS.