Ağ panelini açın, sayfayı yeniden yükleyin ve hiçbir şey okumadan önce BİÇİME bakın. Dört biçim neredeyse her yavaş sayfayı kapsar ve her biri başka bir yeri gösterir.

1. Üstte uzun bir çubuk, sonra geri kalan her şey

Zamanın çoğunu belgenin kendisi almış. O sunucu zamanıdır ve görsellerle ya da betiklerle ilgili hiçbir şey onu değiştirmez. Gidip ilk bayta kadar geçen süreyi ölçün.

2. Bir merdiven

Her istek, bir öncekinin bittiği yerde başlıyor. Bir şey ancak başka bir şey yüklendikten sonra keşfediliyordur - bir stil sayfası bir başkasını içe aktarıyordur ya da bir betik başka bir betik ekliyordur. Her basamak, tam bir gidiş dönüştür.

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

3. Bir duvar, sonra uzun bir kuyruk

Her şey aynı anda başlar ve birkaçı çok daha uzun sürer. O birkaçı genelde üçüncü taraftır: bir ölçüm betiği, bir sohbet bileşeni, başka bir alan adından gelen bir yazı tipi. Sunucunuz iyidir, sayfa yine de değildir.

Head içinde async ya da defer taşımayan üçüncü taraf bir betik, ONLARIN sunucusunun yanıt süresine göre işlemeyi engeller. Onların kesintisi, sizin boş sayfanızdır.

4. İlk boyamadan önce büyük bir boşluk

Baytlar geldi ve hiçbir şey çizilmedi. İşlemeyi engelleyen CSS ya da değiştirilmeyi bekleyen bir yazı tipi. İlk stil sayfasının boyutuna ve font-display değerine bakın.

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

Okumaya değer üç sütun

  • Waiting (TTFB) - sunucu düşünüyor.
  • Content Download - baytların akışı. Buradaki büyüklük, dosyanın fazla büyük olduğu anlamına gelir.
  • Queueing / Stalled - bir bağlantının beklenmesi. HTTP/1.1 üzerinde buranın büyük olması, HTTP/2'nin var olma sebebidir.
Kendi bağlantınızda değil, kısıtlanmış bir bağlantıda deneyin. Hızlı bir masaüstü hattında neredeyse her şey iyi görünür, oysa ziyaretçileriniz telefondadır.