Kritik Oluşturma Yolunu Ölçme

Ilya Grigorik
Ilya Grigorik
X Ana sayfa

Her sağlam performans stratejisinin temeli iyi ölçüm ve enstrümantasyondur. Ölçemediğiniz unsurları optimize edemezsiniz. Bu belgede, CRP performansını ölçmek için kullanılan farklı yaklaşımlar açıklanmaktadır.

  • Lighthouse yaklaşımı, bir sayfada bir dizi otomatik test çalıştırır ve ardından sayfanın CRP performansı hakkında bir rapor oluşturur. Bu yaklaşım, tarayıcınıza yüklenen belirli bir sayfanın CRP performansına hızlı ve kolay bir şekilde genel bakış sunarak sayfanın performansını hızlı bir şekilde test etmenize, yinelemenize ve iyileştirmenize olanak tanır.
  • Navigation Timing API yaklaşımı Gerçek Kullanıcı İzleme (RUM) metriklerini yakalar. Adından da anlaşılabileceği gibi, bu metrikler sitenizle gerçek kullanıcı etkileşimlerinden alınır ve kullanıcılarınızın çeşitli cihazlar ve ağ koşullarında yaşadığı deneyime göre gerçek dünyadaki CRP performansına yönelik doğru bir görünüm sağlar.

Genel olarak, belirgin CRP optimizasyon fırsatlarını belirlemek için Lighthouse'u kullanmak ve daha sonra uygulamanızın normalde nasıl performans gösterdiğini izlemek için kodunuzu Navigation Timing API ile kullanmak iyi bir yaklaşımdır.

Lighthouse ile bir sayfayı denetleme

Lighthouse, belirli bir sayfa üzerinde bir dizi test yürüten ve ardından, sayfanın sonuçlarını birleştirilmiş bir raporda gösteren bir web uygulaması denetleme aracıdır. Lighthouse'u bir Chrome Uzantısı veya NPM modülü olarak çalıştırabilirsiniz. Bu, Lighthouse'u sürekli entegrasyon sistemleriyle entegre etmek için kullanışlıdır.

Başlamak için Lighthouse ile Web Uygulamalarını Denetleme başlıklı makaleye bakın.

Lighthouse'u Chrome Uzantısı olarak çalıştırdığınızda, sayfanızın CRP sonuçları aşağıdaki ekran görüntüsüne benzer.

Lighthouse'un CRP denetimleri

Bu denetimin sonuçları hakkında daha fazla bilgi için Kritik İstek Zincirleri bölümüne bakın.

Gezinme Zamanlama API'si ile sayfa yüklenirken yayınlanan diğer tarayıcı etkinliklerinin kombinasyonu, herhangi bir sayfanın gerçek dünyadaki CRP performansını yakalamanıza ve kaydetmenize olanak tanır.

Navigation Timing

Yukarıdaki şemada bulunan etiketlerin her biri, tarayıcının yüklediği her sayfa için izlediği yüksek çözünürlüklü bir zaman damgasına karşılık gelir. Aslında, bu örnekte tüm farklı zaman damgalarının yalnızca bir kısmını gösteriyoruz. Şimdilik ağla ilgili tüm zaman damgalarını atlıyoruz, ancak bunlara gelecekteki bir derste tekrar bakacağız.

Peki bu zaman damgaları ne anlama geliyor?

  • domLoading: Bu, tüm işlemin başlangıç zaman damgasıdır. Tarayıcı, HTML belgesinin alınan ilk baytlarını ayrıştırmaya başlamak üzeredir.
  • domInteractive: Tarayıcının, HTML ve DOM oluşturma işleminin tamamını ayrıştırmayı tamamladığını işaret eder.
  • domContentLoaded: Hem DOM'un hazır olduğu hem de JavaScript'in yürütülmesini engelleyen stil sayfaları olmadığı zaman noktayı işaretler. Böylece, oluşturma ağacını artık (muhtemelen) oluşturabiliriz.
    • Birçok JavaScript çerçevesi, kendi mantığını yürütmeye başlamadan önce bu etkinliği bekler. Bu nedenle tarayıcı, bu yürütmenin ne kadar sürdüğünü izleyebilmemiz için EventStart ve EventEnd zaman damgalarını yakalar.
  • domComplete: Adından da anlaşılacağı gibi, tüm işlem tamamlanmış ve sayfadaki tüm kaynakların (resimler vb.) indirilmesi tamamlanmıştır. Başka bir deyişle, yükleme döner simgesi artık dönmemektedir.
  • loadEvent: Her sayfa yüklemesinde son adım olarak tarayıcı, ek uygulama mantığını tetikleyebilen bir onload etkinliği tetikler.

HTML spesifikasyonu her bir etkinlik için belirli koşulları (etkinliğin ne zaman tetiklenmesi, hangi koşulların yerine getirilmesi vb.) belirler. Bu amaç doğrultusunda kritik oluşturma yolu ile ilgili birkaç önemli ara hedefe odaklanacağız:

  • domInteractive, DOM hazır olduğunda işaretler.
  • domContentLoaded, genellikle hem DOM hem de CSSOM hazır olduğunda işaretler.
    • Ayrıştırıcı engelleyen bir JavaScript yoksa DOMContentLoaded, domInteractive öğesinden hemen sonra etkinleşir.
  • domComplete, sayfa ve tüm alt kaynakları hazır olduğunda işaretler.
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

Deneyin

Yukarıdaki örnek ilk bakışta biraz ürkütücü görünebilir, ancak gerçekte oldukça basittir. Gezinme Zamanlama API'si tüm alakalı zaman damgalarını yakalar ve kodumuz yalnızca onload etkinliğinin etkinleşmesini bekler. onload etkinliğinin domInteractive, domContentLoaded ve domComplete sonrasında tetikleneceğini unutmayın ve çeşitli zaman damgaları arasındaki farkı hesaplar.

Gezinme zamanlaması demosu

Şimdiye kadar izlenecek belirli ara hedefler ve bu ölçümleri elde etmek için basit bir işlevimiz var. Bu metrikleri sayfada yazdırmak yerine, kodu bir analiz sunucusuna (Google Analytics bunu otomatik olarak yapar) gönderecek şekilde değiştirebilirsiniz. Bu yöntem, sayfalarınızın performansını izlemek ve bazı optimizasyon çalışmalarından yararlanabilecek aday sayfaları belirlemek için harika bir yoldur.

Peki ya Geliştirici Araçları?

Bu dokümanlar bazen CRP kavramlarını göstermek için Chrome Geliştirici Araçları Ağ panelini kullansa da DevTools, kritik kaynakları izole etmek için yerleşik bir mekanizmaya sahip olmadığından şu anda CRP ölçümleri için uygun değildir. Bu tür kaynakları belirlemek için Lighthouse denetimi yapabilirsiniz.

Geri bildirim