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ı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.
  • Gezinme Zamanlama API yaklaşımı, Gerçek Kullanıcı İzleme (RUM) metriklerini yakalar. Adından da anlaşılacağı gibi, bu metrikler, sitenizle kurulan gerçek kullanıcı etkileşimlerinden elde edilir ve kullanıcıların çeşitli cihazlar ve ağ koşullarında deneyimlediği gerçek CRP performansına dair doğru bir görünüm sağlar.

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

Lighthouse ile sayfaları denetleme

Lighthouse, belirli bir sayfada bir dizi test yürüten ve sayfanın sonuçlarını birleştirilmiş bir raporda gösteren bir web uygulaması denetleme 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.

Lighthouse'ın CRP denetimleri

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

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 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 işlemin başlangıç zaman damgasıdır. Tarayıcı, HTML belgesinin alınan ilk baytını ayrıştırmaya başlamak üzeredir.
  • domInteractive: tarayıcının tüm HTML ve DOM oluşturma işlemlerini ayrıştırmayı bitirdiği noktayı işaretler.
  • 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ı, 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 sona ermiştir.
  • 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. Amaçlarımız doğrultusunda kritik oluşturma yoluyla ilgili birkaç önemli ara hedefe odaklanacağız:

  • domInteractive, DOM hazır olduğunda işaretleyin.
  • 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 ifadesinden hemen sonra 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. 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.

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ı'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ı izole etmek 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