Kritik Oluşturma Yolunu Ölçme

Ilya Grigorik

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ılavuzda, CRP performansını ölçmeye yönelik farklı yaklaşımlar açıklanmaktadır.

• Lighthouse yaklaşımı, bir sayfa üzerinde bir dizi otomatik test çalıştırır ve ardından sayfanın CRP performansıyla ilgili bir rapor oluşturur. Bu yaklaşım, tarayıcınıza yüklenen belirli bir sayfanın CRP performansına hızlı ve temel düzeyde genel bir bakış sunar. Böylece sayfanın performansını hızlı bir şekilde test edebilir, yineleyebilir ve iyileştirebilirsiniz.
• Navigation Timing API yaklaşımı, gerçek kullanıcı izleme (RUM) metriklerini yakalar. 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, bariz CRP optimizasyon fırsatlarını belirlemek için Lighthouse'ı kullanmak ve ardından uygulamanızın gerçek dünyadaki performansını izlemek için kodunuzu Navigation Timing API ile donatmak iyi bir yaklaşımdır.

Lighthouse ile sayfaları denetleme

Lighthouse, belirli bir sayfa üzerinde 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. Lighthouse'ı Chrome uzantısı veya NPM modülü olarak çalıştırabilirsiniz. Bu, Lighthouse'ı 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.

Bu denetimin sonuçları hakkında daha fazla bilgi için Kritik İstek Zincirleri başlıklı makaleyi inceleyin.

Kodunuzu Navigation Timing API ile donatma

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.

Ö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 durumda, tüm farklı zaman damgalarının yalnızca bir kısmını gösteriyoruz. Şu anda ağla ilgili tüm zaman damgalarını atlıyoruz ancak bunlara gelecek bir derste 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ı, HTML'nin tamamını ayrıştırmayı bitirdiğinde ve DOM oluşturma işlemi tamamlandığında bu noktayı işaret eder.
• 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ıklarını yürütmeye başlamadan önce bu etkinliği 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şlemler tamamlanmış ve sayfadaki tüm kaynaklar (resimler vb.) indirilmiştir. Diğer bir deyişle, yükleme simgesinin dönmesi durmuştur.
• loadEvent: Tarayıcı, her sayfa yükleme işleminin son adımı olarak ek uygulama mantığını tetikleyebilecek bir onload etkinliği tetikler.

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. Amacımız doğrultusunda, kritik oluşturma yoluyla ilgili birkaç önemli aşamaya odaklanacağız:

• domInteractive, DOM'un hazır olduğunu gösterir.
• domContentLoaded genellikle hem DOM hem de CSSOM'un hazır olduğu zamanı işaret eder.
  • JavaScript'i engelleyen bir ayrıştırıcı yoksa DOMContentLoaded, domInteractive'ten hemen sonra tetiklenir.
• domComplete, sayfanın ve tüm alt kaynaklarının hazır olduğunu gösterir.

<!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. Gezinme Zamanlama API'si tüm ilgili zaman damgalarını yakalar ve kodumuz onload etkinliğinin tetiklenmesini bekler (onload etkinliğinin domInteractive, domContentLoaded ve domComplete'den sonra tetiklendiğini unutmayın) ve çeşitli zaman damgalarının arasındaki farkı hesaplar.

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ı'nda ne olur?

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

Geri bildirim