Here, in this article, we are discussing the techniques to improve CSS optimisation. So that it loads more quickly, is simpler to use, and is more effective.

• Avoid using @import inside a css file

For example, Instead of using

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');

You can use

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap" rel="stylesheet">

• Remove unnecessary fonts and css that are not used for the website.
  1. Use only the fonts that you required for the website.
  2. Load only the styles and weights you needed for the website without italics.

• Compress your css files by removing unnecessary whitespaces, comments, etc.

• Remove unwanted css files.
  1. Try to reduce the use of !important to override the css.
  2. Try to reduce complex css selectors. By reducing the complexity of css selectors, it’ll help you to reduce the file size and increase the speed.

• Use modern layout techniques like css flexbox and css grid instead of using css float. Because the browser can natively identify the ideal layout, both choices are easier to build, use less code, can adapt to any screen size, and render more quickly than floats.
• Try to use external css instead of using inline CSS.
• Instead of using images for gradients, shadows, etc., use css effects.
• Use SVG or scaleable vector graphics for logos, icons, etc. other than  JPG, or PNG. As SVG defines forms like lines, rectangles, and circles in XML. SVG helps to reduce the image loading time and increase the CSS optimisation.
• You can check the web speed using online tools like PageSpeed Insights (web.dev), GTmetrix | Website Performance Testing and Monitoring, and Google Search Console.