CSS Delivery

CSS settings

Minify

Minify CSS optimizes code by removing whitespace, comments, and formatting, thereby reducing file size for faster loading. It improves website speed, enhances user experience, and boosts SEO without altering the functionality

Inline small CSS

Inline Small CSS Files are used to embed small CSS files directly into the HTML document, enhancing website performance by reducing HTTP requests and improving perceived load time. However, it is recommended to use this technique only for CSS files that are under 5KB in size.

Critical CSS

Critical CSS is the portion of CSS required to render the above-the-fold content of a web page. By prioritizing the CSS that’s needed to render the initial visible portion of your website, Critical CSS can dramatically improve page speed metrics such as First Paint, First Contentful Paint, First Meaningful Paint, and Speed Index scores.

The impact of Critical CSS on website performance is noteworthy. By reducing render-blocking resources, the website's initial load time will increase, by improving user experience and reducing bounce rates. Moreover, faster page speeds can lead to improved SEO rankings, driving more traffic to your website.

RapidLoad's Critical CSS feature works by analyzing your website's CSS code and generating a Critical CSS stylesheet that contains only the essential CSS for above-the-fold content. The Critical CSS stylesheet is then added to the page's header, allowing the browser to load it first and swiftly render the above-the-fold content quickly.

In conclusion, Critical CSS is an essential optimization technique that can affect page speed metrics and overall website performance positively. With RapidLoad's Critical CSS feature, website owners can optimize their website's performance quickly and easily, providing an improved user experience and better search engine rankings.

Mobile Critical CSS

Mobile Critical CSS refers to the subset of Critical CSS that is specifically optimized for mobile devices. With the increasing number of users browsing the internet on their mobile devices, optimizing websites for mobile performance has become increasingly crucial.

Above-the-fold CSS

Above-the-fold CSS is a subset of Critical CSS that targets the essential styles required to render the content above the fold, this refers to the visible portion of a web page without scrolling. The objective of Above-the-fold CSS is to optimize page load times by prioritizing the essential styles needed for the initial rendering of above-the-fold content.

To utilize Above-the-fold CSS, simply add the CSS styles in the Above-the-fold CSS input box, and they will be appended to the critical CSS file that is generated.

Remove Critical CSS on User Interaction

The Critical CSS files which are optimized for the above-the-fold contents are served in the header. If this option is enabled the served file will be removed from the header. This goes for both mobile and desktop versions.

Remove unused CSS

Removing Unused CSS is the process of eliminating CSS code that is not being used by the website. Over time, a website's CSS file can become bloated with unused styles, resulting in slower page load times and increased server requests.

Remove Unused CSS settings

It's important to note that care should be taken when removing Unused CSS, as it can impact the layout and functionality of the website. It is recommended to thoroughly test any changes before deploying them to a live website to ensure that there are no unexpected consequences.

Force Include selectors ( Formerly known as Sitewide Safelist )

These are the list of CSS selectors (classes, IDs, or both) that RapidLoad will ignore when optimizing your site’s CSS. Selectors on the safelist will not be removed during the optimization process.

Force Exclude selectors ( Formerly known as Sitewide Blocklist )

These are the list of CSS selectors (classes, IDs, or both) that RapidLoad will forcibly remove when optimizing your site’s CSS. Selectors on the blocklist will be removed during optimization.

Selector packs ( Formerly known as Safelist packs )

RapidLoad has generated safelist packs specifically designed for plugins that may have conflicts. Please check the available safelist packs for any plugins currently installed on your website.

Misc options

Miscellaneous CSS options are additional features in RapidLoad that optimize website performance.

CSS Variables

Many themes, plugins, and external libraries define CSS variables. In some cases, unused CSS variables can be safely removed for additional savings in file size.

However, the impact may vary depending on the specific scenario. Therefore, we strongly recommend testing this option on a staging site before enabling it in a production environment to ensure compatibility and avoid unexpected issues.

CSS Animation Keyframes

Some themes and plugins globally load full animation libraries that are mostly unused. Enable this option to find and remove unused animation keyframes.

CSS @fontface rules

Many themes, plugins, and external libraries include @font-face rules for multiple fonts that go unused. In some cases, unused @font-face rules can be safely removed for additional savings in file size.

However, the impact may vary depending on the specific circumstances. Therefore, we strongly recommend testing this option on a staging site before enabling it in a production environment to ensure compatibility and avoid any unexpected issues

Inline CSS

This option will optimize the inline CSS files and remove Unused CSS styles from them.

Cache Busting

If your jobs are triggering "Clear the page cache" warnings, try enabling this option. With Cache Busting enabled, RapidLoad circumvents stale caches by appending random query strings while it crawls.

Group by pages

What is Group by pages?

By default, RapidLoad queues and optimizes each URL separately. While this is perfectly fine for smaller websites and necessary on custom pages, it can take quite a long time to discover and optimize every page on a larger website. It may even be redundant on sites that serve multiple pages using the same template (or set of templates) with multiple shared CSS files.

With Group by pages, you can now supply RapidLoad rules to discover and optimize multiple shared CSS files simultaneously. Optimized files are then applied to matching pages at the same time, significantly reducing the time to reach full site optimization.

Who Should Use Group by pages?

Anyone! However, users with large websites will see the biggest benefit in time and resources saved. This option will only be available for sites with 200+ pages. Ex:- Blogs, products, categories, tags and etc…

Configuring Group by pages

We strongly recommend users read and understand this section before adding and applying rules. Rules can introduce breaking changes if not configured correctly. If you have any additional questions about how rules function, please don’t hesitate to reach out to support for help.

How To Add A Rule

  • Click the +ADD button on the “Rules” table to open the new rule modal.
  • Select the Type from the dropdown menu. Manually enter the Base URL and Pattern.
  • Click Update Rule. A Job will be added to the queue and listed in the Rules table.

There are elements required to set up a rule: the rule type, a base URL, and URL pattern.

Rule Type

Choose from a list of available content types to target, including taxonomies and custom post types.

Base URL

The Base URL serves two roles:

  • It is the page RapidLoad crawls for CSS files
  • It defines the top level that RapidLoad starts from when looking for additional pages to apply the optimized CSS.

For example, with the Base URL in a rule set to https://www.example.com/category1/ , RapidLoad would optimize the CSS files on https://www.example.com/category1/ . When looking for additional pages to apply the optimized CSS, RapidLoad would only be permitted to look through pages below https://www.example.com/category1/ , such as:

A pattern is then used to further restrict which pages the new CSS is applied to.

Pattern

To further restrict which pages match your rule, you must enter a Pattern. The Pattern input accepts both relative and absolute paths, as well as glob characters and complex regular expressions. Examples

Type: is_product

Base URL: https://www.example.com/category1/product-a/

Pattern: * /category1/ *

Matches:



Type : is_page

Base URL: https://www.example.com/category2/product-d/

Pattern: * /category/ *

Matches:

Exclude CSS files

Sometimes you may need to exclude entire CSS files from RapidLoad optimization. RapidLoad makes this easy through the use of file exclusions.

Some valid file exclusions include
  • fontawesome.com
  • plugins/my-plugin/assets/*.css
  • /my-theme/*.css
  • my-specific-style.css
Table of Contents