The speed of your website is an essential criterion in the user experience and the quality of your natural referencing. In this article, we will focus on the CSS code. These different lines, which are so crucial for the layout and the various animations of your site, can slow it down.
Let's see some useful tips to put in place that will improve the speed of your website.
1. Simplify CSS selectors
If you've ever written CSS code, you'll probably know what CSS selectors are. These elements, which make it possible to identify the HTML elements of your site to apply specific CSS properties to them, should not be used in any way.
While you like to use multiple nested CSS selectors to grab a specific element of your page, it's still best to keep your selector as simple as possible to reduce your site's workload.
When you write several selectors in a row, the browser will start to read them from right to left and will analyze all the code on the site to retrieve each element included in the selector.
For example, with the following CSS code:
.menu > ul > li > a {
}
The browser will go through all of the HTML code to retrieve all the elements of link "a" in the code, then it will analyze all the aspects of link "a" to keep only those contained between a tag "li" and so immediately until you have gone back to the last ".menu" element and only keep the elements that correspond to the given selector.
It involves many actions to retrieve each link in a menu, in the case of our example.
Instead of this CSS code, we could add a class "link-menu" on each element of link "a" of our menu and write the following CSS code to be able to apply specific CSS properties to them afterward:
.lien-menu {
}
Simplify your CSS selectors to reduce the number of actions the browser will have to retrieve site elements.
2. Avoid heavy and numerous animations
The animations in CSS are handy to enhance the experience quadrant of your visitors on your site. However, each animation will require a specific calculation time for the browser to apply the animation on the site when triggered.
Logically, a large number of animations on your site will involve a more significant number of calculations and thus could reduce the site's performance.
Use CSS animations freely, but use them sparingly, when you feel it is necessary for the user experience or the representation of your brand through your website.
The second point to understand with animations is that some require more calculation performance than others.
For example, when an animation involves a change in your page structure, it will be more performance-intensive than a simple change of color of an element.
Initially, it will therefore be necessary to reduce to a minimum the number of animations requesting a change of position or size of an element.
Then, if you still want to apply such animations, there will be some CSS animations to prefer over others:
- To change the dimensions of an element, use "
transform: scale ()" instead of changing the "height" and "width" values. - To move an element, do not use the "
top", "right", "bottom" or "left" properties, but instead use "transform: translate ()" - To blur a background, prefer to use a blurry image and then change its opacity.
3. Delete unused code
The first best practice is to remove all unused CSS code from your site. Cleaning up files from code that is no longer used can reduce the size of the files a little and thus slightly improve your site's performance.
In addition, a cleaned file is also a more readable file. Without all of the unused code, you will be better able to read and understand the CSS code written there.
4. Minify and compress CSS files
Our last and arguably most effective tip: minify and compress your CSS files. This practice can save you considerable loading time.
Minifying a CSS file removes all white space and unnecessary code from the file to reduce its size.
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.
5. Reduce the size of the images
The second important point in CSS optimization does not relate directly to the CSS files themselves but to the files used on a website, namely the images.
The images are often files with a reasonably large size compared to other files on the site. Therefore, they are often responsible for the slow loading of a website when they are not optimized.
To optimize an image, there are various methods such as:
- Reduce its image quality to a certain level so as not to degrade the image too much, but to have a good quality/weight ratio
- Use a lighter image format like JPG instead of PNG.
- Compress the image into a web format such as "webp"
6. Replace images with CSS effects and SVGs
Loading an image can take a long time, especially if the image is not optimized for the web. In addition, some of them turn out to be unnecessary.
It is effortless to create gradients in CSS: you can choose the colors and the gradient angle. So yes, it adds a few lines of code to you, but the loading is much faster.
JPG and PNG images can be replaced by SVGs (Scalable Vector Graphics):
- In this format, images load faster
- You don't need to load the same image in different sizes since in SVG, it automatically adapts to the user's screen
- You can add effects with CSS
7. Avoid using the ruler! Important
This CSS rule allows you to prioritize your declaration and replaces your other declarations. For example, if you have:
h1{
margin-bottom : 20px !important ;
}
All the margin-bottom of the h1 declared in your CSS files will take the same value: 20px. This syntax should be avoided because it forces the browser to check all your code. In addition, if your CSS files are large, it is evident that this practice will slow down the loading time of your website.
In general, never use the! Important rule unless you want to override CSS from another library.
8. Use Flexbox and CSS Grid
If you're still using margins, paddings, and floats to line up your elements, then it's time to embrace more modern layout techniques.
With Flexbox and CSS Grid, you can create more complex layouts with much less code: Flexbox allows one-dimensional layouts by arranging items in rows or columns. It is ideal for menus or image galleries, for example.
CSS Grid allows layouts in a two-dimensional grid, that is, by simultaneously managing the arrangement of columns and rows.
Flexbox and CSS Grid are supported by many browsers, adapt to different screen sizes, and save you several lines of code.
9. Remove unnecessary typography
Thanks to Google Fonts, it is now easy to add personalized typography to a website. But be careful not to add unnecessary fonts!
Start by loading only the styles you need: for example, you can remove the italics. Also, use variable fonts; they allow you to load only one file and then access multiple styles.
10. Use the link tag instead of @import
There are two main techniques when you want to load a CSS file into an HTML page: Using the <link> tag in the <head> section of the HTML file Using the @import rule at the start of your CSS file
The latter option is ideal for loading typography or minor elements. On the other hand, it takes a lot more time for the browser to fetch the additional stylesheets.
Therefore, use the <link> tag in your HTML file to load your CSS files.
Add the most generic CSS file first, then go to the more specific. Indeed, the styles of the last files replace those of the previous files.
<link rel= "stylesheet " href= " main.css ">
<link rel= "stylesheet " href= " page.css ">
<link rel= "stylesheet " href= " components.css ">
Conclusion
Creating the look of your site with CSS is not just about setting up CSS properties on HTML elements. It is also necessary to put in place good practices in CSS so that the CSS code of your site does not impact the performance of the site.
As often, the size of the files impacts software performance. A large file will take longer for the browser to browse and execute the code when it needs to be applied. CSS is no exception, and all files related to CSS code will need to be optimized.
Optimizing a site is always a relatively complex and technical task, whether HTML, CSS, or JavaScript.