Önemli 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 bulunur. Ölçemediğiniz unsurları optimize edemezsiniz. Bu kılavuzda, kritik oluşturma yolu (CRP) performansını ölçmeye yönelik farklı yaklaşımlar açıklanmaktadır.

  • Lighthouse yaklaşımı, bir sayfaya karşı 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ızda yüklenen belirli bir sayfanın CRP performansına dair hızlı ve temel bir üst düzey genel bakış sunarak 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şılacağı gibi bu metrikler, kullanıcıların sitenizle etkileşimlerinden elde edilir ve çeşitli cihazlar ile ağ koşullarında kullanıcılarınızın deneyimlediği şekilde, gerçek dünyadaki CRP performansı hakkında doğru bir görünüm sunar.

Genel olarak, Lighthouse'u kullanarak belirgin CRP optimizasyon fırsatlarını belirlemek ve ardından uygulamanızın gerçek hayattaki performansını izlemek için kodunuza Navigation Timing API'yi eklemek iyi bir yaklaşımdır.

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örüntüleyen bir web uygulaması denetleme aracıdır. Lighthouse'u 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 Auditing Web Apps With Lighthouse (Lighthouse ile Web Uygulamalarını Denetleme) başlıklı makaleyi okuyun.

Lighthouse'u Chrome uzantısı olarak çalıştırdığınızda sayfanızın CRP sonuçları benzer olmalı ve tarayıcı tarafından yüklenen zincir süreleri ile dosya sırası listelenmelidir.

Navigation Timing API ile sayfa yüklenirken yayınlanan diğer tarayıcı etkinliklerinin birleşimi, herhangi bir sayfanın gerçek dünyadaki CRP performansını yakalamanıza ve kaydetmenize olanak tanır.

Şemadaki 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. Bu şemada, ağla ilgili tüm zaman damgaları atlanır.

Peki bu zaman damgaları ne anlama geliyor?

  • domLoading: Bu, tüm sürecin 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'nin tamamını ayrıştırmayı bitirdiği ve DOM oluşturma işleminin tamamlandığı noktayı işaretler.
  • domContentLoaded: Hem DOM'un hazır olduğu hem de JavaScript'in yürütülmesini engelleyen stil sayfalarının olmadığı noktayı işaretler. Bu, artık oluşturma ağacını (potansiyel olarak) oluşturabileceğimiz anlamına gelir.
    • Birçok JavaScript çerçevesi, kendi mantığını yürütmeye başlamadan önce bu etkinliğin gerçekleşmesini bekler. Bu nedenle, tarayıcı bu yürütmenin ne kadar sürdüğünü takip edebilmemiz için EventStart ve EventEnd zaman damgalarını yakalar.
  • domComplete: Adından da anlaşılacağı gibi, tüm işleme tamamlanmıştır ve sayfadaki tüm kaynakların (resimler vb.) indirilmesi bitmiştir. Diğer bir deyişle, yükleme animasyonu dönmeyi durdurmuştur.
  • loadEvent: Tarayıcı, her sayfa yüklemesinin son adımında ek uygulama mantığını tetikleyebilecek bir onload etkinliği başlatır.

HTML spesifikasyonu, her etkinlik için belirli koşullar belirler: ne zaman tetiklenmesi gerektiği, hangi koşulların karşılanması gerektiği ve diğer önemli hususlar

Bu kılavuzda, CRP ile ilgili birkaç önemli aşamaya odaklanıyoruz:

  • domInteractive, DOM'un hazır olduğunu gösterir.
  • domContentLoaded genellikle hem DOM hem de CSSOM hazır olduğunda işaretlenir.
    • Ayrıştırıcıyı engelleyen JavaScript yoksa DOMContentLoaded, domInteractive'den hemen sonra tetiklenir.
  • domComplete, sayfa ve tüm alt kaynakları hazır olduğunda işaretlenir.
<!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

Bu örnekte, Gezinme Zamanlama API'si ilgili tüm zaman damgalarını yakalar. Kodumuz, onload etkinliğinin tetiklenmesini bekler. Bu etkinlik, domInteractive, domContentLoaded ve domComplete etkinliklerinden sonra tetiklenir. Ardından, çeşitli zaman damgaları arasındaki farkı hesaplar.

Artık izlenecek belirli kilometre taşlarımız ve bu ölçümleri çıktı olarak verecek temel bir işlevimiz var. Bu kodu, sonuçları yazdırmak yerine bu metrikleri bir analiz sunucusuna gönderecek şekilde değiştirebilirsiniz. Ardından sayfa performansınızı takip edebilir ve optimizasyondan yararlanabilecek sayfaları belirleyebilirsiniz.

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

Bu belgelerde bazen CRP kavramlarını açıklamak için Chrome Geliştirici Araçları Ağ paneli kullanılsa da Geliştirici Araçları, kritik kaynakları yalıtmak için yerleşik bir mekanizmaya sahip olmadığından CRP ölçümleri için uygun değildir. Bu tür kaynakları belirlemek için Lighthouse denetimi çalıştırın.