Teknologi Kinerja yang Sedang Berkembang
Temukan teknologi, standar, dan praktik terbaik kinerja web yang baru dan akan hadir agar Anda tetap unggul dalam pengoptimalan.
Teknologi Kinerja yang Sedang Berkembang adalah pelajaran Web Performance Optimization & Lighthouse gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Performance Optimization & Lighthouse, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Performance Optimization & Lighthouse mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Teknologi Kinerja yang Sedang Berkembang” gratis?
Ya — teks lengkap “Teknologi Kinerja yang Sedang Berkembang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Performance Optimization & Lighthouse, upgrade ke CoddyKit PRO. Kursus Web Performance Optimization & Lighthouse mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Teknologi Kinerja yang Sedang Berkembang”?
Temukan teknologi, standar, dan praktik terbaik kinerja web yang baru dan akan hadir agar Anda tetap unggul dalam pengoptimalan. Kamu berlatih Web Performance Optimization & Lighthouse dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Performance Optimization & Lighthouse?
Tidak diperlukan pengalaman sebelumnya. Web Performance Optimization & Lighthouse di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Teknologi Kinerja yang Sedang Berkembang” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Performance Optimization & Lighthouse ini?
Ya. Setiap pelajaran Web Performance Optimization & Lighthouse menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menetapkan Anggaran Kinerja
- Pemantauan dan Peringatan untuk Anggaran
- Teknologi Kinerja yang Sedang Berkembang
- Mengomunikasikan Performa kepada Pemangku Kepentingan