With new websites coming up every now and then, it is not surprising to learn that the web has become a bloated mess and as such, a simple median website now requires 1,800kb of data which are split over 90 HTTP requests and takes almost 20 seconds to fully load on a mobile device.
Even though CSS is rarely the culprit, and that’s because a typical site uses 50kb that are spread over five stylesheets, there are, however, still various optimizations that you can make in order to use CSS in such a manner that it boots the performance of your site.
In this article
Knowing how to use analysis tools
Until and unless you know where the faults lie, you won’t be able to address any of the performance problems. In such cases, your best bet is the ‘Browser DevTools’.
Even though all the browsers are known to offer the same facilities with the tools opening even on badly-performing pages, there are, however, some tabs which are considered to be the most useful among all of them.
- Network tab – Known to display a graph of assets when they are downloading, you can disable the cache and consider moving on a low-speed network. It is suggested that you should look into those files that are either blocking others or are very slow to download.
- Audits tab – This tab is basically provided by the Chrome-based browser and is found to run Google’s LightHouse tool. Known to be mostly used by the progressive web app developers, it also makes suggestions on the performances of CSS.
- Performance tab – Known to analyze the browser processes, all you need to do is to start recording, run an activity and then, after a few minutes, stop the recording and look into the results.
Going straight for the big wins
Even though CSS is not found to be the direct cause of any performance issues, however, in some cases, it is found that they load heavy-hitting-assets, and yes, they can be optimized with a few minutes.
Images are often found to be the main cause for page bulk and due to this, many sites fail to load at the optimum speed. In such cases, it is recommended that you should resize the bitmap images.
Apart from that, the file format should also be noted. While the ‘JPEG’ is best suited for any photograph, ‘SVG’ is for vector images and the ‘PNG’ is for everything else out there – though you will need to experiment a bit on which format will best suit your purposes.
Last, but not the least important, is the image tool. Even though there are many tools out there, find the one that speaks to you best and use it to reduce the file sizes of the images.
Replacing images with CSS effects
Instead of using background images for borders, rounded edges, gradients and such, why not go for CSS effects? They not only use less bandwidth but they are also quite easy to modify or animater later on, should you want to.
Removing the unwanted fonts
Google fonts have made our life quite easier by being able to add custom fonts to just about any page. But the main problem is that a simple one or two lines of code can retrieve hundreds of kilobytes of font data.
Hence, it is recommended that you should only use the fonts which you need – along with the weights and styles, and if possible, try considering using the variable fonts or better yet, standard OS fonts. Many sites are known to use custom fonts which make the OS fonts quite rare from each other.
Using the modern layout techniques
In order to lay out the pages, earlier, CSS float was quite an integral part of CSS. And truth be told, the CSS float was quite a headache. Not only it requires a lot of code just to ensure that the layout works but even then, floats are seen to break at smaller screen sizes unless and until media queries are added.
Today, many are seen to go for CSS Flexbox and CSS Grid – they are quite simple to develop and are known to use very less code and can adapt to any screen size. They are also found to be quite faster than floats as the browser can now determine the optimum layout.
Avoiding the ‘@import’
In the CSS file, the @import at-rule is known to include a CSS file within any other. It is the best way to load the smaller components as well as the fonts. All you have to do is to nest the @import rules and the browser will load and parse all of the files in the series.
But it is not so. Within the HTML tag, in order to load the CSS files parallelly, you should multiply the <link> tags – and this is considered much more efficient when you are using HTTP/2.
Reducing the CSS code
Do you know that the smaller the size of your stylesheet, the faster it will download as well as parse? It’s definitely not the fault of the developers but that of CSS as it starts to bloats over time when the feature count increases – and rather than removing old code and breaking the site, many finds it easier to retain the old code.
There are a few things that you should try to consider.
- When using large CSS frameworks, it is recommended to add modules only when they are needed.
- Try to avoid inline styles in HTML code.
- The cascade can sometimes be overridden, hence, it is suggested to avoid using !important.
- The methodologies should be renamed as BEM so that it can aid in the development of discrete components.
Using the cascade
Because of CSS-in-JS, there are many developers who have avoided going for the CSS global namespace. That being said, it is quite important to understand the benefits of CSS cascade and how it can help you in your projects.
Say, for instance, it is CSS cascade which allows you to add default fonts, colors, sizes and what not, and that too, all in a single space!
So, should you try to go for CSS?
Definitely yes, if you want to go for it. But before, that, it is recommended that you, as a developer, should try to understand the stylesheets. Simply adding in CSS from either StackFlow or BootStrap will no doubt produce great results, but on the other hand, it is also going to slow your site with unnecessary junk – and with that, making customizations can be quite difficult.
For the novice, CSS may look quite daunting, but rest assured, it may look vast, but is quite easy to learn and even easier to implement. Keep on coding and coding, and in no time at all, you will be able to enhance your apps and revolutionize your workflow.
