Lighthouse, bir sayfanın performansını ölçmenize ve iyileştirmenin yollarını bulmanıza yardımcı olan bir araçtır. Lighthouse'u nasıl kullanacağınızla ilgili genel iş akışını burada bulabilirsiniz:
- Lighthouse'a hangi sayfayı denetleyeceğini söylersiniz.
- Lighthouse bu sayfayı yükler ve sayfanın çeşitli performans dönüm noktalarına ne kadar sürede ulaştığını kaydeder. Bu ara hedeflere metrics denir.
- Lighthouse, sayfanın nasıl çalıştığıyla ilgili bir rapor sunar. Rapor, her metrik için bir puan ve bunları uygularsanız sayfanın daha hızlı yüklenmesini sağlayacak fırsatların bir listesi sağlar.
Göreviniz, metrik puanlarınızı zaman içinde yükseltmek veya en azından daha kötü hale gelmemesini sağlamaktır. Metrikler üzerinde doğrudan çalışmanın bir yolu yoktur. Bunun yerine, Lighthouse'un sağladığı fırsatları izlersiniz. Bu fırsatlar üzerinde çalışmak metrik puanlarınızı yükseltme eğilimindedir.
Profil sayfanızdan Lighthouse'u çalıştırın
web.dev profil sayfanızdan Lighthouse'u çalıştırın:
Herhangi bir URL sağladığınızda Lighthouse, sayfanın ne kadar iyi performans gösterdiğine dair rapor oluşturan bir dizi denetim çalıştırır.
Sayfanızın iyileştirilebileceği alanları belirlemek için denetim raporunu inceleyin.
Her denetimde, notlarınızı yükseltmek için uygulayabileceğiniz adımlar ve yol gösterici bilgiler sunulmaktadır.
Chrome Geliştirici Araçları'ndan Lighthouse'u çalıştırın
Chrome Geliştirici Araçları, doğrudan Google Chrome tarayıcısında yerleşik olarak bulunan bir dizi web geliştiricisi aracıdır. Geliştirici Araçları'nı edinmek için herhangi bir şey indirmenize gerek yoktur. Cihazınızda Chrome varsa Geliştirici Araçları'na da sahipsiniz.
- Chrome'da, denetlemek istediğiniz sayfaya gidin.
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
Denetimler sekmesini tıklayın. Bu sekmeyi görmüyorsanız » simgesini tıklayın ve listeden Denetimler'i seçin. Lighthouse, Denetimler panelini çalıştıran motordur. Bu yüzden deniz feneri resmini görüyorsunuz.
- Mobil radyo düğmesinin seçili olduğundan emin olun. Lighthouse, sayfanızı denetlediğinde bir mobil cihazın görüntü alanını ve kullanıcı aracısı dizesini simüle eder.
- Performans onay kutusunun etkin olduğundan emin olun. Denetimler bölümünde diğer onay kutularını etkinleştirebilir veya devre dışı bırakabilirsiniz. Bunları etkinleştirirseniz sayfanızın diğer yönlerini iyileştirme yollarıyla ilgili bir dizi fırsat görürsünüz.
- Simulated Fast 3G, 4x CPU Slowdown radyo düğmesinin seçili olduğundan emin olun. Lighthouse, sayfayı yüklerken aslında ağınızı veya CPU'nuzu kısıtlamaz. Bunun yerine, sayfanın normal koşullarda yüklenmesinin ne kadar sürdüğüne bakar ve daha sonra, makinenizden 4 kat daha düşük CPU'ya sahip hızlı bir 3G ağında ne kadar süre geçebileceğini tahmin eder.
- Depolama Alanını Temizle onay kutusunun etkinleştirildiğinden emin olun. Bu seçenek, Lighthouse'u her sayfa kaynağı için ağa gitmeye zorlar. Bu, ilk kez gelen ziyaretçilerin sayfada yaşadığı deneyimdir.
- Denetimleri Çalıştır'ı tıklayın. Lighthouse, 5-10 saniye sonra size bir rapor gösterir.
Örneğin, bazı denetlemeleri 4x CPU Yavaşlaması Etkin ve 4x CPU Yavaşlaması etkinken çalıştırırsanız ve ardından kısıtlama devre dışıyken denetimlerini çalıştırdığınızda kısıtlama etkin olduğunda metrik puanlarınız önemli ölçüde düşer. Sayfanızın artık neden bu kadar yavaş olduğunu anlamaya çok fazla zaman harcıyor olabilirsiniz. Fakat aslında değişen tek şey yapılandırmanız olduğundan.
Raporunuzu anlama
Raporunuzun sağ üst kısmında genel performans puanınız listelenir. 100 mükemmel bir puandır. Toplam puanın altında metrik puanları bulunur. Lighthouse v3 Puanlama Kılavuzu, her bir metrik puanının genel puana nasıl katkıda bulunduğunu açıklar.
Bir metrik hakkında daha fazla bilgi edinmek için fareyle metriğin üzerine gelin. Bununla ilgili belgeleri okumak için Daha fazla bilgi'yi tıklayın.
Metrik puanlarınızın altında, sayfanın yüklenirken nasıl göründüğüne dair ekran görüntüleri görürsünüz.
Ekran görüntülerinin altında, sayfanın performansını iyileştirmeye yönelik fırsatları görürsünüz.
Hakkında daha fazla bilgi edinmek bir fırsatı tıklayın.
Sonraki adımlar
Sayfanızı, profil sayfanızdan veya Chrome Geliştirici Araçları'ndan denetlemek için Lighthouse'u kullanmayı deneyin. Fırsatlardan birini uygulayın ve ardından değişikliğin raporunuzu nasıl etkilediğini görmek için sayfanızı tekrar denetleyin. İdeal olarak, metrik puanlarınızın biraz daha iyi olması gerekir ve Lighthouse artık bu fırsatı üzerinde çalışılacak bir şey olarak işaretlememelidir.
Lighthouse'u kendiniz çalıştırmak, nokta kontrolü sorunları için harikadır ancak nihayetinde, sitenizin sağlıklı durumda kaldığından emin olmak için sürekli izlemeyi ayarlamak istersiniz. Lighthouse'un zaman içindeki ilerlemesini takip etmek için sitenizi profilinize ekleyin.