everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development


Must Know Tips to Improve CSS performance

1. Avoid @import CSS

@import url("style.css")

What is CSS @import ? CSS @import is the process of importing one or multiple different CSS file into existing CSS file

CSS @import load CSS files sequentially instead of in parallel, your browser need to process every single CSS file before it can start rendering content on your page and causing performance slowness

2. Remove redundant rules & minify your CSS file

Remove unnecessary & redundant rules without affecting web page design, the fewer rules there are for the browser to process, the less time it takes to load the web page.

Minify CSS file

CSS minify is a compression process of removing unnecessary space and formatting within your CSS and reduce the size of your files.

before minify (Code Block A):

   color: blue;
   font-size: 12px;

after minify (Code Block B):


These two code blocks are working exactly the same way. But there are two major differences between these code blocks:

  • Code block A is more readable and well formatting compared to the code block B which is without formatting
  • Code block A has bigger file size compared to Code block B

3. Optimize Font Usage

3.1 Only load the necessary fonts: 

When you add up an additional font family to style in your web page, whenever users accessing your website, browser must download the extra font file in order to render the web page.

Remove fonts you’re not using / outdated.

3.2 Subset Font Resources:

Specify the Unicode range from @font-face, you can use the Unicode-range descriptor to specify the character range, for example:

  1. Single codepoint (e.g. U+416)
    • a Unicode codepoint, represented as one to six hexadecimal digits
  2. Interval range (e.g. U+400-4ff)
    • represented as two hyphen-separated Unicode codepoints indicating the inclusive start and end codepoints of a range
  3. Wildcard range (e.g. U+4??)
    • defined by the set of codepoints implied when trailing ‘?’ characters signify any hexadecimal digit

for example, to specify the range to Vietnamese only:

@font-face {
  font-family: 'Montserrat';
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/montserrat.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;

4. Make used of CSS containment

Defining contains CSS allows browser to isolate a targeted subtree from the rest of the page.

For example:

.container {
  contain: layout;

When a content change is triggered inside .container, browser will only re-render on the targeted .container area and does not affect the rest of the page.

For more details, refer to complete guide : Tutorial for CSS Containment

5. Minimizing Animation which causing layout reflows & repaints


Layout repaint occurs when triggers a change to the element that affect appearance but not layout.

Sample properties:
opacitybackground-colorvisibility, and outline


Layout reflows have a bigger impact compared to repaints. Reflow will trigger a re-calculation of position & dimension for all elements within the page. Hence, changing a single element can be affecting all children, siblings, and ancestors.

Sample properties:
width, height

6. Simplify your selector

Minimizing complicated hierarchy

Keep CSS hierarchy simple and clean, and reduce specificity while possible. This will also reduce the dependency on another selector and increase reusability

avoid this:

body > main_container .sub_container + div > .myclass {
    /* Code here */

use this instead:

.myclass {
    /* Code here */

7. CSS will-change Property

The CSS will-change property provides a hint to the browser on which properties of an element are likely to change. This allows the browser to optimize the element for animations and other performance-critical updates, making it possible to achieve smoother and more efficient animations.

For example:

  will-change: opacity;

This will inform the browser that the opacity of the element is likely to change, allowing it to optimize the element for the animation, resulting in smoother and more efficient animations.

Additionally, you should be careful not to overuse will-change, as too many elements with this property can lead to increased memory usage and degraded performance. For comprehensive guide:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount


Or enter a custom amount


Thank you for your contribution!



CSS (27) css pseudo (3) debug (2) design (4) fonts (2) html (6) image (8) layout (5) optimization (10) performance (9) responsive (8) Software-development (1)


Recent Post:


Related Posts

%d bloggers like this: