How to Use 'CSS' Application?

Modified on Tue, 6 May at 2:51 PM

The CSS application lets you optimise your style sheets quickly and efficiently. You can reduce the size of your CSS files and group them together, speeding up the loading of your site's pages.

Why is it important to optimise CSS files?

CSS files are essential on your website, but their number and size can negatively affect page loading speed and therefore the user experience. All the more so as these files are often loaded first in the head of the pages and, unlike other resources, they block the rendering of the page.

Optimising these files is therefore crucial, whatever the browsing context (network quality, computer or mobile model and size, browser, geographical area, etc.).

Find out more about optimising CSS files to improve the performance of your web pages.

Fasterize optimises your CSS files by taking action on two criteria:

the number of CSS files
The size of CSS files

How do I use the CSS application?

CSS minimisation to reduce file size

CSS minification consists of reducing the size of CSS files by removing spaces, comments and other non-essential characters. Fasterize performs this minification by default, but it is possible to exclude certain files from minification via the configurations.

Bundling to reduce the number of files

The Bundle CSS option lets you group several CSS files into a single file, reducing the number of HTTP requests needed to load a web page.

Bundling is currently limited to a package of 4 files. Note that the new file generated retains the URLs of the original files as comments.

Move On Top

As CSS is necessary for the rendering of the page, Fasterize uses the Move On Top option to move style sheet file declarations to the top of the HTML page. This encourages faster loading of style sheets and a more stable rendering of the page, avoiding any shifts that could degrade the CLS (Cumulative Layout Shift).

Webperf advantage

Optimising CSS files will improve your site's loading speed metrics (FCP, LCP, Speed Index) and reduce CLS (Cumulative Layout Shift).