FluentStack

Uji Kompetensi Asset and Bundle Optimization

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 14: PerformanceAdvanced90 menitBahasa Indonesia

Uji Kompetensi Asset and Bundle Optimization

Checkpoint untuk memilih perbaikan image, font, dan JavaScript berdasarkan journey user serta trade-off yang dapat diuji.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Memilih image dan font pattern yang tepat untuk route
  • Menjelaskan biaya bundle dari feature client-side
  • Membedakan code splitting serta dynamic import yang beralasan
  • Menyusun rekomendasi optimasi dengan bukti dan trade-off
Asset OptimizationBundle AwarenessNext.jsDynamic ImportsReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: resource perlu hadir saat user membutuhkannyaBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Gunakan docs untuk mengoptimalkan satu route Next.js yang nyataBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: resource perlu hadir saat user membutuhkannya

Wajib

Image utama perlu stabil dan sesuai viewport; font perlu mendukung keterbacaan tanpa menjadi beban global yang tidak perlu; JavaScript client perlu dikirim berdasarkan kebutuhan journey. next/image, next/font, code splitting, dan import() adalah pattern, bukan target akhir. Gunakan pattern itu ketika ia mengurangi biaya yang benar-benar dapat dihindari tanpa merusak content, interaction, atau clarity user. Untuk setiap perubahan, catat baseline, alasan feature boleh ditunda atau perlu segera hadir, state yang user lihat saat menunggu, lalu ukur ulang pada route yang relevan.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Asset and Bundle Optimization

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Kapan hero image layak memakai preload pada route Next.js?

Coding practice

WajibDibuka di workspace khusus

Build optimized course page checkpoint

Susun route course yang memprioritaskan hero LCP dan memisahkan panel insight non-kritis sampai learner membutuhkannya.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

12 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis optimization note untuk route course mobile dengan kondisi berikut: hero image menjadi kandidat LCP, root layout memuat tiga font family tetapi hanya satu yang dipakai, dan route awal ikut membawa chart insight serta library pencarian yang baru dipakai setelah action user. Sebutkan prioritas perubahan, alasan image atau font perlu diubah, feature mana yang dapat dipisahkan atau dimuat on-demand, feedback UI yang diperlukan, bukti yang akan dibandingkan sebelum dan sesudah, serta satu trade-off yang tetap kamu pertimbangkan.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/600 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Gunakan docs untuk mengoptimalkan satu route Next.js yang nyata

Buka dokumentasi sesuai resource yang benar-benar kamu ubah. Gunakan satu route local atau deployed, catat baseline, lakukan satu perubahan, lalu bandingkan outcome. FluentStack membaca struktur exercise, bukan menjalankan build atau dependency project lokalmu.

Next.js

Image Component

Fokus baca

  • Dimensi, sizes, dan preload image berdasarkan posisi serta peran di viewport.
  • Image local, remote, dan layout stability.
  • Kapan default lazy loading lebih tepat daripada memprioritaskan resource.

Abaikan dulu

  • Custom image loader dan CDN architecture.
  • Advanced remote image security configuration di luar kebutuhan route-mu.
Buka dokumentasi

Next.js

Font Module

Fokus baca

  • next/font untuk font Google atau local.
  • Subset, display, fallback, dan pemakaian font yang sesuai scope.
  • Menghindari resource font yang tidak dibutuhkan route.

Abaikan dulu

  • Advanced font subsetting pipeline.
  • Menambah banyak family atau variable font tanpa review pemakaian.
Buka dokumentasi

Next.js

Lazy Loading

Fokus baca

  • next/dynamic untuk Client Component dan library yang non-kritis.
  • Loading UI saat code dipisahkan.
  • Batas antara route awal dan feature yang dipicu action user.

Abaikan dulu

  • Manual chunk strategy dan webpack internals.
  • Mematikan SSR tanpa alasan product atau browser API yang jelas.
Buka dokumentasi

Aksi setelah membaca

Di Local Next.js App, pilih satu page yang memiliki image atau feature client-side. Catat baseline, ganti satu pattern image atau font bila relevan, atau pisahkan satu feature non-kritis dengan loading state. Jalankan production build dan coba journey user terkait sebelum menulis apa yang berubah, apa yang belum pasti, dan trade-off yang kamu terima.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Optimasi asset dan bundle dimulai dari journey user serta resource yang benar-benar dapat dihindari pada initial route.
  • Image, font, dan JavaScript membutuhkan keputusan berbeda tentang ruang, prioritas, scope, serta waktu pemuatan.
  • Code splitting dan dynamic import harus menjaga loading state serta behavior feature.
  • Bandingkan baseline dan hasil perubahan; jangan menerima atau menolak pattern berdasarkan score saja.
  • Kamu siap melanjutkan ke Rendering Cost and Hydration untuk memeriksa biaya browser setelah UI sampai ke halaman.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: resource perlu hadir saat user membutuhkannya.

Memuat progresReview module