How to compress CSS and improve the performance of a website

Cascading Style Sheets (in Spanish “cascading style sheet”), better known by its acronym CSS, is a language used to enable web content and facilitate the display of elements such as colors and the design of a web page, which by generally they must be defined separately. HTML and XML documents contain information only about the content or semantics of some of the components of a website, while design resources are found separately in so-called CSS files. If Stylesheets are used, the web server has to access them (where multimedia content such as photos, videos, etc. is stored) every time the web is visited, which clearly has an impact on load times.. The larger and more complex the CSS files are, the longer the visitor will have to wait to see the contents of a website. By compressing the code of the desired CSS file, the size of the files is reduced and therefore the performance of the web is improved.

The advantages of compressing CSS

The loading time of a web page is a fundamental factor, especially with the increase in the use of mobile devices and data connections. At the same time, CSS language competencies have been growing, eg. ex. taking over the JavaScript functions . It’s common for some content management system templates like WordPress to deal with overloaded CSS data that unnecessarily slows down the creation of a web page. Here are some tips and tricks to compress your CSS and speed up the loading speed of your website:

1. Avoid excessive use of inline CSS, that is, inserting the code directly into the HTML file, with the exception of the page header. The same is true for the “<style>” tags used to customize certain CSS features.
2. Combine multiple CSS files into a single PHP script. In this way, the client only needs to retrieve one file, instead of sending and retrieving an HTTP request for each Sylesheet.
3. Where possible, use the abbreviation: body {margin: 20px 10px 5px 10px} , instead of detailed wording such as: body {margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px }
4. Avoid too many specs. If specific tags are already included in a document (eg in a list), they do not need to be repeated.
5. Use colors with hexadecimal (HEX) notation instead of RGB.
6. The universal selector “*” should only be used when necessary. Using it implies a valid selection for each element, so the browser must retrieve all the elements that compose it.
7. Reduce CSS code Healthby removing unnecessary spaces, blank lines, and comments. It will also avoid, for example, leaving spaces after the colon or semicolon, or removing the semicolon at the end of a list. Although the CSS file loses its structure and clarity, this way it will be interpreted by the faster browser .

Because minimizing CSS code can be difficult, it is always recommended to create backup copies before making any changes. This makes it easier to track changes in detail and fix bugs easily.

Penny Shown