CSS Optimization, Remove CSS (Minify, Defer, Extract)

Using CSS files that help the appearance of HTML elements on web pages in a more optimized way directly affects the performance of the web page. Better optimized and compressed saving file structures help web browsers analyze code faster and render the page faster. Improve your render time with CSS optimizations.

CSS Minify

There may be unnecessary comments, spaces, and indents on the CSS file. You can remove these unnecessary characters and allow web browsers to parse CSS files faster. This process is called CSS compression, minification, or minify.

body { 
  margin: 0; 
  padding: 0; 
  font-family: var(--bs-font-sans-serif); 
  font-size: 1rem; 
  font-weight: 400; 
  color: #212529; 
  background-color: #fff; 
  -webkit-text-size-adjust: 100%; 
  -webkit-tap-highlight-color: transparent; 
}

/* Page titles must have the same style attributes */

h1 {
  font-size: 20px;
  font-weight: 600;
  color: #f7f6f6;
  margin: 1rem 0;
  background-color: #000000;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  color: #f7f6f6;
  margin: 1rem 0;
  background-color: #000000;
}

Considerations for Minify Process

The above code structure is easy to read but creates more load;

• Spaces in the code structure, indentations under comments, and CSS properties increase the load size, these redundant characters can be deleted.
• The load size also increases when the CSS properties of elements with the same style are defined separately. Instead, elements can be defined together with CSS. For example, if h1 {font-size: 20px} is used as h1,h2 {font-size: 20px;} instead of h2 {font-size: 20px}, the load of the file will be lightened.
• background-color: #000000; instead of using it as background-color: #000; can be used in the form. (This may seem like a small difference, but in a style file with a lot of CSS code, this optimization makes a difference.)
• Using shorthand CSS instead of longhand CSS will also reduce the file size. With the use of longhand CSS, the same style property can be determined with less code written.

  /* Longhand CSS */ 
  .margin { 
    margin-top: 5px; 
    margin-right: 6px; 
    margin-bottom: 7px; 
    margin-left: 8px; 
  } 
  
  /* Shorthand CSS */ 
  .margin { margin: 5px 6px 7px 8px; }

Compressed CSS Code Structure

The compressed and optimized version of the above code structure is as follows; comments are deleted, spaces and indentations are cleaned.

body { margin: 0; padding: 0; font-family: var(--bs-font-sans-serif); font-size: 1rem; font-weight: 400; color: #212529; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } h1,h2 {font-size: 20px; font-weight: 600; color: #f7f6f6; margin: 1rem 0; background-color: #000;}

While writing CSS codes, it may not be easy for developers to write in the above view, an online minify tool can be used to compress the layout-written CSS codes.

Sizes of Compressed and Uncompressed CSS Files

There is a file size difference between the compressed and uncompressed CSS files containing the same style codes, and the browser takes longer to load the codes on the page due to the file size difference. The longer the load time, the slower the browser’s rendering time, which directly affects performance.

It can be viewed on the Network tab of the Google Inspect tool to examine the size and load time of the CSS files on the web page. This page can be viewed by selecting “Disable cache” (to prevent it from being loaded from the browser’s cache when the page is reloaded) and clicking the “CSS” button, filtering only the CSS codes.

PageSpeed ​​Insights Minify CSS Warning

Google’s PageSpeed ​​Insights performance measurement tool detects uncompressed CSS files on the website and gives a warning.

Publishing Critical CSS Inline

Internet browsers must download and parse the CSS files before displaying web pages to users. If the file size is large or the user’s internet connection is weak, the browser’s rendering process will be longer and the user’s display of the screen will be delayed.

What is Critical CSS?

Critical CSS is the CSS codes that make up the area where the user will see the page for the first time, by parsing the codes that make up the style of this area from the CSS file and directly loading the page within the page, users can be helped to create a page faster.

Write the critical CSS in the page code with the <style> tag inside the <head> tag, this method paints the page without any additional requests from the HTML page, the remaining CSS codes can be loaded asynchronously for the invisible parts of the page.

Critical CSS code structure loaded on the page

Eliminate Resource Blocking PageSpeed ​​Insights Rendering Warning

When the Google PageSpeed ​​Insights performance tool detects that critical CSS should be published within the page, it issues a “Remove render-blocking resources” warning. If the First Contentful Paint (FCP) metric is weak, try publishing the Critical CSS on the page and delaying the other CSS. (This also applies to JS files.)

Removing Unused CSS

Loading unused CSS properties on web pages creates unnecessary load size and adversely affects page performance. Removing unused codes on the page can prevent unnecessary resource consumption and gain performance.

Removing Unused Codes in the WordPress Panel

You can review the unnecessary and removed codes that slow down the page on WordPress from the Remove Unused CSS and JS on the WordPress page.

Source:

https://web.dev/defer-non-critical-css/

https://web.dev/minify-css/

https://web.dev/extract-critical-css/

https://web.dev/optimize-css-background-images-with-media-queries/