AutoWebPerf ile denetimleri otomatikleştirme

Birden fazla kaynaktan performans verilerinin otomatik olarak toplanmasını sağlayan yeni bir modüler araç.

AutoWebPerf (AWP), performans verilerinin birden fazla kaynaktan otomatik olarak toplanmasını sağlayan modüler bir araçtır. Şu anda Chrome Kullanıcı Deneyimi Raporu, PageSpeed Insights veya WebPageTest gibi farklı kapsamlar (laboratuvar ve saha) için web sitesi performansını ölçmek üzere birçok araç mevcuttur. AWP, site performansını tek bir yerden sürekli olarak izleyebilmeniz için basit bir kurulumla çeşitli denetim araçlarıyla entegrasyon sunar.

Web Vitals yönergelerinin yayınlanması, web sayfalarının yakından ve etkin bir şekilde izlenmesi gerektiğinin giderek daha fazla anlaşıldığı anlamına geliyor. Bu aracın arkasındaki mühendisler yıllardır performans denetimleri yapıyor ve günlük etkinliklerinin manuel, yinelenen ve zaman alıcı bir bölümünü otomatikleştirmek için AWP'yi oluşturdular. AWP, günümüzde oldukça gelişmiş bir seviyeye ulaştı ve sağladığı otomasyondan herkesin yararlanabilmesi için geniş çapta paylaşılmaya hazır.

Araca GitHub'daki AutoWebPerf herkese açık deposundan erişebilirsiniz.

AWP ne için kullanılır?

Web sayfalarının performansını izlemek için çeşitli araçlar ve API'ler mevcut olsa da bunların çoğu belirli bir zamanda ölçülen verileri gösterir. Bir web sitesini gerektiği gibi izlemek ve önemli sayfaların performansını iyi durumda tutmak için zaman içinde Core Web Vitals ölçümlerini sürekli olarak almak ve trendleri gözlemlemek önerilir.

AWP, çeşitli performans izleme API'lerine yapılan tekrarlanan sorguları otomatikleştirmek için programatik olarak yapılandırılabilen bir motor ve önceden oluşturulmuş API entegrasyonları sağlayarak bu işlemi kolaylaştırır.

Örneğin, AWP ile ana sayfanızda günlük bir test ayarlayarak CrUX API'deki alan verilerini ve PageSpeed Insights'taki Lighthouse raporundan laboratuvar verilerini yakalayabilirsiniz. Bu veriler zaman içinde yazılabilir ve depolanabilir (ör. Google E-Tablolar'da) ve ardından Data Studio kontrol panelinde görselleştirilebilir. AWP, tüm sürecin en zor kısmını otomatikleştirerek zaman içinde laboratuvar ve saha trendlerini takip etmek için mükemmel bir çözüm sunar. Daha fazla bilgi için aşağıdaki Data Studio'da denetleme sonuçlarını görselleştirme bölümüne bakın.

Mimariye genel bakış

AWP, üç farklı modül türüne sahip modüler tabanlı bir kitaplıktır:

  • motor
  • konnektör modülleri
  • gatherer modülleri

Motor, bir bağlayıcıdan (ör. yerel bir CSV dosyasından) testlerin listesini alır, performans denetimlerini seçili toplayıcılar (ör. PageSpeed Insights) aracılığıyla çalıştırır ve sonuçları çıkış bağlayıcısına (ör. Google E-Tablolar) yazar.

AWP'nin mimarisini gösteren şema.

AWP, önceden uygulanmış bir dizi toplayıcı ve bağlayıcı içerir:

AWP ile denetimleri otomatikleştirme

AWP, PageSpeed Insights, WebPageTest veya CrUX API gibi tercih ettiğiniz denetim platformları aracılığıyla performans denetimlerini otomatikleştirir. AWP, test listesinin nereye yükleneceğini ve sonuçların nereye yazılacağını seçme esnekliği sunar.

Örneğin, bir Google E-Tablosu'nda depolanan testlerin listesi için denetleme çalıştırabilir ve aşağıdaki komutu kullanarak sonuçları bir CSV dosyasına yazabilirsiniz:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Yinelenen denetimler

Yinelenen denetimleri günlük, haftalık veya aylık olarak çalıştırabilirsiniz. Örneğin, yerel bir JSON'da tanımlanan testlerin listesi için aşağıdaki gibi günlük denetimler çalıştırabilirsiniz:

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

Aşağıdaki komut, yerel JSON dosyasından denetleme testlerinin listesini okur, denetlemeleri yerel bir makinede çalıştırır ve sonuçları yerel bir CSV dosyasına gönderir:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Denetimleri arka plan hizmeti olarak her gün sürekli olarak çalıştırmak için aşağıdaki komutu kullanabilirsiniz:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

Alternatif olarak, AWP'yi günlük cron işi olarak çalıştırmak için Unix benzeri bir ortamda crontab ayarlayabilirsiniz:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Günlük denetimleri ve sonuç toplamayı otomatikleştirmenin diğer yollarını AWP GitHub deposunda bulabilirsiniz.

Denetleme sonuçlarını Data Studio'da görselleştirme

Core Web Vitals'ı sürekli olarak ölçmenin yanı sıra, AWP tarafından toplanan gerçek kullanıcı metrikleri (RUM) veya Chrome Kullanıcı Deneyimi Raporu (CrUX) verilerini kullanarak trendleri değerlendirip olası gerileme noktalarını tespit edebilmek de önemlidir. Chrome UX Report'un (CrUX) 28 günlük hareketli bir toplama olduğunu unutmayın. Bu nedenle, gerilemelerin daha erken tespit edilebilmesi için CrUX ile birlikte kendi RUM verilerinizi de kullanmanız önerilir.

Data Studio, performans metriklerini kolayca yükleyebileceğiniz ve trendleri grafik olarak çizebileceğiniz ücretsiz bir görselleştirme aracıdır. Örneğin, aşağıdaki zaman serisi grafikleri Chrome Kullanıcı Deneyimi Raporu verilerine dayalı Core Web Vitals'ı gösterir. Grafiklerden biri, son haftalarda artan bir Kümülatif Düzen Değişimi olduğunu gösteriyor. Bu, belirli sayfaların düzen kararlılığında gerileme olduğu anlamına geliyor. Bu senaryoda, bu sayfaların temel sorunlarını analiz etme çalışmalarına öncelik vermek istersiniz.

Data Studio&#39;daki Önemli Web Verileri sonuçlarının ekran görüntüsü.

Veri toplamadan görselleştirmeye kadar olan uçtan uca süreci basitleştirmek için AWP'yi URL'lerin listesiyle birlikte çalıştırarak sonuçları aşağıdaki komutla otomatik olarak Google E-Tablolar'a aktarabilirsiniz:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Günlük metrikleri bir e-tabloda topladıktan sonra, verileri doğrudan e-tablodan yükleyen ve trendleri zaman serisi grafiğinde gösteren bir Data Studio kontrol paneli oluşturabilirsiniz. AWP'yi, Data Studio'da görselleştirmek için veri kaynağı olarak e-tablolarla nasıl ayarlayacağınıza ilişkin ayrıntılı adımlar için Google E-Tablolar API Bağlayıcısı'na göz atın.

Sırada ne var?

AWP, Core Web Vitals ve diğer performans metriklerini ölçmek için sürekli izleme ardışık düzeni oluşturma çalışmalarını en aza indirmenin basit ve entegre bir yolunu sunar. AWP şu anda en yaygın kullanım alanlarını kapsamaktadır ve gelecekte diğer kullanım alanlarını da kapsayacak şekilde daha fazla özellik sunmaya devam edecektir.

Daha fazla bilgi için AutoWebPerf deposuna göz atın.