Banner

Web Performansının Zaman İçinde Takip Edilmesi: Lighthouse Performance Monitor Geliştirme

Zorluk: Büyük Değişikliklerin Performans Etkisini Ölçmek

Ekibimiz websitesinin hem arayüzünü hem de İçerik Yönetim Sistemi'ni (CMS) yenilemeye karar verdiğinde kritik bir soruyla karşılaştık: Bu değişikliklerin performans etkisini nasıl ölçeceğiz?

Google'ın Lighthouse'u performans denetimi için mükemmel bir araç. Çalıştırıyorsunuz, puanlarınızı alıyorsunuz ve nelerin iyileştirilmesi gerektiğini görüyorsunuz ancak işte sorun: Lighthouse size bir anlık görüntü veriyor, bir hikaye değil.

Tamamen bir CMS veya arayüz yeniden tasarımı gibi büyük değişiklikler planlarken, anlık ölçümlerden fazlasına ihtiyacınız var. İhtiyacınız olan:

Bu yüzden Lighthouse Performance Monitor'ü geliştirdim. Lighthouse'u tek seferlik bir denetim aracından sürekli bir izleme çözümüne dönüştüren otomatik bir araç.

Çözüm: Görsel Trendlerle Otomatik Günlük İzleme

Lighthouse Performance Monitor, Google'ın Lighthouse'u etrafında hafif bir otomasyonudur ve şunları yapar:

  1. Cron job'lar kullanarak günlük otomatik denetimler çalıştırır
  2. Geçmiş verileri JSON ve CSV formatlarında saklar
  3. Zaman içindeki performansı gösteren görsel trend grafikleri üretir
  4. Tüm önemli metrikleri takip eder: Performans, Erişilebilirlik, SEO ve En İyi Uygulamalar

Ürün Yöneticileri ve Geliştiriciler için Gerçek Dünya Faydaları

Ürün Yöneticileri İçin:

Frontend Geliştiriciler İçin:

Pratik Bir Kullanım Senaryosu: CMS Değişikliği

Aracın arkasındaki motivasyonu yansıtan pratik bir senaryo paylaşayım:

Hafta 1-4 (Başlangıç Dönemi)

Hafta 5-8 (Göç Aşaması)

Hafta 9-12 (Lansman Sonrası)

Ay 3-6 (Uzun Vadeli)

Otomatik izleme olmadan, bu içgörülere ulaşılamazdı. Yalnızca "önce" ve "sonra" anlık görüntüleriniz olurdu, tüm yolculuğu ve değerli optimizasyon fırsatlarını kaçırırdınız.

Nasıl Çalışır: Basit Mimari, Güçlü Sonuçlar

Araç, Node.js ve Python'u birleştiren hibrit bir yaklaşım kullanılır:

Günlük Cron Job Tetiklenir
        ↓
Node.js Lighthouse denetimi çalıştırır
        ↓
Zaman damgalı JSON raporu kaydeder
        ↓
Node.js tüm raporları CSV'ye toplar
        ↓
Python görsel trend grafikleri oluşturur
        ↓
2x2 ızgara görselleştirme hazır

Temel Özellikler:

🤖 Tamamen Otomatik

📊 Görsel İçgörüler

💾 Veri Taşınabilirliği

⚙️ Yüksek Düzeyde Yapılandırılabilir

5 Dakikada Başlangıç

Araç, minimal kurulum sürtünmesi için tasarlanmıştır:

# 1. Repository'yi klonlayın
git clone https://github.com/c3nk/lighthouse-performance-monitor.git
cd lighthouse-performance-monitor

# 2. Bağımlılıkları yükleyin
pip install -r requirements.txt
npm install

# 3. Web sitenizin URL'sini yapılandırın
# Lighthouse Report Script.js dosyasını düzenleyin ve domain değişkenini güncelleyin

# 4. Çalıştırın!
./run-all.sh

Bu kadar! İlk raporunuzu ve trend grafiğinizi hemen alacaksınız.

Günlük otomatikleştirmek için:

# Crontab'a ekleyin (her gün sabah 6'da çalışır)
0 6 * * * /path/to/lighthouse-performance-monitor/run-all.sh >> /path/to/lighthouse.log 2>&1

Bu Yaklaşım Neden İşe Yarıyor

Endüstri Standartlarından Yararlanma

Sıfırdan bir performans izleme aracı geliştirmek yerine, bu proje Google'ın testinden geçmiş Lighthouse motorundan yararlanır. Elde ettiğiniz:

Minimal Ek Yük, Maksimum Değer

Aracın felsefesi "bir şeyi iyi yapın": Lighthouse'u otomatikleştirin ve trendleri görselleştirin. Tam bir APM (Uygulama Performans İzleme) çözümü değil. Bunun yerine:

Tasarım Sürecine Entegrasyon

Bu sadece bir izleme aracı değil bir tasarım süreci aracıdır. Yeniden tasarım veya migration boyunca çalıştırarak:

Gelecekte Neler Gelebilir

Mevcut versiyon temel işlevselliğe odaklanırken, geliştirme için alan var:

Bu özellikler henüz uygulanmamış ama temel topluluk katkıları için hazır.

Gizli Fayda: Mevsimsel Örüntü Tanıma

Uzun vadeli izlemeden elde edilen en değerli ve beklenmeyen içgörülerden biri mevsimsel örüntü tanımadır.

Kısa vadede (günler veya haftalar), şunları ayırt edemezsiniz:

Örüntüler ancak aylarca veri ile ortaya çıkar:

Bu içgörüleri tek seferlik denetimlerden veya haftalık manuel kontrollerden elde etmek imkansızdır.

Sonuç: Anlık Görüntülerden Hikayelere

Google Lighthouse güçlüdür ancak anlık analiz için tasarlanmıştır. Büyük değişiklikler planlayan ekipler için - yeniden tasarımlar, göçler, platform yükseltmeleri - sürekli izlemeye ihtiyacınız var.

Lighthouse Performance Monitor, Lighthouse'u bir teşhis aracından stratejik bir performans sistemine dönüştürür. Size yardımcı olur:

İster yeniden tasarım yatırımını haklı çıkaran bir Ürün Yöneticisi, ister bir Frontend Geliştirici olun, geçmiş performans verilerine sahip olmak her şeyi değiştirir.

Hemen Kullanın

Proje açık kaynaklıdır ve GitHub'da mevcuttur: https://github.com/c3nk/lighthouse-performance-monitor

Lisans: MIT (kullanmak, değiştirmek ve dağıtmak serbesttir)

  • Low-Code ile Koç Üniversitesi Kampüs Erişim Sistemi
  • Koç University Mobile Application Overview
  • Low-Code ile Geliştirilen Workspace Hibrit Çalışma Uygulaması
  • Fund Raising Activities at Koç University
  • Websitelerinde Form ve Consent Denetimi
  • Web Performansının Zaman İçinde Takip Edilmesi: Lighthouse Performance Monitör Geliştirme
  • THE Dünya Üniversite Sıralamaları