1. Render awal : berapa lama bagi pengguna untuk melihat setidaknya sesuatu
   
   • Kurangi rendering permintaan pemblokiran
     
   • Hindari rantai berurutan
     
   • Gunakan kembali koneksi server
     
   • Pekerja Layanan untuk Rendering Instan
2. : ,
   
   • . .
     
   • ,
     
   • 
     
   • 
     
3. :
   
   • ,
     

Kurangi rendering permintaan pemblokiran

• Pindahkan tag skrip ke bagian bawah tubuh
  
• Unduh skrip dalam mode asinkron menggunakan async
  
• Jika JS atau CSS harus dimuat secara berurutan, lebih baik untuk menyematkannya dengan potongan kecil

Hindari percakapan dengan permintaan berurutan yang memblokir perenderan

• Aturan @importCSS
  
• Font web direferensikan oleh file CSS
  
• JavaScript atau tag skrip yang dapat diunduh

1. Dokumen HTML
   
2. Aplikasi CSS
   
3. CSS untuk Google Font
   
4. File Font Google Woff (tidak ditampilkan dalam diagram)

Menggunakan kembali koneksi server untuk mempercepat permintaan

1. Pencarian DNS
   
2. Membangun Koneksi TCP
   
3. Buat Koneksi SSL

Kurangi ukuran file dan gunakan CDN

Hilangkan latensi jaringan dengan pekerja layanan

self.addEventListener("install", async e => {
 caches.open("v1").then(function (cache) {
   return cache.addAll(["/app", "/app.css"]);
 });
});

self.addEventListener("fetch", event => {
 event.respondWith(
   caches.match(event.request).then(cachedResponse => {
     return cachedResponse || fetch(event.request);
   })
 );
});

Unduh aplikasi

1. Unduh kode aplikasi (JS dan CSS)
   
2. Unduh data yang diperlukan untuk halaman tersebut
   
3. Unduh data dan gambar tambahan

Unduh hanya kode yang diperlukan dan maksimalkan jumlah klik dalam cache

• Kode untuk halaman tertentu (khusus halaman)
  
• Kode aplikasi umum
  
• Modul pihak ketiga yang jarang berubah (bagus untuk caching!)

Memuat data untuk satu halaman

Jangan menunggu unduhan penuh paket sebelum Anda mulai mengunduh data

1. Sematkan data dalam dokumen HTML
   
2. Jalankan permintaan data menggunakan skrip bawaan di dalam dokumen

window.userDataPromise = fetch("/me")

Jangan blokir rendering sambil menunggu data yang tidak relevan

Hindari Permintaan Data Berturut-turut

Render sisi server

Halaman selanjutnya

Preloading sumber daya

import(
    /* webpackPrefetch: true, webpackChunkName: "todo-list" */ "./TodoList"
)

Penggunaan kembali data yang sudah diunduh

Kesimpulan