Web uygulamalarınız için optimum hız ve kullanıcı deneyimi sağlayarak sürekli performans izleme amacıyla Frontend Lighthouse CI'ı nasıl uygulayacağınızı öğrenin.
Frontend Lighthouse CI: Web Uygulamaları için Sürekli Performans İzleme
Günümüzün hızlı dijital dünyasında, web sitesi performansı her şeyden önemlidir. Yavaş yüklenen veya kötü optimize edilmiş bir web sitesi, hayal kırıklığına uğramış kullanıcılara, azalan etkileşime ve sonuç olarak işiniz üzerinde olumsuz bir etkiye yol açabilir. İşte bu noktada Lighthouse CI devreye giriyor. Bu kılavuz, kullanıcılarınızı etkilemeden önce performans darboğazlarını proaktif olarak belirlemenizi ve çözmenizi sağlayan sürekli performans izleme için Lighthouse CI'ı uygulama konusunda size yol gösterecektir.
Lighthouse CI Nedir?
Lighthouse CI, Sürekli Entegrasyon ve Sürekli Teslimat (CI/CD) hattınıza sorunsuz bir şekilde entegre olan açık kaynaklı, otomatik bir performans test aracıdır. Web sitenizin performansı, erişilebilirliği, SEO'su ve en iyi uygulamaları hakkında eyleme geçirilebilir içgörüler sağlamak için Google'ın Lighthouse denetim aracından yararlanır. Lighthouse CI'ı iş akışınıza dahil ederek, web sitenizin performansını sürekli olarak izleyebilir, gerilemeleri takip edebilir ve her kod değişikliğinin daha iyi bir kullanıcı deneyimine katkıda bulunmasını sağlayabilirsiniz. Lighthouse CI, belirli bir bulut sağlayıcısına bağlı değildir ve farklı kurulumlarla kullanılabilir. Örneğin, Github Actions, Jenkins, CircleCI gibi hizmetlerde bir Docker konteyneri içinde çalışabilir.
Neden Lighthouse CI Kullanmalısınız?
Lighthouse CI'ı uygulamak birçok fayda sunar:
- Performans Düşüşlerinin Erken Tespiti: Yeni kod değişikliklerinin neden olduğu performans sorunlarını üretime geçmeden önce belirleyin.
- İyileştirilmiş Web Sitesi Performansı: Web sitenizi hız, erişilebilirlik ve SEO için nasıl optimize edeceğinize dair eyleme geçirilebilir içgörüler edinin.
- Geliştirilmiş Kullanıcı Deneyimi: Ziyaretçileri etkileşimde tutan daha hızlı ve daha kullanıcı dostu bir web sitesi sunun.
- Azaltılmış Hemen Çıkma Oranı: Kullanıcı hayal kırıklığını azaltmak ve sitenizden ayrılmalarını önlemek için yükleme sürelerini optimize edin.
- Artan Dönüşüm Oranları: Daha hızlı bir web sitesi genellikle daha yüksek dönüşüm oranlarına ve daha iyi iş sonuçlarına yol açar.
- Otomatik Performans Testi: Sürekli izleme için performans testini CI/CD hattınıza entegre edin.
- Veriye Dayalı Karar Verme: Optimizasyon çabalarınızı somut performans metriklerine ve içgörülere dayandırın.
- Uzun Vadeli Performans Takibi: Trendleri belirlemek ve optimizasyonlarınızın etkisini ölçmek için web sitenizin performansını zaman içinde izleyin.
Lighthouse CI'ın Temel Özellikleri
- Otomatik Denetimler: CI/CD sürecinizin bir parçası olarak Lighthouse denetimlerini otomatik olarak çalıştırır.
- Performans Bütçeleri: Web sitenizin kabul edilebilir performans eşikleri içinde kalmasını sağlamak için performans bütçeleri belirleyin.
- Gerileme Takibi: Zaman içindeki performans gerilemelerini izleyerek bunlara neden olan kod değişikliklerini belirlemenizi sağlar.
- Eyleme Geçirilebilir İçgörüler: Web sitenizin performansını nasıl iyileştireceğinize dair eyleme geçirilebilir öneriler içeren ayrıntılı raporlar sunar.
- Özelleştirilebilir Yapılandırma: Lighthouse CI'ı özel ihtiyaçlarınıza ve gereksinimlerinize göre yapılandırın.
- CI/CD Araçlarıyla Entegrasyon: Jenkins, CircleCI, GitHub Actions ve GitLab CI gibi popüler CI/CD araçlarıyla sorunsuz bir şekilde entegre olur.
- Açık Kaynak: Lighthouse CI açık kaynaklı bir projedir, yani kullanımı ve değiştirilmesi ücretsizdir.
Lighthouse CI Kurulumu: Adım Adım Kılavuz
Projeniz için Lighthouse CI'ı kurmaya yönelik kapsamlı bir kılavuz aşağıda verilmiştir:
1. Lighthouse CI CLI'ı Yükleyin
Öncelikle, npm veya yarn kullanarak Lighthouse CI komut satırı arayüzünü (CLI) genel olarak yüklemeniz gerekir:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Lighthouse CI'ı Yapılandırın
Lighthouse CI'ı yapılandırmak için projenizin kök dizininde bir lighthouserc.js dosyası oluşturun. Bu dosya, denetlenecek URL'leri, onaylama kurallarını ve diğer yapılandırma seçeneklerini tanımlar.
İşte temel bir lighthouserc.js dosyası örneği:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Açıklama:
collect.url: Lighthouse tarafından denetlenecek URL'leri belirtir. Bu örnekte,localhost:3000üzerinde çalışan bir web sitesinin ana sayfasını ve "hakkında" sayfasını denetliyoruz. Bunu, hazırlık (staging) ortamları da dahil olmak üzere *sizin* projenizle ilgili URL'lerle değiştirmeyi unutmayın.assert.preset: Lighthouse'un önerilerine dayalı bir dizi önceden tanımlanmış onaylamayı uygulayanlighthouse:recommendedön ayarını kullanır. Bu iyi bir başlangıç noktasıdır, ancak bu onaylamaları gerektiği gibi özelleştirebilirsiniz.upload.target: Lighthouse CI sonuçlarının nereye yükleneceğini yapılandırır.temporary-public-storagetest ve geliştirme için kullanışlıdır, ancak üretim ortamları için genellikle daha kalıcı bir depolama çözümü kullanmak istersiniz (daha sonra tartışılacaktır).
3. Lighthouse CI'ı CI/CD Hattınıza Entegre Edin
Bir sonraki adım, Lighthouse CI'ı CI/CD hattınıza entegre etmektir. Tam adımlar CI/CD sağlayıcınıza bağlı olarak değişecektir, ancak genel süreç, CI/CD yapılandırmanıza Lighthouse CI komutlarını çalıştıran bir betik eklemeyi içerir.
GitHub Actions Kullanarak Örnek:
Deponuzda .github/workflows/lighthouse-ci.yml adında bir dosya oluşturun ve aşağıdaki içeriği ekleyin:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
Açıklama:
on.push.branches: İş akışınımaindalına yapılan push'larda tetikler.on.pull_request: İş akışını pull request'lerde tetikler.jobs.lighthouse.runs-on: İş için kullanılacak işletim sistemini belirtir (bu durumda Ubuntu).steps: İş içinde yürütülecek adımları tanımlar:actions/checkout@v3: Depoyu çeker.actions/setup-node@v3: Node.js'i kurar.npm ci: Bağımlılıkları yükler.Run Lighthouse CI: Lighthouse CI komutlarını çalıştırır:npm install -g @lhci/cli@0.11.x: Lighthouse CI CLI'ı genel olarak yükler. *Önemli*: Belirli bir sürümü kilitlemek her zaman önerilir.lhci autorun: Lighthouse CI'ı "autorun" modunda çalıştırır; bu mod denetimleri otomatik olarak toplar, performans bütçelerini onaylar ve sonuçları yükler.
CI/CD Entegrasyonu için Önemli Hususlar:
- Sunucu Başlatma:
lhci autorunkomutunu çalıştırmadan önce web sunucunuzun çalıştığından emin olun (ör.npm start). Sunucunuzu arka planda başlatmak için CI/CD yapılandırmanıza bir adım eklemeniz gerekebilir. - Veritabanı Geçişleri: Uygulamanız bir veritabanına bağlıysa, Lighthouse CI'ı çalıştırmadan *önce* CI/CD sürecinizin bir parçası olarak veritabanı geçişlerinin çalıştırıldığından emin olun.
- Ortam Değişkenleri: Uygulamanız ortam değişkenleri gerektiriyorsa, bunların CI/CD ortamınızda doğru şekilde yapılandırıldığından emin olun.
4. Lighthouse CI'ı Çalıştırın
Artık, main dalına değişiklikleri gönderdiğinizde veya bir pull request oluşturduğunuzda, Lighthouse CI iş akışı otomatik olarak çalışacaktır. Sonuçlar GitHub Actions arayüzünde mevcut olacaktır.
5. Lighthouse CI Sonuçlarını Görüntüleyin
Lighthouse CI sonuçları, lighthouserc.js dosyanızda belirtilen konuma (ör. temporary-public-storage) yüklenecektir. Bu sonuçlara CI/CD çıktısında verilen bağlantıyı takip ederek erişebilirsiniz. Bu sonuçlar, web sitenizin performansı, erişilebilirliği, SEO'su ve en iyi uygulamaları hakkında ayrıntılı bilgi sağlar.
Onaylamaları (Assertions) ve Performans Bütçelerini Yapılandırma
Lighthouse CI, web sitenizin performans hedeflerinizi karşıladığından emin olmak için onaylamaları ve performans bütçelerini yapılandırmanıza olanak tanır. Onaylamalar, belirli performans metriklerini (ör. First Contentful Paint, Largest Contentful Paint) önceden tanımlanmış eşiklere göre kontrol eden kurallardır. Performans bütçeleri, çeşitli performans metrikleri için kabul edilebilir sınırları tanımlar.
İşte lighthouserc.js dosyanızda onaylamaları nasıl yapılandıracağınıza bir örnek:
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
Açıklama:
first-contentful-paint: First Contentful Paint (FCP) için 2000ms'de bir uyarı eşiği belirler.largest-contentful-paint: Largest Contentful Paint (LCP) için 2500ms'de bir uyarı eşiği belirler.cumulative-layout-shift: Cumulative Layout Shift (CLS) için 0.1'de bir uyarı eşiği belirler.total-blocking-time: Total Blocking Time (TBT) için 500ms'de bir uyarı eşiği belirler.categories:performance: Genel Performans kategorisi puanı için 0.9'da bir uyarı eşiği belirler.categories:accessibility: Genel Erişilebilirlik kategorisi puanı için 0.8'de bir hata eşiği belirler.
Onaylama Seviyeleri:
off: Onaylamayı devre dışı bırakır.warn: Onaylama başarısız olursa bir uyarı gösterir.error: Onaylama başarısız olursa Lighthouse CI çalışmasını başarısız kılar.
Onaylamaları Özelleştirme:
Onaylamaları özel ihtiyaçlarınıza göre özelleştirebilirsiniz. Örneğin, kritik performans metrikleri için daha katı eşikler belirlemek veya uygulamanızla ilgili olmayan onaylamaları devre dışı bırakmak isteyebilirsiniz.
Bir Lighthouse CI Yükleme Hedefi Seçme
lighthouserc.js dosyanızdaki upload.target seçeneği, Lighthouse CI sonuçlarının nereye yükleneceğini belirtir. temporary-public-storage hedefi test ve geliştirme için kullanışlıdır, ancak veriler kalıcı olmadığı için üretim ortamları için uygun değildir.
İşte bazı alternatif yükleme hedefleri:
- Lighthouse CI Sunucusu: Üretim ortamları için önerilen yaklaşım Lighthouse CI sunucusunu kullanmaktır. Lighthouse CI sunucusu, Lighthouse CI sonuçlarınız için kalıcı bir depolama çözümü ve verilerinizi görüntülemek ve analiz etmek için bir kullanıcı arayüzü sağlar. Çeşitli bulut sağlayıcılarına dağıtılabilir veya kendi altyapınızda barındırılabilir.
- Google Cloud Storage: Lighthouse CI sonuçlarınızı bir Google Cloud Storage bucket'ına yükleyebilirsiniz. Bu, verilerinizi depolamak için uygun maliyetli ve ölçeklenebilir bir çözümdür.
- Amazon S3: Google Cloud Storage'a benzer şekilde, Lighthouse CI sonuçlarınızı bir Amazon S3 bucket'ına yükleyebilirsiniz.
Lighthouse CI Sunucusunu Kurma:
Lighthouse CI sunucusunu kurmak aşağıdaki adımları içerir:
- Lighthouse CI Sunucusunu Yükleyin: Lighthouse CI sunucusunu npm veya yarn kullanarak yükleyebilirsiniz:
- Veritabanını Yapılandırın: Lighthouse CI sunucusu, verilerini depolamak için bir veritabanı gerektirir. PostgreSQL, MySQL ve SQLite dahil olmak üzere çeşitli veritabanlarını kullanabilirsiniz. Veritabanı bağlantı ayarlarını
.envdosyasında yapılandırın. - Lighthouse CI Sunucusunu Başlatın: Lighthouse CI sunucusunu
lhci serverkomutunu kullanarak başlatın. - Lighthouse CI CLI'ı Sunucuyu Kullanacak Şekilde Yapılandırın:
lighthouserc.jsdosyanızı Lighthouse CI sunucusunu yükleme hedefi olarak kullanacak şekilde güncelleyin:
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
http://your-lhci-server.com adresini Lighthouse CI sunucunuzun URL'si ile ve YOUR_LHCI_TOKEN değerini projenizin erişim anahtarı ile değiştirin.
Lighthouse CI Kullanımı için En İyi Uygulamalar
Lighthouse CI'dan en iyi şekilde yararlanmak için şu en iyi uygulamaları izleyin:
- Her Kod Değişikliğinde Lighthouse CI Çalıştırın: Her kod değişikliğinde denetimleri çalıştırmak için Lighthouse CI'ı CI/CD hattınıza entegre edin. Bu, performans gerilemelerini erken yakalamanıza yardımcı olacaktır.
- Performans Bütçeleri Belirleyin: Web sitenizin kabul edilebilir performans eşikleri içinde kalmasını sağlamak için performans bütçeleri tanımlayın.
- Performans Trendlerini İzleyin: Trendleri belirlemek ve optimizasyonlarınızın etkisini ölçmek için web sitenizin performansını zaman içinde takip edin.
- Optimizasyon Çabalarını Önceliklendirin: Önce en kritik performans metriklerini optimize etmeye odaklanın.
- Gerçek Dünya Verilerini Kullanın: Optimizasyon çabalarınızı bilgilendirmek için gerçek dünya verilerini kullanın. Örneğin, kullanıcılarınız tarafından en sık ziyaret edilen sayfaları belirlemek için Google Analytics'i kullanabilirsiniz.
- Gerçek Cihazlarda Test Edin: Gerçek dünya koşullarında iyi performans gösterdiğinden emin olmak için web sitenizi gerçek cihazlarda test edin.
- Lighthouse CI Sonuçlarını Düzenli Olarak Gözden Geçirin: Lighthouse CI sonuçlarını düzenli olarak gözden geçirdiğinizden ve belirlenen performans sorunlarını gidermek için harekete geçtiğinizden emin olun.
- Görüntüleri Optimize Edin: Kaliteden ödün vermeden dosya boyutlarını küçültmek için görüntülerinizi optimize edin. ImageOptim (macOS), TinyPNG ve ImageKit gibi araçlar bu konuda kullanışlıdır.
- CSS ve JavaScript'i Küçültün: Boyutlarını küçültmek için CSS ve JavaScript dosyalarınızı küçültün. UglifyJS ve CSSNano gibi araçlar bu konuda yardımcı olabilir.
- Tarayıcı Önbelleklemesinden Yararlanın: Web sitenizin sunucuya yaptığı istek sayısını azaltmak için tarayıcı önbelleklemesinden yararlanın.
- Bir İçerik Dağıtım Ağı (CDN) Kullanın: Web sitenizin içeriğini dünya çapındaki sunuculara dağıtmak için bir CDN kullanın. Bu, farklı coğrafi konumlardaki kullanıcılar için yükleme sürelerini iyileştirebilir. Cloudflare ve Amazon CloudFront gibi hizmetler popüler CDN'lerdir.
- Ekran Dışındaki Görüntüleri Erteleyin: Ekranda hemen görünmeyen görüntüler için tembel yükleme (lazy loading) uygulayın. Bu, ilk sayfa yükleme süresini önemli ölçüde iyileştirebilir. Basit tembel yükleme için
loading="lazy"özelliği kullanılabilir. - Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın: Sayfanızın oluşturulmasını engelleyen kaynakları belirleyin ve ortadan kaldırın. Bu genellikle kritik CSS'yi satır içine almayı ve kritik olmayan CSS ve JavaScript'i ertelemeyi içerir.
- JavaScript Yürütme Süresini Azaltın: Yavaş çalışan işlevleri belirlemek ve optimize etmek için JavaScript kodunuzu profilleyin. Kod bölme (code splitting) ve ağaç sallama (tree shaking) gibi teknikler, indirilmesi ve yürütülmesi gereken JavaScript miktarını azaltmaya yardımcı olabilir.
İleri Düzey Lighthouse CI Teknikleri
Lighthouse CI'ın temellerine hakim olduğunuzda, performans izlemenizi daha da geliştirmek için bazı ileri düzey teknikleri keşfedebilirsiniz:
- Özel Lighthouse Denetimleri: Uygulamanızla ilgili belirli performans sorunlarını test etmek için özel Lighthouse denetimleri oluşturabilirsiniz.
- Başsız Chrome Yapılandırması: Belirli cihaz emülasyonlarını veya ağ kısıtlama ayarlarını kullanmak için Başsız Chrome'u (Headless Chrome) yapılandırın.
- İzleme Araçlarıyla Entegrasyon: Web sitenizin performansının daha kapsamlı bir görünümünü elde etmek için Lighthouse CI'ı mevcut izleme araçlarınızla (ör. New Relic, Datadog) entegre edin.
- Görsel Gerileme Testi: Performansı etkileyebilecek görsel değişiklikleri tespit etmek için Lighthouse CI'ı görsel gerileme testi araçlarıyla birleştirin.
Küresel Kitleler için Lighthouse CI: Uluslararası Web Siteleri için Dikkat Edilmesi Gerekenler
Küresel kitleleri hedefleyen web siteleri için Lighthouse CI kullanırken aşağıdakileri göz önünde bulundurun:
- Birden Fazla Konumdan Test Edin: Sunucu yanıt süreleri, kullanıcının konumuna göre önemli ölçüde değişebilir. Bir CDN (İçerik Dağıtım Ağı) kullanın ve uluslararası kullanıcılarınız için performansın daha doğru bir resmini elde etmek amacıyla Lighthouse CI denetimlerini farklı coğrafi bölgelerden çalıştırmayı düşünün. Bazı CI/CD sağlayıcıları, çalıştırıcının coğrafi konumunu belirtme seçenekleri sunar.
- Ağ Koşullarını Hesaba Katın: Ağ hızları ve gecikme süresi dünya genelinde büyük farklılıklar gösterir. Web sitenizin çeşitli kısıtlamalar altında nasıl performans gösterdiğini anlamak için Lighthouse CI denetimleriniz sırasında farklı ağ koşullarını simüle edin. Lighthouse, 3G gibi daha yavaş bağlantıları simüle ederek ağ bağlantısını yavaşlatmanıza olanak tanır.
- İçerik Yerelleştirme: Yerelleştirilmiş içeriğinizin doğru şekilde optimize edildiğinden emin olun. Bu, farklı diller ve karakter setleri için görüntü optimizasyonunu ve görüntüleme sorunlarını önlemek için uygun kodlamayı içerir.
- Yazı Tipi Yükleme: Farklı diller için yazı tipi yüklemesini optimize edin. Yazı tipi yüklenirken metnin görünmez kalmasını önlemek için font-display: swap kullanmayı düşünün.
- Üçüncü Taraf Betikleri: Üçüncü taraf betiklerine dikkat edin, çünkü bunlar özellikle daha yavaş ağ bağlantılarına sahip bölgelerdeki kullanıcılar için performansı önemli ölçüde etkileyebilir. Üçüncü taraf betik performansını düzenli olarak denetleyin ve kritik betikleri eşzamansız olarak yüklemeyi veya kendi sunucunuzda barındırmayı düşünün.
- Mobil Optimizasyon: Mobil kullanım dünyanın birçok yerinde yaygındır. Web sitenizin mobil cihazlar için optimize edildiğinden ve Lighthouse CI denetimlerinizin mobil özel testleri içerdiğinden emin olun.
Yaygın Lighthouse CI Sorunlarını Giderme
Lighthouse CI kullanırken karşılaşabileceğiniz bazı yaygın sorunlar ve bunları nasıl gidereceğiniz aşağıda açıklanmıştır:
- Lighthouse CI "Zaman Aşımı" Hatasıyla Başarısız Oluyor: Bu, web sitenizin yüklenmesi çok uzun sürerse veya Lighthouse CI web sitenize bağlanamazsa olabilir.
lighthouserc.jsdosyanızdaki zaman aşımı değerini artırmayı deneyin veya hatalar için web sitenizin sunucu günlüklerini kontrol edin. - Lighthouse CI Tutarsız Sonuçlar Raporluyor: Lighthouse sonuçları, ağ koşulları veya diğer faktörler nedeniyle çalışmalar arasında biraz farklılık gösterebilir. Daha kararlı bir ortalama elde etmek için birden çok denetim çalıştırın.
- Lighthouse CI Sonuçları Yükleyemiyor:
upload.targetyapılandırmanızı kontrol edin ve Lighthouse CI sunucunuzun çalıştığından ve erişilebilir olduğundan emin olun. Ayrıca, doğru erişim anahtarının yapılandırıldığını doğrulayın. - Lighthouse CI Beklenmedik Performans Gerilemeleri Raporluyor: Gerileme tespit edilmeden önce yapılan kod değişikliklerini araştırın. Hangi belirli performans metriklerinin gerilediğini belirlemek için Lighthouse CI raporlarını kullanın ve optimizasyon çabalarınızı bu alanlara odaklayın.
Sonuç
Frontend Lighthouse CI, web uygulamalarının sürekli performans izlemesi için güçlü bir araçtır. Lighthouse CI'ı CI/CD hattınıza entegre ederek, performans sorunlarını proaktif olarak belirleyip çözebilir ve web sitenizin optimum bir kullanıcı deneyimi sunmasını sağlayabilirsiniz. Dünya çapındaki kullanıcılar için mümkün olan en iyi deneyimi yaratmak amacıyla kurulumunuzu, onaylama kurallarınızı ve test konumlarınızı küresel kitlelere göre uyarlamayı unutmayın.
Bu kılavuzda özetlenen adımları ve en iyi uygulamaları izleyerek, web sitenizin performansını önemli ölçüde artırabilir, hemen çıkma oranlarını düşürebilir, dönüşüm oranlarını artırabilir ve sonuç olarak iş hedeflerinize ulaşabilirsiniz. Lighthouse CI'ı bugün uygulamaya başlayın ve web uygulamalarınızın tüm potansiyelini ortaya çıkarın.