Inp (Interaction to Next Paint): In -depth Core Web Vitals

Have you ever ... when entering the website and find a button "Add the basket" that is pressed, still, the Dropdown menu that is clicks, or the search box that has been printed but nothing has happened? The feeling of "delay" is frustrated like this is what Google is about to come in "Revolution" with the latest Core Web Vitals called "Inp" or Interactive to Next Paint!

If you are the website owner, marketer, or web developers who have thought that our website is fast enough because the download ... Today may have to think again because Inp is not measured just "the speed of loading" but the measure of "response speed" for every user's actions. Which is about to become an important factor that affects both the user experience (UX) and your SEO directly! This article will take you to in -depth inp in an easy -to -understand. With a guide, the Optimize method, hand -made to change the website that used to "delay" to "smooth" until the customer has to be impressed.

The real problem in life: The "still" website is like the staff.

Imagine You find a very interesting product advertisement. Click quickly into the website. The webpage loaded beautifully in the blink of an eye. You find the product you want to press the button "Choose the color" ... and ... quiet ... Nothing happened You try to press again ... still still. You start to become frustrated and not sure if the website is broken or the internet. You have a problem. In the end, you just closed the window. Then go to buy from other websites instead

This is the "nightmare" of the E-Commerce website and all websites that need conversion. The problem "Click and hold and" press and then delay "create a tremendous bad experience. It destroys the reliability and causes us to lose our customers unfortunately, although using a lot of money to shoot or do SEO, a small problem called "slow response." This is an important factor that makes your money "wasted" and inp is a tool that Google created this problem specifically.

‍

Prompt for illustrations: The graphics show the user. While the fingers are dipped on the button on the mobile screen without any response With the hourglass symbol or Loading Icon rotating

Why did that problem occur: "One employee" named Main Thread

The main reason that our website "slow response" or high inp comes from the browser. "Important employees" are the only one named "Main Thread". This employee is responsible for almost everything. From the webpage display (Render Layout), CSS code management, to the complex javascript run

Now think about If we order Main Thread to work hard for a long time, such as large Javascript processing to create a beautiful animation or a large amount of data management from Third-Party, while Main Thread is "spinning head" with these work. Then the user pushed to "click" button or "type". The message comes in. Main Thread will not have an empty hand to "receive guests" or respond to that order immediately. It therefore has to wait for the work to be completed first. To turn to what the user does The result is the "delay" or "outstanding" that we feel. This problem is usually caused by:

• JavaScript that works for too long (Long Tasks): Scripts that take more than 50 milliseconds to block Main Thread immediately.
• DOM is large and complex: the more Element has a lot of calculations to display each new results, the longer it takes.
• Innual Event Callbacks: Writing code that deals with various events (such as Click, Scroll, Keypress) is not good enough.
• Third-Party Scripts that are heavy: external scripts such as chat systems, analytics, or advertisements can compete for Main Thread resources as well.

Understanding Core Web Vitals is an important basis for solving these problems.

‍

Prompt for illustrations: Easy Infographic images. Showing "Main Thread" is like the only employee who is making a big document (JavaScript) until there is no time to answer the phone (User Interaction) that is beside.

If left, how will it affect: not just "annoying" but the "disaster" of the business.

Having a high inp value or the website responds slowly Does not only affect the "frustrated" user, but it has a direct impact on the business and SEO in the long run.

• Conversion Rate. Dang: When users encounter use problems from the beginning, such as pressing the product selection button. Or fill out the form The opportunity for him to reach the final step to "pay" almost zero.
• Boundce Rate is high: the first impression is important. If your website creates a bad experience The user will press off immediately. And didn't think of coming back again
• Break the brand image: Slow and difficult websites. Reflecting ignorance and non -professional Destroy the reliability that is accumulated
• SEO ranking: since March 2024, Google has brought Inp as one of the official Core Web Vitals. To replace the FID (FIRST INPUT DELAY). This means that the website that has a bad inp will be reduced directly on the search page, especially the website for the B2B business that is reliable is the highest important.

In other words, letting the website have a high inp value, like opening a beautiful shop. But locked the door from allowing customers to enter It is to destroy business opportunities and reduce the efficiency of all the marketing that you have done.

‍

Prompt for illustrations: The graph showing the Conversion Rate line is plummeted while the Bondce Rate line rises with the inp icon that is red in the background.

Is there any solution? And where to start: Open the complete Optimize inp textbook

The good news is that high inp problems can be resolved and improved. The key to the "independent return" to Main Thread so that it is ready to respond to users at any time. We should start by "measure the results" to find the source of the problem first. And then fix these guidelines

1. Measure and find an interaction that has a problem:

• Use Lab Data tools: For example, Google Pagespeed Insights or using Chrome Devtools (Performance) to simulate and find the "Long Tasks" that occur.
• Use Field Data tools: See information from real users via Chrome User Experience Report (Crux) or install Google's Library to store Inp data directly from your user.

2. Optimize Code Techniques (Heart of Reducing Inp):

• Divide the big work into sub -tasks: The most important technique is "Surrender", releasing Main Thread to be free from time to time. Instead of ordering it to work for a long time, we can use the `Settimeout` to delay the function of some functions to make the main thread rhythm" breath "and respond to users. Read more from the official data source at Web.dev by Google.
• Avoid Layout Thrashing: Do not write a script that you order to read the size of the element and write a new value alternating in the same loop. Because it forced the browser to repeatedly calculated the layout unnecessarily
• Reduce the complexity of DOM: The less Element has the more ELEMENT. The browser is easier and faster. Try to make the HTML structure as simple as possible.
• Using the `Content-Visibility Sp and` `Contains in CSS: To tell the browser that any part that does not need to be Render or can be calculated separately from other parts. Which helps to reduce the burden of display a lot
• Manage the Third-Party script: Load the script as needed and use Attribute 'Async` or DEFER` so as not to block the main page of the webpage. Learning how to fix the Render-Blocking Resources will help a lot in this part.

For in -depth information from the Google Search team directly, can be studied from the introduction inp to core web vitals.

‍

Prompt for illustrations: Infographic that shows Optimize inp as 3 steps: 1. Measure (an enlarged glasses icon) 2. Identify (Target Aviation) 3.

Examples from the real thing that used to be successful: E-Commerce website that returned "Click on the finger"

To clearly see the image I would like to lift the case of the E-Commerce website. Sell a fashion clothing that has encountered high inp problems. Their website has features. "Filter" (very complex) Users can choose both clothing, color, size, and price range.

The original problem: Every time the user chooses a filter, such as choosing "red", the whole page will hold for 1-2 seconds to wait for the Javascript to process and display all new products. Which creates a lot of annoyance Many customers click to choose the filter next to each other and the website is too long, making the Conversion Rate from the duty to be the most important.

Optimize Inp mission: Development team has come to edit using the "Break Up Long Tasks" technique. They changed from running all the code at once. It is divided into parts by using the 'Settimeout`. After the user, click Filter, the system will display the loading spinner immediately (immediately respond) and then gradually let the Javascript pull the information and render the new product in the background.

Amazing results: the inp of the product page is reduced from ~ 800ms to only ~ 150ms (from "bad" become "good"). The experience of smooth use is like a mobile application. The user can press to select many filters continuously without feeling stumbling. ** The session that uses Filter has a conversion rate up to 25%** and ** Bounce Rate of the page drops 15%** This is the power of Optimize inp that can actually change the experience of users and create business results. Same as Increase the speed for the shops on the Shopify that directly affect sales.

‍

Prompt for illustrations: The Before & After page of the E-Commerce page. The first side shows the User. Irritated with the Filter on the side of the After showing the user.

If wanting to follow, what to do? (Can be used immediately): Checklist. Health check in your website.

Ready to change your website "Click on the finger" yet? No need to wait for the problem to accumulate. Try to follow this easily checklist to start the Optimize inp immediately.

1. Go to Google Pagespeed Insights: Type your website. And look at the topic of "Diagnose Performance Issues", scroll down to see the metric named Interactive to Next Paint (Inp). How much is your value? (Good = below 200ms, must be improved = 200-500ms, bad = higher than 500ms)
2. Find the slowst interaction: Pagespeed Insights often tell which interaction (such as clicking the button, opening the menu) that takes the longest time. That is your first goal.
3. Talk to your developer (or open the Devtools itself): Send this report to developers. Or if you can do it yourself, open the Chrome Devtools to the Performance tab and try to do an interaction that has a problem looking for a long red band. Which has a sign that "Long Task" is the
4. Start with the easiest thing: try to look for JavaScript that works unnecessarily immediately. The webpage is finished. Try using the `Settimeout` to delay its operation for 1-2 seconds.
5. Check THIRD-PARTY SCRIPTS: Do you have a plug-in or script? Such as a chat system that has no user or Heatmap that has not been opened. Try to temporarily close and measure the results again.
6. Consult a specialist: If the problem is complicated, investing with advanced website development experts To come to check and edit the code structure May be the most worthwhile investment in the long run.

‍

Prompt for illustrations: Checklist images with Inp inspection items, with each component icon, such as Pagespeed Insights icon, Code Icon, plug -in icon, and expert icons.

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

So you can understand the inp thoroughly I have compiled a common question with a clear answer.

How is Inp different from FID (FIRST INPUT DELAY), how is the old web vitals?
FID only "First Input" (First Input), but inp the "every Interactive" measurement that occurs throughout the user's use. From the first click to the final click, Inp is a much better representative of the overall user experience.

How much should the "good" inp value be?
According to the criteria of Google, good inp values ​​should be less than 200 millisresses (MS), if between 200-500ms, it is considered to be renovated, and if higher than 500ms is considered bad.

I'm not a programmer Will be able to improve the inp by yourself?
Some improvements may be difficult if there is no code knowledge. But what you can do is 1. Use tools like Pagespeed Insights to "diagnose" problems. 2. Reduce the number of plug -in or unnecessary external scripts. 3. Choose the Theme or TEMPATE that writes the code well and emphasizes the Performance and 4.

My website is just an ordinary information. Doesn't it have to be interested in inp?
It is absolutely necessary! Regardless of the type of website, having a smooth interaction such as pressing the menu, clicking to play video, or even pressing the Cookie acceptance button, all affects the reliability and experience of the user. And most importantly, it directly affects your SEO rankings.

‍

Prompt for illustrations: Libra -shaped icon with a question mark (FAQ) with the character, programmers and marketers are standing and talking.

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

In summary, Interaction to Next Paint (Inp) is not just a "technical" headache "that is a" reflection from users "that Google uses as a new standard to measure the quality of the website. Its heart is easy: when the user does something on our website. He should see the response immediately.

Leaving the website with high inp is like ignoring the customer's voice. It destroys the whole experience, reliability, sales, and SEO ranking. Investment is effective for Optimize inp today, not just doing homework, sending Google, but is a strong foundation for your business in the long run. It shows respect for all users and feelings.

Do not wait for your website "delay" until losing more customers. Try using the checklist that I gave to check your website today. Or if wanting a helper to do Ecommerce Optimization Audit, it is a great starting point for searching and solving all in -depth problems. It's time to change every click of the user into an impression!

‍

Prompt for illustrations: inspiring images Show the arrow that rises from the mouse icon that clicks. Became a growing sales graph With the backdrop of a website that looks clean and fast

‍