Speculation Rules API: The technology behind the web loads immediately.

The website is too late for a second ... half of the customers disappear? The real problem in an age that no one likes to wait.

Have you ever been? Click the link into an interesting webpage. But instead had to sit and stare at the white screen that was spinning, waiting for the website to download ... 1 second ... 2 seconds ... 3 seconds ... the excitement gradually Became irritated and finally "better to close". This is the nightmare of all the website people and business owners. We are dedicated to both money and time to do SEO, shooting, creating good content. To pull people in But instead had to fall to the horse to die only because of "slowness" for just a few seconds Customers who should become Lead or sales. Press the Back button. Unfortunately. Although we try to improve the website as soon as possible Both compressed images Or adjust the code, but "gap" during clicking and display It still exists.

Prompt for illustrations: Comparison images of 2 users, one is sitting watching hourglass on the computer screen with boredom. Another person is smiling and using a website that loaded quickly after clicking.

Why is the website that says so fast ... still have to let us wait? Unlock the secret behind the web load.

The source of this problem comes from the nature of the browser's work. Basically The browser will work like "Reactive" only, it will not know which page you are going until you really "click". Click. Once clicking, these processes will start: 1. Send a request to the server. 2. Send the HTML file back. Processing and "draw" the web page one by one All of which takes time Regardless of how strong the server you are Or how fast the internet is the internet This "standard process" is still a bottleneck that causes delay. It's like ordering food at the shop. You have to order first The chef started to do Would it be better if the chef "guess the heart", you then start preparing the raw materials in advance before you even order?

Prompt for illustrations: simple infographic Show the normal web loading process (User Clicks -> Request -> Server -> Download Resources -> Render) with a watch symbol that each step is to convey the time.

Let the website continue to be slow? A terrifying impact than just losing customers

Letting this problem remain Not just causing the user to become frustrated But it affects Domino's business in a long -term long -term:

• Conversion Rate, plummeted: every second that loads slower Is the lost sales opportunity Customers lose patience before reaching the payment page or filling out the form.
• Bookce Rate rushed high: The user came in and pressed immediately. It is a bad signal sent to Google that your website is not quality enough. Which directly affects SEO
• Core Web Vitals is miserable: slow down loading the next page. Affecting the interactive to Next Paint (Inp), one of the most important metrics that Google uses the website to improve the inp , so it is unusual.
• The reliability of the brand decreases: the web that is slow and bad experience. Makes the brand look not professional and unreliable in the eyes of users
• Disadvantaged race: while you still let the website slow Competitors that provide experiences that faster than just a second May already grab all your customers

All of this is an invisible cost that is biting and growing your business every day.

Prompt for illustrations: The graph on one side shows the "Page Load Time" that is increasing. And the other side shows "Conversion Rate" and "User Satisfaction" that is reduced to the opposite direction.

Would it be better if the "knowing" website that we would click? Meet Speculation Rules API

What will happen if the browser is smart enough to "guess" the next action of the user? Instead of waiting, click and then download. Instead, it began to load the next page "advance" quietly behind the scenes. This is the concept of the latest technology from Google called Speculation Rules API . It is the "magic" that makes your website down to almost immediately after clicking!

Speculation Rules API is a way for us to write "rules" in a simple code. To tell the browser that "Which page" that the user should continue to go with the most 2 main strategies:

• Prefetch: Ordering the browser "Download resources" of the next page to wait, such as HTML, CSS, JS files, but still do not display.
• PRENDER: This is the best! Ordered the browser "Loads and rendering", the next webpage in the background When the user really clicks Just switch to show that face immediately Like opening an app on mobile This is the most powerful starting point for creating a fastest web experience. And help solve the problem Render-Blocking Resources for the next page perfectly.

The beginning of the Speculation Rules API is to change the concept of making a "setting" website to a "proactive" website that is ready to provide speed to users before they even request.

Prompt for illustrations: The first 2 types of dynamo images are "Normal" that is waiting to click and then download. The second is the "Speculation Rules" with the web page B waiting in the background. And when the user clicks Switch to display immediately

"The news website is 30%faster." Real cases from the giants that use Speculation Rules API.

This is not just the theory on paper. But the world -class company has applied the SPECULATION RULES API and has seen the amazing results. The famous French news website like Le Figaro has tried this technology. They set the rules for the browser to make a phender, link, news article that users are most interested in. The result is the Largest Contentful Paint (LCP) or the speed of loading the main content of the next page ** up to 30%**! Allowing readers to have continuous and smooth experience like never before

Likewise, Realtor.com, a large real estate website that uses the Peppernder with the house details page. The result is the speed of loading their most important duties. ** Significantly improved ** This is a proof that Speculation Rules API is not just a toy for developers. But is a powerful business tool That can clearly create competitive advantages You can read more about this technique from the Chrome for Developers blog .

Prompt for illustrations: Images with success of the company (May be a fictional logo) with a remarkable result of "+30% Faster Page Load" or "Instant Navigation"

What do you want to do? Teaching use Speculation Rules API. Copy-Paste!)!

The good news is to use Speculation Rules API is much easier than you think. You don't have to be a deity programmer. Follow the following steps:

Step 1: Specify the target link that is highly likely.
Think about it on your website. Where is the most likely the most chance of clicking? such as

• Link "Read the next article" on the blog page
• Link "See product details" from the category
• Button "to the payment page" from the cart

Step 2: Create a Speculation Rules rule in the form of JSON.
We will create a simple code. To tell the browser what to do with those links

Example 1: Set as a link (List Rules)
. When we know exactly which page you want


{
"Peprender": [
{
"Source": "List",
"URLS": ["/Blog/Next-Gen-for-formats", "/About-Us"]
}
]
}


Sample 2: Defined according to the Document Rules,
used to affect every link that has the format that we specify, such as every link on the blog.


{
"Peprender": [
{
"Source": "Document",
"Where": {
"href_matches": "/Blog/*"
},
"Eagerness": "Moderate"
}
]
}


*`Eagerness` is to determine how fast to work. There is a value` `Imediate`,` Eager`, `Moderate`,` Conservative`

Step 3: Put the code on your website.
Bring the JSON code that was created in the tag.

‍