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 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 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 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 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.
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.
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.
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.
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.
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.
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.
Miscellaneous CSS options are additional features in RapidLoad that optimize website performance.
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.
Some themes and plugins globally load full animation libraries that are mostly unused. Enable this option to find and remove unused animation keyframes.
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
This option will optimize the inline CSS files and remove Unused CSS styles from them.
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.
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.
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…
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.
Choose from a list of available content types to target, including taxonomies and custom post types.
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.
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
Sometimes you may need to exclude entire CSS files from RapidLoad optimization. RapidLoad makes this easy through the use of file exclusions.