Kritik Oluşturma Yolunu Ölçme

Ilya Grigorik
Ilya Grigorik
X Ana sayfa

Yayınlanma tarihi: 31 Mart 2014

Her sağlam performans stratejisinin temelinde iyi ölçüm ve enstrümantasyon yer alır. Ölçemediğiniz unsurları optimize edemezsiniz. Bu kılavuz CRP performansını ölçmeye yönelik farklı yaklaşımları açıklıyor.

  • Lighthouse yaklaşımı, bir sayfaya karşı bir dizi otomatik test yürütür. ardından sayfanın CRP performansıyla ilgili bir rapor oluşturur. Bu yaklaşım Bir kampanyanın CRP performansına hızlı ve temel düzeyde genel bakış sağlar. veya sayfayı hızlı bir şekilde test etmenize olanak tanır. tekrar tekrar uygulayabilir ve performansını artırabilir.
  • Navigation Timing API yaklaşımı Gerçek Kullanıcı İzleme (RUM) kullanabilirsiniz. Adından da anlaşılacağı gibi bu metrikler, sitenizle gerçek kullanıcı etkileşimlerinden alınır ve kullanıcılarınızın çeşitli cihaz ve ağ koşullarında deneyimlediği gerçek CRP performansını doğru bir şekilde gösterir.

Genel olarak, belirgin CRP'yi belirlemek için Lighthouse kullanmak iyi bir yaklaşımdır ve ardından kodu en uygun haliyle Gezinme zamanlaması API'si, uygulamanızın doğada nasıl performans gösterdiğini izleyin.

Lighthouse ile sayfaları denetleme

Lighthouse, belirli bir sayfaya karşı bir dizi test çalıştıran ve ardından sayfanın sonuçlarını birleştirilmiş bir raporda gösteren bir web uygulaması denetim aracıdır. Siz Chrome Uzantısı veya NPM modülü olarak çalışan Lighthouse'u kullanabilirsiniz. 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ı makaleyi okuyun.

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

Lighthouse'un CRP denetimleri

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

Gezinme Zamanlaması API'si ile sayfa yüklenirken yayınlanan diğer tarayıcı etkinliklerinin kombinasyonu, herhangi bir sayfanın gerçek CRP performansını yakalayıp kaydetmenize olanak tanır.

Navigation Timing

Önceki şemada yer alan 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 özel ö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 gelecekteki bir derste bunlara tekrar değineceğiz.

Peki bu zaman damgaları ne anlama geliyor?

  • domLoading: Bu, tüm sürecin başlangıç zaman damgası. Tarayıcı, HTML belgesinin ilk alınan baytlarını ayrıştırmaya başlayacaktır.
  • domInteractive: tarayıcının tüm öğeleri ayrıştırmayı bitirdiği noktayı işaretler tamamlanmış HTML ve DOM oluşturma işlemi tamamlandı.
  • domContentLoaded: Hem DOM'un hazır olduğu hem de JavaScript yürütmeyi engelleyen stil sayfası olmadığı noktayı işaret eder. Yani artık (potansiyel olarak) oluşturma ağacını oluşturabiliriz.
    • Birçok JavaScript çerçevesi, kendi mantığını yürütmeye başlamadan önce bu etkinliği bekler. Bu nedenle tarayıcı, yürütme işleminin ne kadar sürdüğünü izlememize olanak tanımak için EventStart ve EventEnd zaman damgalarını yakalar.
  • domComplete: Adından da anlaşılacağı gibi, tüm işlemler tamamlanmış ve sayfadaki tüm kaynaklar (resimler vb.) indirilmiştir. Diğer bir deyişle, yükleme simgesinin dönmesi durmuştur.
  • loadEvent: Her sayfa yüklemesinde son adım olarak, tarayıcı bir Ek uygulama mantığını tetikleyebilecek onload etkinliği.

HTML spesifikasyonu, her etkinlik için belirli koşulları belirler: etkinliğin ne zaman tetiklenmesi gerektiği, hangi koşulların karşılanması gerektiği ve diğer önemli hususlar. Amaçlarımız doğrultusunda kritik oluşturma yoluyla ilgili birkaç önemli ara hedefe odaklanacağız:

  • domInteractive, DOM'un hazır olduğunu gösterir.
  • domContentLoaded genellikle hem DOM hem de CSSOM hazır olduğunda işaretler.
    • JavaScript'i engelleyen bir ayrıştırıcı yoksa DOMContentLoaded, domInteractive sonrasında hemen etkinleşir.
  • domComplete, sayfanın ve tüm alt kaynaklarının hazır olduğunu 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

Önceki örnek ilk bakışta biraz göz korkutucu görünebilir ancak aslında oldukça basittir. Navigation Timing API ilgili tüm zaman damgalarını yakalar ve kodumuz onload etkinliğinin tetiklenmesini bekler. onload etkinliğinin domInteractive, domContentLoaded ve domComplete sonrasında etkinleşmesini bekler ve çeşitli zaman damgaları arasındaki farkı hesaplar.

NavTiming demosu

Tüm bunları tamamladıktan sonra, izlememiz gereken belirli aşamalar ve bu ölçümleri döndürecek temel bir işlevimiz olur. Bu metrikleri sayfaya yazdırmak yerine, kodu değiştirerek bu metrikleri bir analiz sunucusuna gönderebilirsiniz (Google Analytics bunu otomatik olarak yapar). Bu, sayfalarınızın performansını takip etmenin ve bazı optimizasyon çalışmalarından yararlanabilecek sayfa adayları belirlemenin mükemmel bir yoludur.

Geliştirici Araçları'na ne olacak?

Bu dokümanlar bazen aşağıdaki işlemler için Chrome Geliştirici Araçları Network panelini kullansa da: CRP kavramlarını göstermektedir. Geliştirici Araçları, CRP için uygun değildir. yerleşik bir sisteme sahip olmadığından ve çok önemli kaynakları nasıl kullanacağınızı öğrendiniz. Bir Lighthouse denetimi yaparak bu tür kaynakları belirlemenize yardımcı olur.

Geri bildirim