deniz feneri bir sayfanın performansını ölçmenize ve geliştirmenin yollarını bulmanıza yardımcı olan bir araçtır. Lighthouse’u nasıl kullandığınıza ilişkin genel iş akışı aşağıda verilmiştir:
- Lighthouse’a hangi sayfayı denetlemesi gerektiğini söylersiniz.
- Lighthouse bu sayfayı yükler ve sayfanın çeşitli performans kilometre taşlarına ulaşmasının ne kadar sürdüğünü kaydeder. Bu kilometre taşları denir metrikler.
- Lighthouse size sayfanın nasıl çalıştığına dair bir rapor verir. Rapor, her metrik için bir puan ve aşağıdakilerin bir listesini sağlar: fırsatlar bunları uygularsanız sayfanın daha hızlı yüklenmesini sağlar.
Göreviniz, metrik puanlarınızı zaman içinde iyileştirmek veya en azından daha kötüye gitmediğinden emin olmaktır. Bununla birlikte, ölçümler üzerinde 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ı iyileştirme eğilimindedir.
Lighthouse’u profil sayfanızdan çalıştırın #
Lighthouse’u web.dev profil sayfanızdan çalıştırın:
-
Herhangi bir URL sağlayın ve Lighthouse, sayfanın ne kadar iyi performans gösterdiğine dair bir rapor oluşturan bir dizi denetim gerçekleştirir.
-
Sayfanızın iyileştirilebileceği alanları belirlemek için denetimler raporunu inceleyin.
-
Her denetim için, puanlarınızı iyileştirmek için atabileceğiniz rehberlik ve acil adımları bulacaksınız.
Chrome DevTools, doğrudan Google Chrome tarayıcısında yerleşik olarak bulunan web geliştirici araçları grubudur. DevTools’u edinmek için herhangi bir şey indirmeniz gerekmez. Chrome’unuz varsa DevTools’a sahipsiniz demektir.
- Chrome’da denetlemek istediğiniz sayfaya gidin.
- DevTools’u açmak için “Control+Shift+J” (veya Mac’te “Command+Option+J”) tuşlarına basın.
Tıkla denetimler sekme. Bu sekmeyi görmüyorsanız, » sembolüne tıklayın ve ardından denetimler listeden. Deniz feneri, motora güç sağlayan motordur. denetimler panel. Bu yüzden bir deniz feneri görüntüsü görüyorsunuz.
- Emin ol mobil radyo düğmesi seçilir. Lighthouse sayfanızı denetlerken, bir mobil cihazın görüntü portunu ve kullanıcı aracısı dizesini simüle eder.
- Emin ol Verim onay kutusu etkinleştirildi. Geri kalan onay kutularını etkinleştirebilir veya devre dışı bırakabilirsiniz. denetimler bölüm. Bunları etkinleştirirseniz, sayfanızın diğer yönlerini iyileştirmenin yolları hakkında bir dizi fırsat görürsünüz.
- Emin ol Simüle Hızlı 3G, 4x CPU Yavaşlaması radyo düğmesi seçilir. Lighthouse, sayfayı yüklerken ağınızı veya CPU’nuzu gerçekten kısıtlamaz. Bunun yerine, normal koşullar altında sayfanın yüklenmesinin ne kadar sürdüğüne bakar ve ardından makinenizinkinden 4 kat daha az güçlü bir CPU’ya sahip hızlı bir 3G ağında yüklemenin ne kadar süreceğini tahmin eder.
- emin olun Açık depolama onay kutusu etkinleştirildi. Bu seçenek, Lighthouse’u her sayfa kaynağı için ağa gitmeye zorlar; bu, ilk kez gelen ziyaretçilerin sayfayı nasıl deneyimledikleridir.
- Tıklamak Denetimleri Çalıştır. 5 ila 10 saniye sonra Lighthouse size bir rapor gösterir.
Örneğin, şununla bazı denetimler çalıştırırsanız: Simüle Hızlı 3G, 4x CPU Yavaşlatma azaltma etkin ve diğer zamanlarda denetimleri kısıtlama devre dışıyken çalıştırdığınızda, kısıtlamayı etkinleştirdiğinizde metrik puanlarınız önemli ölçüde daha düşük olacaktır. Gerçekte değişen tek şey yapılandırmanızken, sayfanızın şimdi neden bu kadar yavaş olduğunu anlamaya çalışmak için çok zaman harcayabilirsiniz.
Raporunuzu anlayın #
Raporunuzun sağ üst kısmında genel performans puanınız listelenir. 100 mükemmel bir puandır. Genel puanın altında metrik puanları bulunur. Lighthouse v3 Puanlama Kılavuzu her metrik puanının genel puana nasıl katkıda bulunduğunu açıklar.
Hakkında daha fazla bilgi edinmek için bir metriğin üzerine gelin. Tıklamak Daha fazla bilgi edin bununla ilgili belgeleri okumak için.
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ştirme fırsatlarını görüyorsunuz.
Hakkında daha fazla bilgi edinmek için bir fırsata 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ı yeniden denetleyin. Metrik puanlarınız ideal olarak biraz daha iyi olmalı ve Lighthouse artık bu fırsatı üzerinde çalışılacak bir şey olarak işaretlememelidir.
Lighthouse’u kendiniz çalıştırmak, yerinde kontrol sorunları için harikadır, ancak nihayetinde sitenizin sağlıklı kalmasını sağlamak için sürekli izleme kurmak isteyeceksiniz. Lighthouse ilerlemenizi zaman içinde takip etmek için sitenizi profilinize ekleyin.