WP Rocket is one of the most popular plugin to increase your WordPress website speed. It has various settings, and by tweaking them, you can increase the speed of your website and get a higher score on Google Page Insights.

In this article, we are going to discuss on File Optimization tab. It allows you to optimize various files on your WordPress website to enhance its performance.

Let's explore its key components:

CSS Files

1. Minify CSS files:
   It is the process of removing unnecessary characters, such as white spaces, comments, and line breaks, from CSS files. The user has options to enable or disable minification for each file type individually. By minifying these files, you can significantly reduce their size, leading to faster downloads and improved page load times.

   Note - Minification can sometimes break your website. If it happens, you can deactivate it back again and minify each file type manually.

   Lets see how does the CSS changes after minification:

2. 

   Combine CSS Files:

   This option allows you to merge multiple CSS files into a single file, minimizing the number of requests made to the server.

   By combining files, you reduce the overhead of establishing connections and requesting individual files, resulting in faster loading times. However, it's important to note that enabling this option may require occasional testing and troubleshooting to ensure compatibility with your specific website setup and theme or plugins.

3. Optimize CSS delivery:

   This option eliminates the render-blocking CSS on your website. It can be achieved by 2 methods:

   i. Remove Unused CSS -
   This method removes any unused CSS on your website. Selecting this method is recommended for optimal performance.

   ii. Load CSS/JS Asynchronously -
   This option loads CSS asynchronously, which means they are downloaded and processed simultaneously, without blocking other elements on the page.

   Note - Only one of the above methods can be used at a time.

Javascript Files

1. Minify Javascript Files:
   This option is very similar to the minify CSS option we discussed above. Enabling this removes unnecessary characters, such as white spaces, comments, and line breaks, from Javascript files.

2. Combine Javascript files:
   Again, this option is similar to the combine CSS files as explained above. The only difference is that here we combine Javascript files instead of CSS.

3. Load JavaScript deferred:
   When the Load JavaScript deferred feature is enabled, the browser will render the main content of the page and load the scripts later on. By deferring JavaScript, you ensure that critical resources, such as images and text, load first, improving the perceived speed and interactivity of your website.

   Here is an intuitive difference between deferred and non-deferred. By using Javascript defer the script executes only after the critical resources have been loaded.

4. 

   Delay JavaScript execution:
   Delay JavaScript execution is the most powerful JavaScript optimization WP Rocket has. It delays the execution of scripts to prioritize the rendering of the site. You can exclude specific files or URLs from file optimization that ensures compatibility with certain plugins or scripts that may require unmodified files. The user can specify exceptions and fine-tune the settings to meet his website's requirement.

The File Optimization tab in WP Rocket is a very useful feature for optimizing your WordPress website's files and accelerating its speed. Through minification, file combining, asynchronous loading, deferred JavaScript, and advanced customization, you can achieve remarkable improvements in loading times and overall website performance. This will result in a faster and more enjoyable browsing experience for your visitors and also maximize your chances of securing higher scores on Google Page Insights.

As a reference, here are the performance improvements in our dummy website before and after File Optimization -

Before File Optimization:

After File Optimization: