Lighthouse, bir sayfanın performansını ölçmenize ve performansı iyileştirmenin yollarını bulmanıza yardımcı olan bir araçtır. Lighthouse'ı kullanmayla ilgili genel iş akışı aşağıda verilmiştir:
- Lighthouse'a hangi sayfanın denetlenmesi gerektiğini siz belirtirsiniz.
- Lighthouse bu sayfayı yükler ve sayfanın çeşitli performans aşamalarına ulaşmasının ne kadar sürdüğünü kaydeder. Bu aşamalara metrikler denir.
- Lighthouse, sayfanın performansıyla ilgili bir rapor sunar. Raporda her metrik için bir puan ve uygulandığında sayfanın daha hızlı yüklenmesini sağlayacak fırsatların listesi sağlanır.
Göreviniz, metrik puanlarınızı zaman içinde iyileştirmek veya en azından kötüleşmediğinden emin olmaktır. Ancak metriklerle doğrudan çalışmanın bir yolu yoktur. Bunun yerine, Lighthouse'un sunduğu fırsatları takip edersiniz. Bu fırsatlar üzerinde çalışmak, metrik puanlarınızı artırmaya yardımcı olur.
Lighthouse'u profil sayfanızdan çalıştırma
Lighthouse'u web.dev profilinizden çalıştırın:
Herhangi bir URL sağladığınızda Lighthouse bir dizi denetim çalıştırarak sayfanın ne kadar iyi performans gösterdiğine dair bir rapor oluşturur.
Sayfanızın iyileştirilebileceği alanları belirlemek için denetim raporunu inceleyin.
Her denetim için puanlarınızı iyileştirmek üzere uygulayabileceğiniz acil adımlar ve yol gösterici bilgiler bulabilirsiniz.
Chrome Geliştirici Araçları'ndan Lighthouse'u çalıştırma
Chrome Geliştirici Araçları, doğrudan Google Chrome tarayıcısına yerleştirilmiş bir dizi web geliştirici aracıdır. DevTools'u kullanmak için herhangi bir şey indirmeniz gerekmez. Chrome'unuz varsa DevTools'unuz da vardır.
- Chrome'da, denetlemek istediğiniz sayfaya gidin.
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+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 destekleyen motordur. Bu nedenle bir deniz feneri resmi görüyorsunuz.
- Mobil radyo düğmesinin seçili olduğundan emin olun. Lighthouse, sayfanızı denetlerken mobil cihazın ekran görüntüsünü ve kullanıcı aracısı dizesini simüle eder.
- Performans onay kutusunun etkinleştirildiğinden emin olun. Denetim bölümündeki onay kutularının geri kalanını etkinleştirebilir veya devre dışı bırakabilirsiniz. Bu özellikleri etkinleştirirseniz sayfanızı diğer yönlerden iyileştirmeye yönelik birçok fırsat görürsünüz.
- Simüle Edilen Hızlı 3G, 4x CPU Yavaşlatma radyo düğmesinin seçili olduğundan emin olun. Lighthouse, sayfayı yüklerken ağınızı veya CPU'nuzu kısıtlamaz. Bunun yerine, sayfanın normal koşullarda ne kadar sürede yüklendiğini inceler ve ardından, makinenizinkinden 4 kat daha az güçlü bir CPU'ya sahip hızlı bir 3G ağında ne kadar süreceğini tahmin eder.
- Depoyu 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 sayfayı deneyimleme şeklidir.
- Denetimler Gerçekleştir'i tıklayın. Lighthouse 5-10 saniye sonra size bir rapor gösterir.
Örneğin, bazı denetimleri Simüle Edilen Hızlı 3G, 4x CPU Yavaşlatma tarama sınırlaması etkin olarak çalıştırır ve diğer zamanlarda tarama sınırlamasını devre dışı bırakarak denetim çalıştırırsanız tarama sınırlamasını etkinleştirdiğinizde metrik puanlarınız önemli ölçüde daha düşük olur. Gerçekte değişen tek şey yapılandırmanız olduğu halde sayfanızı neden çok daha yavaş bulduğunuzu anlamaya çalışırken çok fazla zaman harcayabilirsiniz.
Raporunuzu anlama
Raporunuzun sağ üst kısmında genel performans puanınız listelenir. 100, mükemmel puandır. Genel puanın altında metrik puanları yer alır. Lighthouse v3 Puanlama Kılavuzu, her 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 ilgili metriğin üzerine gelin. Hakkında doküman 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üğünün ekran görüntülerini görürsünüz.
Ekran görüntülerinin altında, sayfanın performansını iyileştirme fırsatlarını görürsünüz.
Hakkında daha fazla bilgi edinmek istediğiniz fırsatı tıklayın.
Sonraki adımlar
Sayfanızı denetlemek için profil sayfanızdan veya Chrome Geliştirici Araçları'ndan 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 biraz daha iyi olur ve Lighthouse bu fırsatı üzerinde çalışılması gereken bir şey olarak işaretlemeyi bırakır.
Lighthouse'u kendiniz çalıştırmak, sorunları tespit etmek için mükemmel bir yöntemdir ancak sitenizin sağlıklı kalmasını sağlamak için sürekli izlemeyi ayarlamanız gerekir. Lighthouse ilerlemenizi zaman içinde izlemek için sitenizi profilinize ekleyin.