Speed Up Your Website With These Simple CSS Tips

When it comes to page loading speed, every second counts. Your website speed plays an very important role in the success of your website. That’s why today i am going to share some pro CSS tips that will help you to improve your page loading speed.

• How CSS Affects The Speed Of Your Website

While CSS parses, it can block other resources from loading, even including the Javascript functionality. In fact, you probably won’t be able to interact with the page at all.
CSS can render block, such that very first pixel of a page won’t appear untill all CSS is parsed.

Also Read: Scss vs Bootstrap vs Tailwind CSS

In this post we will see some CSS optimization tips that can help us to make our sites faster than before.

• Improve Your Website Performance With These Simple CSS Tips

1. Avoid Expensive Properties

Analysis has shown that some properties are slower to render than others, so they should be used conservatively.

Few properties to watch out for:-

box-shadow
border-radius
position: fixed
transform
:nth-child
filter

The above properties are considered to be performance-hungry.

It’s not a problem to use the above properties here and there, but if they appear hundreds of times per page, then overall CSS performance may suffer.

2. Use <link> instead of @import

The @import rule is mostly used to include multiple assets or CSS files.

It can help in code splitting but sadly it blocks other parallel downloads and can lead to slower speed of the site.

Instead, you can use multiple <link> tags in the HTML, it will load the CSS files in parallel which is considered as more efficient.

Also Read: Grid image gallery in CSS, in 5 minutes

Example

❌ Instead of doing this in CSS:

@import url("header.css");

@import url("slider.css");

@import url("content.css");

@import url("footer.css");

✅ Do this in HTML

<link rel="stylesheet" href="header.css">

<link rel="stylesheet" href="slider.css">

<link rel="stylesheet" href="content.css">

<link rel="stylesheet" href="footer.css">

3. Simplify Selectors

We know there are many ways to target HTML elements for styling and the most complex CSS selectors tajes milliseconds to parse. But reducing the complexity will reduce the load on the browser and keep code clean and simple.

4. Avoid !Important

Though !important can help us in some cases, but you should only use it as a last option.

Adding !important to a CSS declaration will override any other declarations, even those with higher specificity. And if there are too many !important rules in your CSS, your user’s browser will have to run extra checks on the code, which can slow down the page pretty munch.

Also Read: What Most People Do Wrong About SEO

As a rule of thumb, never use the !important rule unless you want to override CSS from another library.

5. Use CSS Effects And SVG’s

Loading an image can take a long time, especially if the image is not optimized for the web. And it’s rarely necessary to use them for background-images, gradients, geometric shapes etc.

It is effortless to create gradients in CSS. You can choose the colors and the gradient angle to make cool backgrounds. So yes, it adds a few lines of code to you, but the loading is munch faster.

PNG & JPG images can be replaced by SVG’s by doing so:-

You can add effects to such images
Images load faster
We don’t have to worry about using same image in different sizes, since in SVG it automatically adapts to the user screen

6. Minify Your CSS

Concentrating your style sheets into one file and sending out a minified version can drastically reduce the size of your CSS and can save you considerably loading time.

Minifying a CSS file removes all white space and unnecessary code from the file to reduce its size.

Also Read: 40 Best Websites Every Developer and Designer Should Follow

The result is a file that fits in a few lines, with a reduced size which will be difficult to read by a human, but a browser can read without worry.

There are online tools such as CSS Minify that allow you to minify your CSS file by copy-pasting it into a simple form.

Common CSS Mistakes That You Should Avoid

1. Using 0px instead of 0

Whenever you’re giving 0 as a value you don’t need to use any units with 0, such that don’t write 0rem, 0em, 0px etc.

You can just use 0.

It may not seem like munch useful but when you are working with a huge file, removing all these px or units with 0 can reduce the size of your file. Which is not a bad thing

2. Using display:block with position:absolute

I had seen developers making this mistake most of the time, and they use both display:block & position:absolute properties like this:-

p::after{ content: ""; position: absolute; display: block; top: 0; left: 0; }

But let me tell you that when you use position:absolute or position:fixed on any element, the browser automatically sets the value of display to block on that element. Therefore you don’t need to explicitly define display:block

So the below code will work same as the above one:-

p::after{ content: """; position: absolute; top: 0; left: 0; }

3. Using Color Names Instead Of Hexadecimal

Let me tell you one thing today, that as a developer you must never let the browser decide as to how your webpages would be displayed.

When using colors put in a little bit more effort to find out the hexadecimal value of that color.

Suppose if you want to use red color, so by saying just color:red you are essentially saying that the browser should display ‘what it thinks red is’ and the tone may differ in different browsers.

So by using hexadecimal (for example #ff0000 for red) you would be able to ensure that the color that you want is displayed accurately, in the same tone across all the browsers.

4. font-family everywhere

Defining a primary font for almost every selectors isn’t a good approach, it leads to unmaintainable code and suppose if you want to change the primary font in future you will have to go and change it in all the selectors.

So instead of defining font-family like this:-

h1{ font-family: Arial, Helvetica, sans-serif; }

p{ font-family: Arial, Helvetica, sans-serif; }

.selection{ font-family: Arial, Helvetica, sans-serif;}

.footer{ font-family: "Times New Roman", Times, serif; }

You can define your primary font in body, so that all the selectors will inherit it from the body and if you want to override that font-family in any selector you can do so by using the required font-family in that selector.

body{ font-family: Arial, Helvetica, sans-serif; }

footer{ font-family: "Times New Roman", Times, serif"; }

5. Over Qualifying Selectors

Being overly specific when selecting any element to style is not a good practice,

This is what i am talking about:-

.navbar ul.navigation li a{ /*some styles */ }

So using such selectors will increase the specificity for no reason and your code will become hard to read plus hard to maintain, and there is no benefit of this at all.

So instead of writing such long declarations you should condense your code to:-

.navigation a{ /* some styles */ }

6. Not Using Font Fallbacks

It might happen that the font you had used is not available on user’s device.

So in this case you can specify other fonts that should be used.

p{ font-family: 'Open Sans', Arial, Helvetica, sans-serif; }

So the browser will parse it like this:-

Is Open Sans available? if yes then use it, if not try Arial. Now if the Open Sans is not available it will check if Arial is available or not.

If Arial is available it will use it otherwise it will check for Helvetica.

And atlast if neither of them are available it will use the generic sans-serif font.

Eventually as soon as it finds a font which is available it will stop and will apply that font.

7. Not Using CSS Reset

Each browser has its own default styling for HTML elements.

For instance:- if you are an h1 element without any styling then by default Firefox3 will give it a margin of 21.433px from top & bottom and 0 from left & right while as Safari will give it a margin of 21px from top & bottom and 0 from left & right.

Therefore it is a good practice to reset that styling and start styling from scratch.

You can use some mostly used CSS reset codebase that are available on the web such as normalize.css to do a CSS reset, what many of developers do is they utilize the universal selector(*) to do the basic reset like this:- (you can also do this for basic CSS reset)

*{ margin: 0; padding: 0; box-sizing: border-box; }

NOTE- Using the universal selector(*) to do a reset can sometimes lead to same performance issues since it targets each and every tags and sets its styles. I will recommend to you to check more about CSS reset here.

8. Repetitive Code

When two elements or selectors have same CSS properties then instead of repeating the style you can simply combine those selectors using comma(,) and then they will share a single CSS styling.

Instead of this:-

.header{ background-color: #fefefe; padding: 20px 0; }

.footer{ background-color: #fefefe; padding: 20px 0; }

Do this:-

.header, .footer{ background-color: #fefefe; padding: 20px 0; }

And that’s it for this post guys, i hope you learned something new in this article and let me know in the comments below what mistakes you were making.