Page Optimization

Warning

Please test these options thoroughly before enabling them on your production site! Be sure to Purge All after changing these settings.

CSS Settings Tab

!LSCWP Page Optimization Section CSS Settings Tab

CSS Minify

OFF

Extra white space characters, new line 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.

Unique CSS

OFF

Enable this option to get one single combined CSS file for each URI, regardless of the value stored in Max Combined File Size.

This option will be most useful when combined with the new Unused CSS service, which is coming soon in a future release.

CSS HTTP/2 Push

OFF

CSS will be sent to the browser before it is requested.

Load CSS Asynchronously

OFF

This option defaults to OFF. When it is OFF, web pages load the normal way, where the browser loads the CSS from the HTML header before continuing on to display the content in the HTML body.

When you turn this option ON, CSS and HTML will be loaded at the same time. The page can load more quickly this way, but it may initially load without formatting. To avoid that problem, you will want to generate the Critical CSS and load that first. That is what the next setting is for.

Generate Critical CSS

ON

This option defaults to ON, but it only works if Load CSS Asynchronously is also ON. When both settings are enabled, the Critical CSS is generated by QUIC.cloud’s CCSS service, and then sent back to LSCache.

Note

Some themes already generate Critical CSS for you. In that case, you can turn this option OFF.

Once the Critical CSS has been generated, it will be loaded first, and then the rest of the CSS will be loaded asynchronously with the HTML. The page will no longer load without formatting.

Here's How it Works:

  1. A Visitor sends a request to the Client Server
  2. If there's no Critical CSS, the Client Server will send a Critical CSS request to QUIC.cloud's remote Critical CSS (or, CCSS) Server
  3. The CCSS server will retrieve content+assets from the Client Server, and then generate Critical CSS
  4. The CCSS Server then sends the generated Critical CSS back to the Client Server
  5. The Client Server serves the content with the Critical CSS to the Visitor

There is one small issue: when your site has not yet had the Critical CSS generated (or after a Purge All), the first visitor to request a page will need to wait for the above process to complete before the Critical CSS styles are available. That can take a few seconds that the visitor may not be willing to spend. This leads us to the next setting.

Generate Critical CSS in the Background

ON

Note

Load CSS Asynchronously must be set to ON for this feature to work.

This setting determines whether that calculation is done in the foreground, or in the background. This is ON by default. That means it is a background function, and uses a cron-based queue. When a page is viewed, if there is no critical CSS defined for that page type, a request is added to the queue, and the page continues loading without waiting.

This is what you may see when there are pages waiting in the queue:

!

If your cron is disabled (or you are impatient) you can press the Run Queue Manually button to hurry the process along.

If your queue is not empty, you will see a Clear CCSS Queue button. You may press this to remove all existing items from the queue. Just be aware that in doing so, these items will not be processed by the CCSS service until they are added back into the queue.

If Generate Critical CSS in the Background is set to OFF, then the critical CSS is generated in the foreground, immediately when the page is requested. This means that the visitor must wait for the critical CSS calculation before continuing to view the page. This has the potential to slow down page load.

Separate CCSS Cache Post Types

By default, one set of Critical CSS is saved for each post type. That is, CCSS for Posts, CCSS for Pages, CCSS for Products (if you have a custom post type called "Product"). If you have a post type where every item within that post type has different formatting, then one set of Critical CSS will not do. Add that post type to the box, and Critical CSS will be generated for each item of that post type.

Example

If every Page on the site has different formatting, enter page in the box. Separate critical CSS files will be stored for every individual post of type Page on the site.

Separate CCSS Cache URIs

If you have pages that don't follow the same formatting rules as the rest of their post type, you can list the URIs (or partial URIs) for those pages in this box. Separate critical CSS files will be generated for paths containing these strings. The URIs will be compared to the REQUEST_URI server variable. To indicate the beginning of a string, add ^ to the beginning of the string. To do an exact match, add $ to the end of the string.

String Matching Examples

Assume you have the following URIs:

  1. /recipes/baking/
  2. /recipes/baking/cakes
  3. /recipes/baking/brownies
  4. /popular/recipes/baking/

The string /recipes/baking/ will match all four URIs.

The string /recipes/baking/$ will match #1 (because $ indicates exact match).

The string ^/recipes/baking will match #1, #2, and #3 (because ^ indicates the beginning of the URI).

Inline CSS Async Lib

ON

This will inline the asynchronous CSS library to avoid render blocking.

Font Display Optimization

Default

Set this to append font-display to all @font-face rules before caching CSS to specify how fonts should be displayed while being downloaded.

JS Settings Tab

!LSCWP Page Optimization Section JS Settings Tab

JS Minify

OFF

Extra white space characters, new line 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 HTTP/2 Push

OFF

JS will be sent to the browser before it is requested.

Load JS Deferred

OFF

This setting takes all scripts and loads them only after the HTML is finished loading.

Load Inline JS

Default

This option allows you to choose when to load inline JS. Default does not modify inline JS. After DOM Ready may be used to increase JS compatibility and reduce JS error caused by using the recommended Deferred feature.

Exclude JQuery

ON

This setting excludes JQuery from all of the above optimization measures. It is recommended that this setting remain ON, particularly if you have inline JavaScript. If you are experiencing errors when JS Combine is enabled, turning this setting on should eliminate them.

Optimization Settings Tab

!LSCWP Page Optimization Section Optimize Tab

CSS/JS Cache TTL

604800

The minified and combined files are saved in /wp-content/litespeed/cssjs/. This setting specifies for how long. The minimum is 3600 seconds, but we recommend 604800. When a Purge All command is issued, the minified and combined CSS/JS are deleted as part of that purge.

HTML Minify

OFF

Extra white space characters, new line characters, and comments will be stripped from all HTML, if this option is enabled.

Inline CSS Minify

OFF

Extra white space characters, new line characters, and comments will be stripped from all inline CSS code on the HTML page, if this option is enabled.

Inline JS Minify

OFF

Extra white space characters, new line characters, and comments will be stripped from all inline JS code on the HTML page, if this option is enabled.

DNS Prefetch

Empty List

With this setting you may perform DNS resolution for the listed domain(s) before it is requested. By prefetching DNS results, latency can be reduced significantly for your visitors as they click external links, particularly on mobile networks. Domains should be entered 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 the page loading speed.

Remove Comments

OFF

By default, comments are preserved when JS and CSS are minified, but these comments can take up valuable space. Enable this option to strip comments from minified files and make them more efficient to transmit.

Remove Query Strings

OFF

This setting strips the query string from static resources. Static resources with query strings may not be cached by browsers and proxy servers. Removing the strings allows them to be cached, which translates into a faster page load.

Load Google Fonts Asynchronously

OFF

You may not wish to enable asynchronous loading of all of your CSS, but maybe you do want it for just the Google Fonts. If enabled, this option will allow you to load Google Fonts asynchronously without also loading the other CSS that way. Additionally, this option adds a preconnect to Google so that the fonts may be downloaded more quickly.

Remove Google Fonts

OFF

This options removes all Google fonts from your site. Be sure to test this. Unless you have suitable replacement fonts stored locally, the style of your site could change dramatically.

Remove WordPress Emoji

OFF

If enabled, this setting removes the extra JavaScript file that is used to add support for emojis in older browsers. Visitors who use modern browsers that have their own native emoji support will not notice a difference.

Remove Noscript Tags

OFF

<noscript> tags are used for compatibility with older browsers that don't support JavaScript, or modern browsers where JS is turned off for security reasons. They give the browser intructions for what to do if it can't run the associated script. However, these tags do take up space.

With this option enabled, <noscript> tags are removed, resulting in a smaller page size, but less compatibility for browsers with no functioning JavaScript. You will need to decide for yourself whether the efficiency gains are worth the compatibility losses.

Media Settings Tab

Learn more about Lazy Load on our blog.

!LSCWP Page Optimization Section Media Tab

Lazy Load Images

OFF

When enabled, this setting only loads the images that are visible in the viewport. The remaining images are only loaded as necessary when they scroll into view.

As useful as this ability is, it can be inelegant to have the images just appear suddenly. You can improve upon this with CSS3, and give the loading images a fade-in (or other) effect.

Note

If the browser does not support CSS3, the following code will be ignored.

Example

The following CSS can be used to create a "fade-in" effect for your lazy-loaded 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 in the data-lazyloaded attribute selector, which is a method for targeting elements based on their given attributes.

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

Once the image is loaded, that attribute goes away, PART 1 is no longer relevant, and PART 2 of the CSS code goes into effect. This example CSS causes the image to fade in, but you can replace the code with any CSS effect you wish.

Basic Image Placeholder

empty string

When Lazy Load Images is enabled, a gray box is displayed as a placeholder until an image can be loaded. If you'd prefer something more creative, you can specify your own base64 image. You can list the image here, or you can 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 in cases where the width and height attributes for the images are set. Placeholders are generated with the same dimensions as the images, which helps to reduce layout reshuffling.

Responsive Placeholder SVG

If generating a placeholder locally, you can specify an SVG to be used, and it will be converted to a base64 placeholder on-the-fly.

Note

Variables {width} and {height} will be replaced with the corresponding image properties. Variable {color} will be replaced with the configured background color.

Responsive Placeholder Color

#cfd4db

Responsive placeholders can be generated in any color you like. Use the color picker to choose.

LQIP Cloud Generator

OFF

Low Quality Image Placeholder (LQIP) is a QUIC.cloud service that lets you generate a unique placeholder, which is a blurred and minified version of the original high-quality image to be loaded.

LQIP Quality

4

Specify the quality of your generated LQIPs. Larger numbers will generate higher resolution, better quality placeholders, but will result in larger files, which will increase page size. Value range: 1 - 20.

Generate LQIP In Background

ON

The first time a page is visted, the LQIPs must be generated. If this setting is ON, the generation will be done in the background via a cron-based queue. The settings for Responsive Placeholder will be honored until the generation is complete.

If this setting is OFF, the placeholders will be generated while the visitor waits. This may slow down page load for that first visitor.

If you have images in the queue, you will see a Clear LQIP Queue button. You may press this to remove all existing items from the queue. Just be aware that in doing so, these items will not be processed by the LQIP service until they are added back into the queue.

Lazy Load iframes

OFF

This setting behaves exactly as Lazy Load Images, only for iframes instead of images.

Inline Lazy Load Images Library

OFF

Lazy Load requires a JavaScript image library in order to work. When this setting is OFF, the JS library is accessed via a separate request. When this setting is ON, the JS library is included inline in the HTML.

Turning this option ON can improve your speed score in services like Pingdom, GTmetrix and PageSpeed, however it also makes the size of your page bigger.

Media Excludes Tab

!LSCWP Page Optimization Section Media Excludes Tab

Lazy Load Image Excludes

empty string

Sometimes there are images that you want to load immediately no matter where they appear on the screen. Enter them here, one per line. You may use the full URI or a partial string. Partial strings come in handy if you have an entire directory of images that must be immediately loaded. Don't use wildcards here.

Lazy Load Image Class Name Excludes

empty string

Images containing these class names will not be lazy loaded. Both full and partial strings can be used. One per line.

Lazy Load Image Parent Class Name Excludes

empty string

Images whose parents contain these class names will not be lazy loaded. Both full and partial strings can be used. One per line.

Lazy Load iframe Class Name Excludes

empty string

iframes containing these class names will not be lazy loaded. Both full and partial strings can be used. One per line.

Lazy Load iframe Parent Class Name Excludes

empty string

iframes whose parents contain these class names will not be lazy loaded. Both full and partial strings can be used. One per line.

Lazy Load URI Excludes

empty string

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

String Matching Examples

Assume you have the following URIs:

  1. /recipes/baking/
  2. /recipes/baking/cakes
  3. /recipes/baking/brownies
  4. /popular/recipes/baking/

The string /recipes/baking/ will match all four URIs.

The string /recipes/baking/$ will match #1 (because $ indicates exact match).

The string ^/recipes/baking will match #1, #2, and #3 (because ^ indicates the beginning of the URI).

LQIP Excludes

empty string

Images listed here will not be included when generating Low Quality Image Placeholders. Images can be added one per line, and partial strings are allowed.

If the LQIP service encounters an error processing an image, it will automatically be added to this list and ignored by LQIP in the future.

Localization Settings Tab

(Formerly Discussion Settings)

!LSCWP Page Optimization Section Discussion Tab

Gravatar Cache

OFF

Gravatars can be cached locally, if this is set to ON.

Gravatar Cache Cron

OFF

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

Gravatar Cache TTL

604800

This setting specifies how long (in seconds) Gravatars should be cached. Any value larger than 3600 is acceptable.

Localize Resources

OFF

You might want to do this if a page score site is suggesting optimizations to JavaScript and other resources that are hosted on domains such as Google or Facebook. You have no control over such resources, and no ability to optimize them. Set Localize Resources to ON, and the resources will be copied to your local system, where they may be optimized as necessary.

Use the Localization Domains field to specify which domains' resources you would like to localize.

Localization Domains

This option allows you to use local copies of external resources. Enter a domain, and all of that domain's resources that are of the specified format and are used by your site will be localized. A list of Recommended URLs is provided by default, but you can choose whatever domains you wish.

If Localize Resources is set to ON, then resources from the domains listed here will be copied and replaced with a local URL. This only works on HTTPS URLs, and not HTTP.

URLs are listed like this, one per line: file format (optional) + URL, separated by a space. If a format is not specified, JS is assumed.

Note

Currently only JS is supported, but FONT will be added in a future version.

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

Example

# example sites
https://www.example1.com
JS https://www.example2.com
JS https://www.example3.com/js

Tuning Settings Tab

!LSCWP Page Optimization Section Tuning Tab

Combined CSS Priority

OFF

Normally, combined CSS is loaded after external CSS files. This is because combined local CSS is more likely to have customizations that need to be loaded after the base CSS. Enable this option if you have reason to load combined CSS before other CSS files.

CSS Excludes

empty string

If you enabled minification, combination or push for CSS in the CSS Settings tab, you may exclude some CSS here. Use this space to list any CSS files (one per line) you would like excluded from the optimization functions. You may enter full URLs or a partial string. There's no need to use wildcards in partial strings.

Combined JS Priority

OFF

Normally, combined JavaScript is loaded after external JavaScript files. Enable this option if you have reason to load combined JavaScript before other JS files.

JS Excludes

empty string

If you enabled minification, combination or push for JavaScript in the JS Settings tab, you may exclude some JS here. Use this space to list any JS files (one per line) you would like excluded from the optimization functions. You may enter full URLs or a partial string. There's no need to use wildcards in partial strings.

Max Combined File Size

2MB

A larger file size results in fewer combined files needing to be generated. This is good for your page score, but beware: if a combined file is too large, it will cause heavy memory usage. We consider 2MB to be a good starting point. Adjust it up or down to meet your site's needs.

Critical CSS Rules

empty string

When Load CSS Asynchronously is enabled in the CSS Settings tab, critical CSS is generated automatically. You may wish to single out a few additional definitions that must be loaded first in order to properly style above-the-fold content. Enter those rules here in plain CSS, just as they appear in your stylesheet. They will be appended to the generated CSS.

JS Deferred Excludes

empty list

If Load JS Deferred is enabled in the JS Settings tab, there may be some JavaScript files you do not want to be deferred. List them here, one per line. You may list the full URI or partial strings to be matched (no wildcards).

Inline JS Deferred Excludes

empty string

If you have Load Inline JS set to Deferred, but there are some elements you would prefer not to defer, you can list them here.

List one code fragment per line. Any inline JS code that includes the listed fragments will not be deferred.

URI Excludes

empty string

If there are pages you would like to exclude from optimization, you may list them here. You can use a full path, or a partial string.

Role Excludes

unchecked

There may be user roles that you wish to exclude from any sort of optimization. For example, if you are an admin, testing new functionality, you may want to exclude your administrator role from optimization until your testing is through.


Last update: August 27, 2020