.png)
Introduction
The Smart Loading app allows you to significantly improve your website's perceived performance by preloading resources and pages.
It is based on two complementary features:
- Early Hints: to preload critical resources
- Speculation Rules: Anticipating User Navigation
👉 Goal: to provide a smoother experience, with pages that load faster… and feel instantaneous.
What is the difference between Early Hints and Speculation Rules?
These two features serve the same purpose, but operate at different levels:
- Early Signs
- Preloads resources (CSS, JS, images, fonts)
- Improves the page's initial display
- Speculation Rules
- Anticipates user navigation
- Preload or pre-fetch pages that are likely to be visited
💡 In summary:
Early Hints speeds up page loading,
Speculation Rules speeds up navigation between pages
How does Early Hints work?
Early Hints allows you to instruct the browser to load certain critical resources in advance, even before the HTML page has been fully parsed.
Relevant resources
You can enable preloading for:
- JavaScript scripts
- Cascading Style Sheets (CSS)
- Images
- Fonts
Why does it work?
This allows you to:
- Reduce the initial display time
- Speed up page rendering
- Improve key metrics:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Speed Index
💡 Good to know
The gains are often greater with CSS, followed by fonts.
⚠️ Warning
In some cases, preloading images can be counterproductive.
It is recommended that you test it before rolling it out to all users.
How do I enable Early Hints in the console?
From the Smart Loading app:
- Enable the Early Hints feature
- Select the types of resources to preload:
- Script
- Style
- Image
- Fonts
👉 You can fine-tune your configuration to suit your site and your priorities.
How does Speculation Rules work?
Speculation Rules helpsanticipate user actions by preloading or pre-rendering certain pages.
There are two possible scenarios:
- Prefetch→ The page loads in the background
- Pre-rendered (prerender)→ The page is fully prepared and ready to be displayed instantly
💡 Real-life example
A user visits an e-commerce category page:
Product pages can be preloaded to speed up navigation.
How can I easily set up Speculation Rules?
The configuration is based on three key options, which can be accessed directly in the console.
Insert the script
Enables or disables the automatic insertion of rules into your HTML pages.
- ✅ Recommended: enabled
- Allows you to easily enable the feature without any technical integration
Preload only from the cache
Allows you to limit preloading to pages already available in the cache.
- ✅ Recommended: enabled
- Avoid generating unnecessary traffic
- Protects your infrastructure
Pre-rendered from the cache only
Same principle, but applied to pre-rendering (which is more resource-intensive).
- ✅ Recommended: enabled
- Prevents server overload
- Ensures controlled performance
💡 Why are these options important?
They allow you to benefit from performance gains without risking an increase in server load.
Best practices for avoiding unintended consequences
To get the most out of Smart Loading:
- Enable features gradually
- Keep the "from cache" options enabled
- See how it affects your performance
- Adjust based on your users' actual behavior
Conclusion
The Smart Loading app is a powerful tool for improving your website's performance:
- Early Hints speeds up the loading of critical resources
- Speculation Rules makes navigating between pages smoother
By combining the two, you can provide a faster, smoother, and more enjoyable user experience.
👉 Start by enabling these features on a target such as a page type, then adjust based on your results.