What is a Critical CSS and how to work? (Techniques for the web load quickly)

The real problem in life

Have you ever felt like this? You click into an interesting website. But what is welcome you is ... White screen With a smooth icon That seems to never end Second, the second that you wait ... until the end, it will lose patience and then turn off! This kind of irritability Is what your customers are encountering every day and it is a "kill" who is quietly destroyed the Conversion Rate and your SEO rank. Which you may not know

Symptoms of "Slow download website", especially the first seen (Above the Fold), not just about feelings. But it is a technical problem called "Render-Blocking Resources" or resources that blocked the display of the webpage. Which the important factor is our heavy CSS file This problem is an urgent matter that must be resolved. You can learn more about how to fix the Render-Blocking Resources to add Pagespeed directly.

Prompt for illustrations: The user image is showing an irritated expression while staring at the smartphone screen that is still white. There is only a loading symbol in the middle. Conveys the feeling of waiting for the website to download too long

Why did that problem occur?

To clearly see the image Imagine that the browser (such as Google Chrome) works like a very diligent delivery staff. When someone calls your website It will run to get the HTML file (the web structure) before. Once I read the command in HTML, it found the command "Hey! Before showing anything You have to download all CSS files before! "The CSS file is like a dressing manual that says what color web has to have, but the point is ... browser will "Stop everything" to wait for the entire CSS file to finish first. Although some styles are for the bottom content of the website that the user has not seen.

The process that "must wait to finish before going to continue." This is the origin of the word Render-Blocking , the bigger and complicated your CSS files. The wait is only longer. Causing the user to stare at the white screen Longer, unnecessarily, despite the important content that he should see first, may only need CSS.

Prompt for illustrations: Easy diary images Show the process of normal browser: 1. Browser requests HTML -> 2. See CSS -> 3. Stop working (with a red Stop symbol) to download all CSS files -> 4.

If left, how will it affect?

Overlooking the problem of slow loading websites because CSS is no different from opening a beautiful store. But locked the door from allowing customers to enter The consequences are much more intense than expected.

• User experience (UX) destroyed: No one likes to wait. The research shows that just 1-3 seconds slow down the website, it adds more than 32% of the chances of bounds.
• Conversion Rate. Scale: customers who are frustrated are customers who do not buy things. The opportunity for you to close the sale, get Lead, or make people click important buttons. Will disappear in the blink of an eye with a slower speed
• SEO rank. Drop: Google attaches great importance to user experience, with Core Web Vitals as one of the ranking factors. Slow websites will directly have a direct negative effect on the LCP (Largest Contentful Paint) value. One of the important metric makes your Core Web Vitals improve And finally fell
• Loss of credibility: Slow websites reflect non -professional. And causing customers to lack confidence to do transactions with you He may escape to the competitors on the web faster instead.

Prompt for illustrations: 2 graph images compared The first bar has a frown icon on the top. The graph fell down with the "Conversion Rate" message and the other has a smile icon. The graph rise with the message "Bounce Rate" to convey negative effects.

Is there any solution? And where should it start?

The good news is ... We have "expressway" to solve this problem. This technique is called "Critical CSS" or "CSS that is absolutely necessary".

Its principle is very easy. Instead of forced the browser to download all CSS before display We will change to a new game by:

1. Find and extract (Extract): We will find only the CSS style that is needed for the "Above The Fold" content.
2. Buried in HTML (Inline): Bring the CSS extracted (which is very small), put in the tag ภายในส่วน ของไฟล์ HTML โดยตรง
3. Load the rest later (Async/Defer): All CSS files We will order it to download. "Do not block the display" (Asynchronously) is to gradually Download behind the page after the webpage has been displayed.

What is the result? The browser will receive a HTML file with Critical CSS, embedded and can "color" or display the first webpage for users to see. Almost immediately! The user will feel that your website is fast, while the other CSS gradually loads later. Without disturbing anyone This is one of the important techniques that Smashing Magazine gives to the heart of Performance Optimization.

Prompt for illustrations: easy to understand Explain the concept of Critical CSS: 1. "Identify CSS for Above-The-Fold" text box. 2. Put the CSS code to put in the HTML file (Inline). 3. The remaining CSS files are loaded later (Async load).

Examples from the real thing that used to be successful

Imagine "The Chic Décor" online home decor shop. There is a very beautiful website. But instead encountered a big problem, the sales on mobile phones is much lower than the target The team found that the Google Pagespeed Insights score is very bad, with a LCP (Largest Contentful Paint) up to 4.8 seconds, which means that customers have to stare at the white screen for almost 5 seconds to see the first product image!

Turning mission: Development team decided to use Critical CSS techniques. They extract the necessary CSS for HEADER, Hero Banner and the first 4 items displayed in html and set the main CSS file later.

Tangible results: After only one week, the web LCP value decreased from 4.8 seconds to only 1.6 seconds! The user feels that the web "Faster, like a different story," BondCe Rate on a mobile phone has reduced by 25%, and most importantly, the Conversion Rate has increased by 12% without having to shoot even one baht. This is the power of focusing on what the user sees first. Which is in line with the idea that Above-The-Fold It is still very important.

Prompt for illustrations: Comparison images of the screen/after screen. Google Pagespeed Insights. The picture shows the red Performance and the high LCP. The AFTERT image shows the green scores and the LCP values ​​that are significantly lower.

If wanting to follow, what to do? (Can be used immediately)

Critical CSS is not too difficult. Currently, there are a lot of tools. Try following the following steps:

Step 1: Extracting Critical CSS.
The best way is to use automatic tools. Because doing it yourself is a waste of time and is very easy.

• Online tools: There is a website that provides free Critical CSS. Just put your URL in, such as Sitelocity's Critical CSS Generator.
• NPM Packages (for developers): If you are a developer, can use library like 'Critical` which is very popular and powerful. It can work with your Build Process system.
• CMS Plugins (for WordPress/Shopify): Most of the platforms have automatic speed plugs that do this, such as WP Rocket, Perfmatters (for WordPress), which is the easiest way for general people.

Step 2: Put it on your website.

1. Bring the CSS code that is extracted from the first step. Put it in the tag ที่ส่วน ของหน้าเว็บคุณ
2. Adjust the original CSS download command from:
   To become like this instead To let it download later:
   

This new code tells the browser that "Download this file in advance without urgent. And once the load is finished, use it as Stylesheet. "The tagIt is a protection in the event that users turn off JavaScript. If you need experts, check and improve these structures. Ecommerce Optimization Audit can help you.

Prompt for illustrations: Infovic, 3 steps, Critical CSS, with icon: 1. Generate (use computer) 2. Inline (put the code on the HTML) 3. Defer (original CSS file set) to be a process that is easy to follow.

Questions that people tend to wonder And the answers that are cleared

Q: Do this, will our HTML file be bigger? Is there any negative effect?
Answer: Yes, the HTML file will be slightly bigger. But this is an exchange that "Great value". The benefits of the user see the webpage to display immediately. More value than the HTML file size that has only increased a little The overall experience of the user will be enormous. Which is our main goal

Question: Do we need to create a separate Critical CSS for every page?
Answer: In the theory, the best is "yes" because each template (first page, product page, blog page) with Layout and ABOVE THE FOLD style. But in the beginning You can focus on important pages that have the highest traffic first, such as the first page and the main landing page. Most automatic tools can help create a CSS.

Question: If there is a editing of the web design How to take care of it?
Answer: This is the main challenge. Every time you change the design in the Above The Fold, you "must always" create a new Critical CSS. This is the reason why the Automated Build Process is for developers. Or using reliable plugs for CMS users as the most recommended method Because it will help re-generate itself every time there is a change Makes care a lot easier And also helps to promote Sustainable web design guidelines as well

Prompt for illustrations: Person images are sitting seriously thinking in front of the computer. With a question mark (?) Floating around the media about having a question that needs a clear answer

Summary to be easy to understand + want to try to do

Critical CSS is not just a technique for programmers, but the "heart" of creating a website that provides the best experience for users. It is a way to change the way of thinking from "Forced to wait for everything" as "delivering the most important thing first." To make the user see the content he wants in a second Is the difference between "Loss of customers" and "Creating regular customers"

Don't let the white screen And boring waiting to destroy your business anymore It's time to do it. Try using various tools. Recommended to check your website And started to improve from today Investment is effective today. Is to build a strong foundation for the growth of conversion and SEO in the future

Your website ... ready to be faster? Do it immediately and you will definitely be amazed by the results!

Prompt for illustrations: The rocket image is rushing into the sky quickly. On the rocket, there is the word "Page Speed" and "Conversion" as an inspiration and encouragement for readers to act.

‍