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

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.

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 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

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

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.

Media Settings Tab

Learn more about Lazy Load on our blog.

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.

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

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).

Discussion Settings 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.

Tuning Settings 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).

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: May 28, 2020