Optimizing CSS and the Page¶

QUIC.cloud provides page optimization services to LiteSpeed Cache for WordPress. These services include Critical CSS (CCSS), Unique CSS (UCSS), and Viewport Images (VPI). The first two services represent different ways to improve the efficiency of your CSS, and help your pages load noticeably faster, while VPI improves the appearance of your optimized page:

• Critical CSS is the collection of styles that are required in order to properly display above-the-fold content. These styles are inserted inline into the HTML code, and are processed at the same time as the HTML, allowing you to load CSS asynchronously without the risk of flashing unformatted content.
• Unique CSS is a single streamlined CSS file that combines all of the necessary CSS definitions for each page of your site. The combined file will potentially be unique for each page, because it will only include the style definitions that are needed to render that specific page.
• Viewport Images is a list of images that appear above the fold on a standard screen for a particular page. The LiteSpeed Cache plugin uses this list to exclude the first screenful of images from lazy load, thus displaying original imagery and keeping the space free of placeholders.

You don't need to have a QUIC.cloud account to use Page Optimizations, but you do need an API key, which you can get by pairing WordPress and QUIC.cloud. You should only need to do this once, so if you've already paired WordPress and QUIC.cloud for some other service, you should be good to go.

CCSS, UCSS, and VPI share the same pool of quota. You get a free amount every month, and may purchase more when you run out, if you wish.

Configuring and Using Page Optimization¶

Requests for CCSS, UCSS, and VPI calculations are sent to QUIC.cloud in batches. The CSS files or image lists are generated using QUIC.cloud's own service nodes so there is no impact on your server performance. Finally, QUIC.cloud notifies WordPress to pick up the new CSS files or image lists for use on your site.

Because Page Optimizations are configured and controlled in the LiteSpeed plugin, we have only provided an overview here. Full documentation of the available WordPress plugin settings can be found in our LSCWP documentation:

• Critical CSS: see Load CSS Asynchronously
• Unique CSS: see CSS Combine
• Viewport Images: see VPI

The QUIC.cloud Page Optimization Dashboard¶

If you have a QUIC.cloud account, you can monitor Page Optimization requests and purchase more quota from your QUIC.cloud Dashboard.

Visit your QUIC.cloud Dashboard, select the domain you wish to use, and then select Page Optimization.

The first section will show an overview of the most recently processed page Optimization requests and an indicator of the online service's current status.

Scroll down to see usage information for the current month. You can see how many requests you are entitled to, how many you have already used, and how many you have remaining.

Below that is a reminder of the QUIC.cloud tiers, and how many monthly free requests you are allowed under each tier. It also displays the tier that QUIC.cloud has detected for your domain. If you feel this tier had been incorrectly detected, please see Fixing an Incorrect Free Quota Tier.

Scroll down some more, and you will see any monthly subscriptions that are available for you to purchase. These are handy if you frequently have a lot of optimization requests to process.

Below the subscriptions is a pay-as-you-go option. Use this to increase your quota on an ad-hoc basis. You can manage this manually, or enable auto-refill to top up your quota whenever you are running low.

Please see Online Services Pricing to learn more about paying for additional quota.