Emerging Performance Technologies
Discover new and upcoming web performance technologies, standards, and best practices to stay ahead in optimization.
Emerging Performance Technologies is a free Web Performance Optimization & Lighthouse lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Performance Optimization & Lighthouse learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Diving into Future Perf Tech
The web is always evolving! To stay ahead, it's crucial to understand new performance technologies and standards.
This lesson explores exciting advancements that are shaping the future of web optimization.
The Edge of Innovation
Keeping up with emerging tech helps you:
- Gain a competitive edge: Deliver faster, smoother experiences.
- Improve user satisfaction: Meet rising user expectations.
- Future-proof your skills: Adapt to new browser capabilities and best practices.
Interactions to Next Paint (INP)
Interactions to Next Paint (INP) is a new Core Web Vital that measures a page's responsiveness to user interactions.
It looks at the delay from when a user interacts (click, tap, keypress) until the browser visually updates the page.
A low INP score means a page is highly responsive.
Boosting INP Responsiveness
Improving INP often involves:
- Minimizing main thread work: Avoid long-running JavaScript tasks.
- Debouncing/Throttling: Limit how often event handlers run.
- Using
requestAnimationFrame: For visual updates, schedule them efficiently.
Example:
function handleScroll() {
// Perform visual updates here
}
window.addEventListener('scroll', () => {
requestAnimationFrame(handleScroll);
});function handleScroll() {
// Perform visual updates here
}
window.addEventListener('scroll', () => {
requestAnimationFrame(handleScroll);
});Speeding Up with Early Hints
Early Hints (HTTP 103) is a new HTTP status code that allows servers to send hints about critical subresources (like CSS, JS, fonts) before the main HTML response is ready.
This lets browsers start fetching resources sooner, reducing perceived load time and improving First Contentful Paint.
Proactive Browsing with Speculation Rules
The Speculation Rules API empowers developers to tell the browser which pages the user is likely to visit next.
The browser can then prefetch or even prerender those pages in the background, making navigation feel instant when the user actually clicks.
It's a powerful tool for optimizing multi-page user journeys.
Speculation Rules in Action
You define speculation rules using a <script type="speculationrules"> tag in your HTML:
<script type="speculationrules">
{
"prerender": [
{ "source": "list", "urls": ["/next-page.html", "/product-details.html"] }
]
}
</script>This tells the browser to prerender `/next-page.html` and `/product-details.html` when appropriate.
<script type="speculationrules">
{
"prerender": [
{ "source": "list", "urls": ["/next-page.html", "/product-details.html"] }
]
}
</script>WebAssembly for Raw Speed
WebAssembly (Wasm) is a low-level bytecode format that allows code written in languages like C++, Rust, or Go to run on the web at near-native speeds.
It's ideal for performance-critical tasks that JavaScript might struggle with, such as:
- Heavy computations
- Game engines
- Video processing
Smooth UI with View Transitions
The View Transitions API helps create smooth, animated transitions between different states of a web page without complex manual JavaScript.
It takes a snapshot of the old view, updates the DOM, and then animates between the old and new snapshots.
This dramatically improves the perceived performance and user experience during single-page application (SPA) navigation.
Emerging Tech Knowledge
Which of the following emerging technologies helps browsers proactively fetch or render future pages, potentially making navigation feel instant?
Recap: Staying Ahead
We explored several key emerging web performance technologies:
- INP: Measuring interaction responsiveness.
- Early Hints: Faster resource loading.
- Speculation Rules: Proactive page loading.
- WebAssembly: Near-native performance for heavy tasks.
- View Transitions: Smooth UI animations.
Staying informed about these advancements is key to building cutting-edge, high-performance web experiences.
Frequently asked questions
Is the “Emerging Performance Technologies” lesson free?
Yes — the full text of “Emerging Performance Technologies” is free to read here on the web, and the Web Performance Optimization & Lighthouse course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Performance Optimization & Lighthouse course, upgrade to CoddyKit PRO.
What will I learn in “Emerging Performance Technologies”?
Discover new and upcoming web performance technologies, standards, and best practices to stay ahead in optimization. You practise Web Performance Optimization & Lighthouse with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Performance Optimization & Lighthouse?
No prior experience is required. Web Performance Optimization & Lighthouse on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Emerging Performance Technologies” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Performance Optimization & Lighthouse lesson?
Yes. Every Web Performance Optimization & Lighthouse lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Setting Performance Budgets
- Monitoring and Alerting for Budgets
- Emerging Performance Technologies
- Communicating Performance to Stakeholders