Ön Uç Performans Testi: Sürekli İyileştirme için Lighthouse CI Entegrasyonu

Günümüz dijital dünyasında web sitesi performansı her şeyden önemlidir. Yavaş yükleme süreleri, erişilebilirlik sorunları ve zayıf SEO, kullanıcı deneyimini ve dolayısıyla iş sonuçlarını önemli ölçüde etkileyebilir. Ön uç performans testi, web sitelerinin ve web uygulamalarının küresel bir kitle için hızlı, güvenilir ve kullanıcı dostu olmasını sağlayarak modern yazılım geliştirme yaşam döngüsünün önemli bir parçası haline gelmiştir. Bu makale, ön uç performans testini otomatikleştirmek ve sürekli iyileştirmeyi teşvik etmek için güçlü bir açık kaynak aracı olan Lighthouse CI'ın sürekli entegrasyon (CI) hattınıza nasıl entegre edileceğini ele almaktadır.

Ön Uç Performans Testi Neden Önemlidir?

Lighthouse CI'a geçmeden önce, ön uç performans testinin neden bu kadar önemli olduğunu anlayalım:

• Kullanıcı Deneyimi: Hızlı ve duyarlı bir web sitesi daha iyi bir kullanıcı deneyimi sunar, bu da artan etkileşim ve azalan hemen çıkma oranlarına yol açar. Örneğin, Tokyo, Japonya'daki potansiyel bir müşterinin yavaş yüklenen bir e-ticaret sitesinden ürün satın almaya çalıştığını düşünün. Büyük olasılıkla siteyi terk edip alternatiflere yönelecektir.
• SEO Sıralaması: Google gibi arama motorları, web sitesi hızını ve performansını sıralama faktörleri olarak kabul eder. Daha hızlı web siteleri, arama sonuçlarında daha üst sıralarda yer alma eğilimindedir ve bu da daha fazla organik trafik çeker. Google'ın Core Web Vitals (Önemli Web Verileri) girişimi, SEO için Largest Contentful Paint (LCP), First Input Delay (FID) ve Cumulative Layout Shift (CLS) gibi faktörlerin önemini vurgulamaktadır.
• Erişilebilirlik: Performans iyileştirmeleri genellikle engelli kullanıcılar için daha iyi erişilebilirliğe yol açar. Optimize edilmiş kod ve görseller, ekran okuyuculara güvenen veya sınırlı bant genişliğine sahip kullanıcılar için deneyimi iyileştirebilir.
• Dönüşüm Oranları: Daha hızlı bir web sitesi, dönüşüm oranlarını doğrudan etkileyebilir. Çalışmalar, sayfa yükleme süresindeki bir saniyelik bir gecikmenin bile dönüşümlerde önemli bir düşüşe yol açabileceğini göstermiştir. Mumbai, Hindistan'daki bir kullanıcının uçuş rezervasyonu yapmaya çalıştığını düşünün. Yavaş bir rezervasyon süreci, satın almaktan vazgeçip bir rakibi seçmesine neden olabilir.
• Kaynak Optimizasyonu: Performans testi, kaynakların optimize edilebileceği alanları belirlemeye yardımcı olur, bu da sunucu altyapısı ve bant genişliği kullanımı açısından maliyet tasarrufu sağlar.

Lighthouse CI'a Giriş

Lighthouse CI, CI/CD hattınıza sorunsuz bir şekilde entegre olmak üzere tasarlanmış açık kaynaklı, otomatik bir araçtır. Google tarafından geliştirilen popüler bir denetim aracı olan Lighthouse'u çalıştırır ve web sitenizin performansı, erişilebilirliği, SEO'su, en iyi uygulamaları ve Aşamalı Web Uygulaması (PWA) uyumluluğu hakkında bilgiler sunar. Lighthouse CI size şu konularda yardımcı olur:

• Performans Denetimlerini Otomatikleştirme: Her commit veya pull request ile Lighthouse denetimlerini otomatik olarak çalıştırın.
• Zaman İçindeki Performansı İzleme: Performans metriklerini zaman içinde izleyin ve gerilemeleri erken tespit edin.
• Performans Bütçeleri Belirleme: Performans bütçeleri tanımlayın ve bunlar aşılırsa derlemeleri (build) başarısız kılın.
• CI/CD Sistemleriyle Entegrasyon: GitHub Actions, GitLab CI, CircleCI ve Jenkins gibi popüler CI/CD sistemleriyle entegre edin.
• Performans Sorunları Üzerinde İşbirliği Yapma: Lighthouse raporlarını paylaşın ve performans sorunlarını çözmek için ekibinizle işbirliği yapın.

Lighthouse CI Kurulumu

Projenizde Lighthouse CI'ı kurmak için adım adım bir kılavuz aşağıda verilmiştir:

1. Lighthouse CI'ı Yükleyin

Lighthouse CI CLI'ı npm veya yarn kullanarak genel olarak yükleyin:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Lighthouse CI'ı Yapılandırın

Lighthouse CI'ı yapılandırmak için projenizin kök dizininde bir lighthouserc.js dosyası oluşturun. İşte bir örnek yapılandırma:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Bu yapılandırmayı ayrıntılı olarak inceleyelim:

• collect.url: Denetlenecek URL'lerin bir dizisi. Bu örnek, ana sayfayı ve hakkımızda sayfasını denetler. Farklı kullanım senaryolarını göz önünde bulundurarak web sitenizin tüm kritik sayfalarını dahil etmelisiniz. Örneğin, bir e-ticaret sitesi ana sayfayı, ürün listeleme sayfalarını, ürün detay sayfalarını ve ödeme sürecini içerebilir.
• collect.startServerCommand: Geliştirme sunucunuzu başlatma komutu. Lighthouse CI'ın yerel bir geliştirme ortamına karşı çalışması gerekiyorsa bu gereklidir.
• collect.numberOfRuns: Her URL için Lighthouse denetimlerinin kaç kez çalıştırılacağı. Birden çok denetim çalıştırmak, ağ koşullarındaki ve diğer faktörlerdeki değişkenlikleri azaltmaya yardımcı olur.
• assert.assertions: Lighthouse denetim sonuçlarını doğrulamak için bir dizi iddia (assertion). Her iddia, bir metrik veya kategori ve bir eşik değeri belirtir. Eşik karşılanmazsa, derleme başarısız olur. Bu örnek, performans, erişilebilirlik, en iyi uygulamalar ve SEO kategorileri için eşikler belirler. Ayrıca First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) ve Cumulative Layout Shift (CLS) gibi belirli metrikler için de eşikler belirler.
• upload.target: Lighthouse raporlarının nereye yükleneceğini belirtir. temporary-redirect raporları geçici bir depolama konumuna yükler ve bunlara erişmek için bir URL sağlar. Diğer seçenekler arasında Lighthouse CI sunucusunu veya Google Cloud Storage ya da Amazon S3 gibi bulut depolama çözümlerini kullanmak bulunur.

3. CI/CD Sisteminizle Entegre Edin

Bir sonraki adım, Lighthouse CI'ı CI/CD hattınıza entegre etmektir. İşte GitHub Actions ile nasıl entegre edileceğine dair bir örnek:

Deponuzda bir .github/workflows/lighthouse.yml dosyası oluşturun:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Bu iş akışı aşağıdaki adımları gerçekleştirir:

• Kodu çeker (checkout).
• Node.js'i kurar.
• Bağımlılıkları yükler.
• Lighthouse CI'ı çalıştırır. Bu adım önce uygulamayı derler (npm run build), ardından Lighthouse denetimlerini yürüten ve sonuçları yapılandırılmış eşiklere göre doğrulayan lhci autorun komutunu çalıştırır.

Bu iş akışını kendi CI/CD sisteminize ve proje gereksinimlerinize uyarlayın. Örneğin, GitLab CI kullanıyorsanız, benzer adımlarla bir .gitlab-ci.yml dosyası yapılandırırsınız.

4. Lighthouse CI'ı Çalıştırın

Değişikliklerinizi commit'leyin ve deponuza push'layın. CI/CD hattı Lighthouse CI'ı otomatik olarak çalıştıracaktır. İddialardan herhangi biri başarısız olursa, derleme de başarısız olur ve geliştiricilere değerli geri bildirimler sağlanır. Lighthouse CI raporları, CI/CD sistemi tarafından sağlanan URL'de mevcut olacaktır.

Gelişmiş Yapılandırma ve Özelleştirme

Lighthouse CI, geniş bir yelpazede yapılandırma seçenekleri ve özelleştirme imkanları sunar. İşte bazı gelişmiş özellikler:

1. Lighthouse CI Sunucusunu Kullanma

Lighthouse CI sunucusu, zaman içindeki performans metriklerini izlemek, projeleri yönetmek ve performans sorunları üzerinde işbirliği yapmak için merkezi bir kontrol paneli sağlar. Lighthouse CI sunucusunu kullanmak için bir örnek (instance) kurmanız ve lighthouserc.js dosyanızı raporları sunucuya yükleyecek şekilde yapılandırmanız gerekir.

Öncelikle sunucuyu dağıtın (deploy). Docker, Heroku ve AWS ve Google Cloud gibi bulut sağlayıcıları da dahil olmak üzere çeşitli dağıtım seçenekleri mevcuttur. Sunucuyu dağıtma hakkında ayrıntılı talimatlar için Lighthouse CI belgelerine bakın.

Sunucu çalışmaya başladıktan sonra, sunucuya işaret etmek için lighthouserc.js dosyanızı güncelleyin:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

YOUR_LHCI_SERVER_URL kısmını Lighthouse CI sunucunuzun URL'si ile ve YOUR_LHCI_SERVER_TOKEN kısmını sunucu tarafından oluşturulan bir token ile değiştirin. Bu token, CI hattınızın sunucu ile kimlik doğrulamasını sağlar.

2. Performans Bütçeleri Belirleme

Performans bütçeleri, belirli metrikler için kabul edilebilir eşikleri tanımlar. Lighthouse CI, performans bütçeleri belirlemenize ve bu bütçeler aşılırsa derlemeleri başarısız kılmanıza olanak tanır. Bu, performans gerilemelerini önlemeye yardımcı olur ve web sitenizin kabul edilebilir performans sınırları içinde kalmasını sağlar.

Performans bütçelerini lighthouserc.js dosyanızda assert.assertions özelliğini kullanarak tanımlayabilirsiniz. Örneğin, First Contentful Paint (FCP) için bir performans bütçesi belirlemek üzere aşağıdaki iddiayı ekleyebilirsiniz:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Bu iddia, FCP 2500 milisaniyeden büyükse derlemeyi başarısız kılar.

3. Lighthouse Yapılandırmasını Özelleştirme

Lighthouse CI, Lighthouse yapılandırmasını özel ihtiyaçlarınıza uyacak şekilde özelleştirmenize olanak tanır. Çeşitli Lighthouse ayarlarını yapılandırabilirsiniz, örneğin:

• onlyAudits: Çalıştırılacak denetimlerin bir listesini belirtin.
• skipAudits: Atlanacak denetimlerin bir listesini belirtin.
• throttling: Farklı ağ koşullarını simüle etmek için ağ kısıtlama (throttling) ayarlarını yapılandırın.
• formFactor: Emüle edilecek form faktörünü (masaüstü veya mobil) belirtin.
• screenEmulation: Ekran emülasyon ayarlarını yapılandırın.

Lighthouse yapılandırmasını özelleştirmek için, lhci autorun komutuna özel bir Lighthouse yapılandırma dosyasını işaret eden bir --config-path bayrağı geçirebilirsiniz. Yapılandırma seçeneklerinin tam listesi için Lighthouse belgelerine bakın.

4. Kimlik Doğrulaması Gerektiren Sayfaları Denetleme

Kimlik doğrulaması gerektiren sayfaları denetlemek biraz farklı bir yaklaşım gerektirir. Denetimleri çalıştırmadan önce Lighthouse CI'a kimlik doğrulaması yapması için bir yol sağlamanız gerekir. Bu, çerezler (cookies) kullanılarak veya giriş sürecini komut dosyası haline getirerek gerçekleştirilebilir.

Yaygın bir yaklaşım, kimlik doğrulama çerezlerini Lighthouse CI'a geçirmek için --extra-headers bayrağını kullanmaktır. Çerezleri, web sitesine giriş yaptıktan sonra tarayıcınızın geliştirici araçlarından alabilirsiniz.

Alternatif olarak, giriş sürecini otomatikleştirmek ve ardından kimlik doğrulaması yapılmış sayfalarda Lighthouse denetimlerini çalıştırmak için bir Puppeteer betiği kullanabilirsiniz. Bu yaklaşım daha fazla esneklik sağlar ve karmaşık kimlik doğrulama senaryolarını yönetmenize olanak tanır.Lighthouse CI ile Ön Uç Performans Testi için En İyi Uygulamalar

Lighthouse CI'ın faydalarını en üst düzeye çıkarmak için şu en iyi uygulamaları takip edin:

• Lighthouse CI'ı Düzenli Olarak Çalıştırın: Her commit veya pull request ile denetimleri otomatik olarak çalıştırmak için Lighthouse CI'ı CI/CD hattınıza entegre edin. Bu, performans gerilemelerinin erken tespit edilmesini ve derhal ele alınmasını sağlar.
• Gerçekçi Performans Bütçeleri Belirleyin: Zorlayıcı ama ulaşılabilir performans bütçeleri tanımlayın. Muhafazakar bütçelerle başlayın ve web sitenizin performansı iyileştikçe bunları kademeli olarak sıkılaştırın. Karmaşıklıklarına ve önemlerine bağlı olarak farklı sayfa türleri için farklı bütçeler belirlemeyi düşünün.
• Anahtar Metriklere Odaklanın: Kullanıcı deneyimi ve iş sonuçları üzerinde en fazla etkiye sahip olan anahtar performans metriklerine öncelik verin. Google'ın Core Web Vitals (LCP, FID ve CLS) iyi bir başlangıç noktasıdır.
• Performans Sorunlarını Araştırın ve Ele Alın: Lighthouse CI performans sorunları tespit ettiğinde, bunları derinlemesine araştırın ve uygun çözümleri uygulayın. Sorunların temel nedenlerini belirlemek ve en etkili düzeltmelere öncelik vermek için Lighthouse raporlarını kullanın.
• Zaman İçindeki Performansı İzleyin: Eğilimleri ve kalıpları belirlemek için performans metriklerini zaman içinde izleyin. Performans verilerini görselleştirmek ve iyileştirme alanlarını belirlemek için Lighthouse CI sunucusunu veya diğer izleme araçlarını kullanın.
• Ekibinizi Eğitin: Ekibinizin ön uç performansının önemini ve Lighthouse CI'ı etkili bir şekilde nasıl kullanacağını anladığından emin olun. Becerilerini ve bilgilerini geliştirmelerine yardımcı olmak için eğitim ve kaynaklar sağlayın.
• Küresel Ağ Koşullarını Dikkate Alın: Performans bütçeleri belirlerken, dünyanın farklı yerlerindeki ağ koşullarını göz önünde bulundurun. Daha yavaş internet hızlarına sahip bölgelerdeki kullanıcılar, daha hızlı hızlara sahip bölgelerdeki kullanıcılardan farklı bir deneyim yaşayabilir. Test sırasında farklı ağ koşullarını simüle etmek için araçlar kullanın.
• Görselleri Optimize Edin: Görsel optimizasyonu, ön uç performansının kritik bir yönüdür. Kaliteyi kaybetmeden görselleri sıkıştırmak ve optimize etmek için ImageOptim, TinyPNG gibi araçları veya çevrimiçi dönüştürücüleri kullanın. Geleneksel JPEG ve PNG formatlarına göre daha iyi sıkıştırma ve kalite sunan WebP gibi modern görsel formatlarını kullanın. Görüntü alanında hemen görünmeyen görseller için gecikmeli yükleme (lazy loading) uygulayın.
• Kodu Küçültün ve Sıkıştırın: Dosya boyutlarını azaltmak için HTML, CSS ve JavaScript kodunuzu küçültün (minify). UglifyJS, Terser gibi araçları veya çevrimiçi küçültücüleri kullanın. Aktarılan dosyaların boyutunu daha da azaltmak için sunucunuzda Gzip veya Brotli sıkıştırmasını etkinleştirin.
• Tarayıcı Önbelleklemesinden Yararlanın: Sunucunuzu, görseller, CSS ve JavaScript dosyaları gibi statik varlıklar için uygun önbellek başlıklarını (cache headers) ayarlayacak şekilde yapılandırın. Bu, tarayıcıların bu varlıkları önbelleğe almasına ve tekrar tekrar indirmekten kaçınmasına olanak tanır.

Sonuç

Lighthouse CI'ı geliştirme iş akışınıza entegre etmek, yüksek performanslı, erişilebilir ve SEO dostu web siteleri oluşturmaya yönelik çok önemli bir adımdır. Ön uç performans testini otomatikleştirerek ve zaman içindeki performansı izleyerek, performans sorunlarını erken tespit edip ele alabilir, kullanıcı deneyimini iyileştirebilir ve iş sonuçlarını artırabilirsiniz. Lighthouse CI'ı benimseyin ve sürekli performans iyileştirmeyi geliştirme sürecinizde temel bir değer haline getirin. Unutmayın ki web sitesi performansı tek seferlik bir çaba değil, sürekli dikkat ve optimizasyon gerektiren devam eden bir süreçtir. Konumları veya cihazları ne olursa olsun tüm kullanıcılarınız için sorunsuz bir deneyim sağlamak amacıyla kültürel ve bölgesel faktörleri göz önünde bulundurun. Bu makalede özetlenen en iyi uygulamaları takip ederek, web sitenizin dünya çapındaki kullanıcılara hızlı, güvenilir ve keyifli bir deneyim sunmasını sağlayabilirsiniz.