Birden fazla kaynaktan performans verilerinin otomatik olarak toplanmasını sağlayan yeni bir modüler araç.
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 Kullanıcı Deneyimi Raporu, PageSpeed Insights veya WebPageTest gibi farklı kapsamlar (laboratuvar ve saha) için web sitesi performansını ölçmeye yönelik birçok araç bulunmaktadır. AWP, çeşitli denetim araçlarıyla entegrasyon sunar. Basit bir kurulumla site performansını tek bir yerden sürekli olarak izleyebilirsiniz.
Web Vitals yönergelerinin yayınlanması, web sayfalarının yakından ve etkin bir şekilde izlenmesinin önemini artırıyor. Bu aracın geliştiricileri yıllardır performans denetimleri yapıyor ve günlük etkinliklerinin manuel, tekrarlayan ve zaman alan bir bölümünü otomatikleştirmek için AWP'yi geliştirdi. AWP, bugün olgunluk seviyesine ulaşmış durumda ve herkesin getirdiği otomasyondan 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 kullanılabilir olsa da bunların çoğu belirli bir zamanda ölçülen verileri gösterir. Bir web sitesini yeterince izlemek ve önemli sayfaların iyi performansını korumak için zaman içinde Core Web Vitals ölçümlerini sürekli olarak yapmanız ve trendleri gözlemlemeniz önerilir.
AWP, çeşitli performans izleme API'lerine yönelik yinelenen sorguları otomatikleştirmek için programatik olarak yapılandırılabilen bir motor ve önceden oluşturulmuş API entegrasyonları sağlayarak bu süreci kolaylaştırır.
Örneğin, AWP ile ana sayfanızda günlük bir test ayarlayarak CrUX API'den alan verilerini ve PageSpeed Insights'tan alınan bir Lighthouse raporundan laboratuvar verilerini yakalayabilirsiniz. Bu veriler zaman içinde yazılıp depolanabilir (ör. Google E-Tablolar'da) ve daha sonra Data Studio kontrol panelinde görselleştirilebilir. AWP, tüm sürecin zorlu 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 Denetleme sonuçlarını Data Studio'da 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
- toplayıcı modülleri
Motor, bir bağlayıcıdan (ör. yerel bir CSV dosyasından) alınan test listesini alır, seçilen toplayıcılar (ör. PageSpeed Insights) aracılığıyla performans denetimleri gerçekleştirir ve sonuçları çıkış bağlayıcısına (ör. Google E-Tablolar) yazar.
AWP'de önceden uygulanmış bir dizi toplayıcı ve bağlayıcı bulunur:
- Önceden uygulanmış toplayıcılar:
- Önceden uygulanmış bağlayıcılar:
- Google E-Tablolar
- JSON
- CSV
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 yükleneceği ve sonuçların yazılacağı yeri seçme esnekliği sunar.
Örneğin, bir Google E-Tablolar sayfasında depolanan test listesi için denetimler çalıştırabilir ve sonuçları aşağıdaki komutla 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 sıklıkta çalıştırabilirsiniz. Örneğin, aşağıdakine benzer şekilde yerel bir JSON'da tanımlanan 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, denetleme testlerinin listesini yerel JSON dosyasından okur, yerel makinede denetlemeler çalıştırır ve sonuçları yerel bir CSV dosyasına aktarır:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Denetimleri her gün arka plan hizmeti olarak sürekli çalıştırmak için bunun yerine aşağıdaki komutu kullanabilirsiniz:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
Alternatif olarak, AWP'yi günlük bir 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ç toplama işlemlerini otomatikleştirmenin daha fazla yolunu AWP GitHub deposunda bulabilirsiniz.
Denetim 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 UX Report (CrUX) verileriyle trendleri değerlendirebilmek ve olası gerilemeleri keşfedebilmek de önemlidir. Chrome Kullanıcı Deneyimi Raporu'nun (CrUX) 28 günlük hareketli bir toplama olduğunu unutmayın. Bu nedenle, gerilemeleri 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 trendleri grafik olarak çizebileceğiniz ücretsiz bir görselleştirme aracıdır. Örneğin, aşağıdaki zaman serisi grafikleri, Chrome UX Report verilerine dayalı olarak Core Web Vitals'ı gösterir. Grafiklerden birinde, son haftalarda Cumulative Layout Shift'in arttığı gösteriliyor. Bu da belirli sayfalarda düzen kararlılığında gerilemeler olduğu anlamına geliyor. Bu senaryoda, bu sayfaların temelindeki sorunları analiz etme çalışmalarına öncelik vermek isteyebilirsiniz.
Veri toplama işleminden görselleştirmeye kadar olan uçtan uca süreci basitleştirmek için aşağıdaki komutla sonuçları otomatik olarak Google E-Tablolar'a aktarmak üzere bir URL listesiyle AWP'yi ç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 bir zaman serisi grafiğinde çizen bir Data Studio kontrol paneli oluşturabilirsiniz. AWP'yi, Data Studio'da görselleştirmek üzere veri kaynağı olarak e-tablolarla ayarlama hakkında 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 hattı oluşturma çalışmalarını en aza indirmenin basit ve entegre bir yolunu sunar. Şu an için AWP, en yaygın kullanım alanlarını kapsamakta olup gelecekte diğer kullanım alanlarına yönelik daha fazla özellik sunmaya devam edecektir.
AutoWebPerf deposunda daha fazla bilgi edinin.