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), 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 (lab ve alan) için web sitesi performansını ölçmek amacıyla birçok araç kullanılabilir. AWP, basit bir kurulumla çeşitli denetim araçlarıyla entegrasyon sunar. Böylece site performansını tek bir yerden sürekli olarak izleyebilirsiniz.

Web Verileri kılavuzunun kullanıma sunulması, web sayfalarının yakın ve aktif olarak izlenmesinin giderek daha önemli hale geldiği 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ştirdiler. Günümüzde AWP belirli bir olgunluk düzeyine ulaştı ve artık geniş çapta paylaşılmaya hazır. Böylece, sunduğu otomasyondan herkes faydalanabilecek.

Bu araca, GitHub'daki herkese açık AutoWebPerf deposundan erişilebilir.

AWP ne içindir?

Web sayfalarının performansını izlemek için çeşitli araçlar ve API'ler bulunsa da, bunların çoğu belirli bir zamanda ölçülen verileri gösterir. Bir web sitesini yeterince izlemek ve önemli sayfaların performansını yüksek tutmak için Önemli Web Verileri'nin zaman içinde sürekli olarak ölçülmesini ve trendleri gözlemlemesini öneririz.

AWP, çeşitli performans izleme API'lerine yönelik yinelenen sorguları otomatikleştirmek için programlı olarak yapılandırılabilen bir motor ve önceden oluşturulmuş API entegrasyonları sağlayarak bunu kolaylaştırır.

Örneğin, AWP ile CrUX API'den gelen alan verilerini ve PageSpeed Insights'ın bir Lighthouse raporundaki laboratuvar verilerini yakalamak için ana sayfanızda günlük bir test ayarlayabilirsiniz. Bu veriler, zaman içinde örneğin Google E-Tablolar'da yazılıp depolanabilir ve ardından Data Studio kontrol panelinde görselleştirilebilir. AWP, tüm sürecin zorlayıcı kısmını otomatik hale getirerek laboratuvar ve saha trendlerini zaman içinde 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ı türde modül içeren modüler tabanlı bir kitaplıktır:

  • motor
  • connector modülleri
  • topherer modülleri

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

AWP mimarisini gösteren şema.

AWP'de, önceden uygulanmış bir dizi toplayıcı ve bağlayıcı bulunur:

AWP ile denetimleri otomatikleştirme

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

Örneğin, aşağıdaki komutu kullanarak bir Google E-Tablosu'nda depolanan test listesi için denetimler çalıştırabilir ve 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 denetlemeleri günlük, haftalık veya aylık aralıklarla yapabilirsiniz. Örneğin, aşağıdakine benzer bir yerel JSON'de tanımlanan 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ındaki denetim testlerinin listesini okur, yerel makinede denetimleri çalıştırır, ardından sonuçları yerel bir CSV dosyasına çıkarır:

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

Bir arka plan hizmeti olarak her gün denetimleri 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'i 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.

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

Önemli Web Verileri'ni sürekli ölçmenin yanı sıra, gerçek kullanıcı metrikleri (RUM) veya AWP tarafından toplanan Chrome Kullanıcı Deneyimi Raporu (CrUX) verileriyle eğilimleri değerlendirebilmek ve potansiyel regresyonları keşfedebilmek önemlidir. Chrome Kullanıcı Deneyimi Raporu'nun (CrUX) 28 günlük hareketli bir toplama olduğunu unutmayın. Bu nedenle, regresyonları daha erken tespit edebilmek için CrUX ile birlikte kendi RUM verilerinizi de kullanmanız önerilir.

Data Studio, performans metriklerini kolayca yükleyebileceğiniz ve eğilimleri grafik halinde çizebileceğiniz ücretsiz bir görselleştirme aracıdır. Örneğin, aşağıdaki zaman serisi grafiklerinde Önemli Web Verileri, Chrome Kullanıcı Deneyimi Raporu verilerine dayalı olarak gösterilir. Grafiklerden birinde, son haftalarda Cumulative Layout Shift'te artış olduğu gösterilmektedir. Bu da belirli sayfaların düzen kararlılığında regresyon olduğu anlamına gelir. Bu senaryoda, bu sayfaların altında yatan sorunları analiz etme çabalarına öncelik vermek istersiniz.

Data Studio&#39;da Core Web Vitals sonuçlarının ekran görüntüsü.

Veri toplamadan görselleştirmeye kadar uçtan uca süreci basitleştirmek için aşağıdaki komutla sonuçları Google E-Tablolar'a otomatik olarak aktarmak amacıyla bir URL listesiyle AWP ç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 eğilimleri zaman serisi grafiğine görüntüleyen bir Data Studio kontrol paneli oluşturabilirsiniz. Data Studio'da görselleştirmek için veri kaynağı olarak e-tablolar kullanarak AWP'yi nasıl ayarlayacağınızla ilgili ayrıntılı adımlar için Google E-Tablolar API Bağlayıcısı'na göz atın.

Sonraki adım

AWP, Önemli Web Verileri'ni ve diğer performans metriklerini ölçmek için sürekli izleme ardışık düzeni oluşturma çabalarını en aza indirecek basit ve entegre bir yol sunar. Şu an için AWP en yaygın kullanım alanlarını kapsamaktadır ve gelecekte diğer kullanım alanlarını ele almak için daha fazla özellik sağlamaya devam edecektir.

AutoWebPerf deposunda daha fazla bilgi edinin.