Pagespeed optimization is a topic that every web developer should be aware of if not understand thoroughly. The better you optimize, the faster your website content is served to your audiences.
HTML, CSS, Javascript, together with images, are almost compulsory when building a front-end website. These assets should be optimized to reduce the HTTP requests, and so, improve page loading speed for the website.
In this blog, we would like to introduce 7 CSS tips that help you reduce the size, the number of CSS files, optimize CSS files and develop CSS more easily.
1. Use Shorthand Properties
This method helps reduce the number of CSS codes, and so, its file size. Shorthand defines a precise way of writing CSS codes. It makes the code cleaner and easier to understand.
Instead of specifying four different padding or margin values like:
div.pda {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
… you should combine them into one:
div.pda {
padding: 20px 10px;
}
In addition to the padding or margin, there are some other properties that can use shorthand such as background and border. Refer to
Mozilla Developer Network (MDN) for more information.
2. Stop using inline CSS
Inline CSS could be a quick fix for now but it will be very tough to maintain and scale your projects in the future. Instead, find why your CSS selector isn’t working and change it. The only time when it’s acceptable is you want to use for once time selectors or CSS dynamically from JavaScript.
According to
Google Pagespeed Insights, this will cause unnecessary code repetition and violation of W3 Content Security Policy, in some cases, these attributes will be blocked.
3. Forget !important
!important should not be used unless you want to override rules outside of your control, e.g. a styling rules from a 3rd party plugin. Frequent usage of
!important leads to difficulties to debug and in-scalability. Those who inherit your project will suffer the consequences.
CSS property happens naturally through the flow and specificity. When you use
!important, you’re obstructing the regular flow of CSS rules, giving more power to specific rules. If you never have to use
!important, this is a sign that you understand CSS properly as well as having a good plan before writing codes.
4. Reduce the number of CSS files
Combine external CSS is the easiest way to do, instead of having to put multiple files such as header.css, navigation.css, and footer.css into HTML documents, you should combine these into a single file.
The content of this file will contain the entire contents of the above files, so you will reduce server requests and load quite significantly.
These following CSS files…
<link rel="stylesheet" href="/css/header.css">
<link rel="stylesheet" href="/css/navigation.css">
<link rel="stylesheet" href="/css/footer.css">
…should be combined into one:
<link rel="stylesheet" href="/css/style.css">
5. Reduce the CSS file sizes
You can reduce CSS file sizes by removing unnecessary whitespace, trailing down, and the last semicolon in class or id. This process is called minification.
To differentiate between the minified file and the normal file, you should add .min to the minify file name. The style.css example after minifying will become style.min.css.
You can use
Clean CSS to execute minify CSS or use other tools to automatically export minify files in the process of writing code.
6. Combine CSS for elements
Sometimes we write CSS code without noticing that, there are many elements with similar properties like this:
h1 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; }
h2 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; }
h3 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; }
At this point, we combine and definition for them as follows:
h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; }
7. Apply Object Oriented CSS (OOCSS) technique
In fact, object-oriented here means that you combine the same properties of two classes into one to minimize repetition.
Instead of declaring two classes for the button as follows:
.btn-primary {
display: inline-block;
padding: 6px 12px;
text-align: center;
border-radius: 4px;
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary {
display: inline-block;
padding: 6px 12px;
text-align: center;
border-radius: 4px;
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
At this point, we should use a general class such as .btn to define common properties. As for specific properties, you should define each individually.
.btn {
display: inline-block;
padding: 6px 12px;
text-align: center;
border-radius: 4px;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
