AutoWebPerf ile denetimleri otomatikleştirme

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

Gilberto Cocchi
Gilberto Cocchi

AutoWebPerf (AWP) nedir?

AutoWebPerf (AWP), birden fazla kaynaktan performans verilerinin otomatik olarak toplanmasını sağlayan modüler bir araçtır. Şu anda Chrome UX Report, PageSpeed Insights veya WebPageTest gibi farklı kapsamlarda (lab ve alan) web sitesi performansını ölçmek için 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 yürütüyor ve günlük faaliyetlerinin manuel, yinelenen ve zaman alan bir bölümünü otomatikleştirmek için AWP'yi geliştirdi. Günümüzde AWP belirli bir olgunluk seviyesine ulaştı ve yaygın olarak paylaşılmaya hazır. Böylece, herkesin sunduğu otomasyondan herkesin yararlanabilmesi mümkün oluyor.

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, yinelenen sorguları çeşitli performans izleme API'lerinde otomatikleştirmek için programatik olarak yapılandırılabilen bir motor ve önceden oluşturulmuş API entegrasyonları sağlayarak bunu 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ılıp 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
  • bağlayıcı 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ı ile birlikte gelir:

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, aşağıdaki gibi bir yerel JSON dosyasında tanımlanmış bir test listesi için 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 her gün bir arka plan hizmeti olarak 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

Önemli Web Verileri'ni sürekli olarak ölçmenin yanı sıra trendleri değerlendirebilmek ve gerçek kullanıcı metrikleri (RUM) veya AWP tarafından toplanan Chrome Kullanıcı Deneyimi Raporu (CrUX) verileriyle olası regresyonları keşfetmek ö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, sonuçları Google E-Tablolar'a otomatik olarak aktarmak üzere URL'lerin listesiyle birlikte aşağıdaki komutla çalıştırabilirsiniz:

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. Data Studio'da görselleştirmek üzere e-tablolarla AWP'yi veri kaynağı olarak ayarlama hakkında ayrıntılı adımlar için Google E-Tablolar API Bağlayıcı'ya 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. Şimdilik AWP en yaygın kullanım alanlarını kapsamakta ve gelecekte diğer kullanım alanlarına yönelik daha fazla özellik sunmaya devam edecektir.

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