Technical Tutorials

Performans, modern web geliştirmede sadece bir tercih değil; kullanıcı deneyimi, SEO sıralaması ve iş dönüşüm oranları için kritik bir bileşendir. Google'ın Core Web Vitals'ı ile performans ölçümü, tepkisel bir egzersizden proaktif bir gereksinime dönüştü. Ancak, sürekli entegrasyon ve sürekli dağıtım (CI/CD) uygulayan ekipler için manuel denetimlere güvenmek artık yeterli değildir. Bu yazıda, regresyonların üretim ortamına ulaşmadan yakalamak için Core Web Vitals izleme ve uyarı sistemini CI/CD süreçlerinizde nasıl otomatikleştireceğinizi keşfedeceğiz.

Neden Performansı CI/CD'ye Entegre Etmeli?

Geleneksel performans testleri genellikle gerçek dünya koşullarını yansıtmayan izole ortamlarda veya dağıtımdan sonra gerçekleşir. Core Web Vitals kontrollerini CI/CD sürecinize entegre ederek, her bir çekme isteği (pull request) için bir "performans bütçesi" oluşturursunuz. Bu yaklaşım şunları sağlar:

Regresyonlar erken yakalanır: LCP (En Büyük İçerikli Boyutlandırma), FID (İlk Gecikmeli Giriş) veya CLS (Kümülatif Düzen Kayması) değerlerini bozan kod değişiklikleri hemen işaretlenir.
Performans ortak bir sorumluluk haline gelir: Geliştiriciler, kodlarının performans üzerindeki etkisi hakkında anında geri bildirim alır.
Dağıtım güvenliği artar: Otomatik kontroller, kazara performans düşüşlerine karşı bir güvenlik ağı sağlar.

Doğru Araçları Seçmek

Lighthouse, performans raporları oluşturmak için altın standart olsa da, CI/CD sürecinde başsız (headless) bir tarayıcı ortamında çalıştırmak kaynak yoğun olabilir. Hafif ve hızlı çalışan kontroller için puppeteer, playwright veya WebPageTest API gibi özel hizmetler mükemmel seçimlerdir. Alternatif olarak, lighthouse-ci bu amaçla özel olarak tasarlanmış sağlam bir CLI aracı sunar.

Bu kılavuzda, detaylı metrikler ve entegrasyon kolaylığı arasında dengeli bir denge sunduğu için GitHub Actions üzerinden lighthouse-ci entegrasyonuna odaklanacağız.

Pipeline'ı Kurmak

Başlamak için, Lighthouse CI CLI'yi projenizde bir geliştirme bağımlılığı olarak yüklemeniz gerekir. Bu, denetimleri hem yerel ortamınızda hem de CI ortamınızda çalıştırmanıza olanak tanır.

npm install --save-dev @lhci/cli

Ardından, performans bütçelerinizi tanımlamak için bir yapılandırma dosyası olan .lighthouserc.json oluşturun. Bu dosya, CI aracına hangi metrikleri takip etmesi ve kabul edilebilir eşiklerin neler olduğunu söyler.

{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "first-input-delay": ["error", { "maxNumericValue": 100 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "filesystem"
    }
  }
}

Bu yapılandırmada, genel performans kategorisinin en az 0.9 puan alması gerektiğini belirtiyoruz. Ayrıca LCP (2.5 saniye), FID (100ms) ve CLS (0.1) için sıkı sayısal sınırlar belirledik. Bu eşiklerden herhangi biri aşıldığında, CI derlemesi başarısız olur.

GitHub Actions ile Entegrasyon

Şimdi, bunu CI/CD sürecinize bağlayalım. .github/workflows/performance.yml içinde bir iş akışı dosyası oluşturun. Bu betik, her çekme isteğinde tetiklenecek, metrikleri toplayacak ve sonuçları raporlayacaktır.

name: Performance CI

on: [pull_request]

jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run local server
        run: npm start &
        working-directory: ./
        continue-on-error: true

      - name: Audit URLs
        run: npx @lhci/cli@0.9.x collect --url=http://localhost:3000

Pipeline'ın eyleme geçirilebilir geri bildirim sağlamasını sağlamak için Lighthouse CI eklentisini çekme isteklerine yorum yapacak şekilde yapılandırmanız gerekir. Bu, geliştiricilere hangi belirli metriklerin neden başarısız olduğunu ve ne kadar sapma olduğunu anında görme imkanı tanır.

Gelişmiş Uyarı ve İzleme

Bir derlemeyi başarısız kırmak, kötü kodun birleştirilmesini önlemek için etkilidir ancak zaman içindeki trendleri takip etmede veya üretimdeki anormallikler konusunda uyarıda bulunmada yardımcı olmaz. Kapsamlı izleme için, raporları bir panoya yüklemek amacıyla Google Lighthouse CI API gibi hizmetlerle entegrasyon kurmayı düşünün. Ardından, bir dağıtım sonucunda Core Web Vitals puanlarının tabana kıyasla önemli ölçüde düşmesi durumunda Slack veya e-posta üzerinden uyarılar ayarlayabilirsiniz.

Sonuç

Core Web Vitals izlemesini CI/CD sürecinize uygulamak, performansı soyut bir kavramdan ölçülebilir ve uygulanabilir bir kalite metriğine dönüştürür. Bu kontrolleri otomatikleştirerek, kullanıcı deneyiminden ödün vermeden ekibinizin daha hızlı çalışmasını sağlarsınız. Tek bir metrik ekleyerek küçük başlayın ve uygulamanız olgunlaştıkça performans bütçelerinizi kademeli olarak genişletin. Sonuç, daha sağlam, performanslı ve kullanıcı dostu bir web uygulaması olacaktır.