Buka panel jaringannya, muat ulang, dan pandangi BENTUKNYA sebelum membaca apa pun. Empat bentuk menutupi hampir setiap halaman yang lambat, dan masing-masing menunjuk ke tempat yang berbeda.

1. Satu batang panjang di atas, lalu semua yang lain

Dokumennya sendiri memakan sebagian besar waktunya. Itu waktu server, dan tak ada urusan gambar atau skrip yang akan mengubahnya. Pergilah mengukur waktu ke bita pertama.

2. Sebuah tangga

Setiap permintaan mulai ketika yang sebelumnya selesai. Ada yang baru ditemukan setelah hal lain termuat - sebuah lembar gaya yang mengimpor lembar gaya lain, atau sebuah skrip yang menyisipkan skrip. Tiap anak tangga adalah satu perjalanan pergi-pulang penuh.

<link rel="preload" href="/fonts/body.woff2" as="font" crossorigin>

3. Sebuah dinding, lalu ekor yang panjang

Semuanya mulai serentak dan sedikit di antaranya makan waktu jauh lebih lama. Yang sedikit itu biasanya milik pihak ketiga: skrip analitik, widget obrolan, sebuah fon dari domain lain. Server Anda baik-baik saja dan halamannya tetap tidak.

Skrip pihak ketiga di dalam head tanpa async atau defer menghambat perendaan menurut waktu tanggap server MEREKA. Gangguan mereka adalah halaman kosong Anda.

4. Jeda besar sebelum lukisan pertama

Bitanya sudah tiba dan tak ada yang digambar. CSS yang menghambat perendaan, atau sebuah fon yang menunggu ditukar. Lihat ukuran lembar gaya pertamanya dan nilai font-display.

@font-face { font-display: swap; }

Tiga kolom yang layak dibaca

  • Waiting (TTFB) - servernya sedang berpikir.
  • Content Download - bitanya sedang bergerak. Besar di sini berarti berkasnya terlalu besar.
  • Queueing / Stalled - menunggu sebuah sambungan. Besarnya angka ini pada HTTP/1.1 adalah alasan keberadaan HTTP/2.
Ujilah pada sambungan yang dicekik, bukan pada sambungan Anda sendiri. Di jalur meja yang cepat hampir semuanya tampak baik, sementara pengunjung Anda ada di ponsel.