Lighthouse'a Giriş

Lighthouse, web sayfalarının kalitesini artırmanıza yardımcı olacak açık kaynaklı otomatik bir araçtır. Bu aracı, herkese açık veya kimlik doğrulaması gerektiren herhangi bir web sayfasında çalıştırabilirsiniz. Performans, erişilebilirlik, progresif web uygulamaları, SEO ve daha birçok konuda denetimler içerir.

Lighthouse'u Chrome Geliştirici Araçları'nda, komut satırından veya Node modülü olarak çalıştırabilirsiniz. Lighthouse'a denetlenmesi için bir URL verin, sayfa üzerinde bir dizi denetim çalıştırır ve ardından sayfanın ne kadar iyi performans gösterdiğiyle ilgili bir rapor oluşturur. Başarısız denetimleri, sayfanın nasıl iyileştirileceğine dair göstergeler olarak kullanın. Her denetleme, denetlemenin neden önemli olduğunun yanı sıra nasıl düzeltileceğini açıklayan bir referans içerir.

Sitelerinizde gerilemelerin olmasını önlemek için Lighthouse CI'yi de kullanabilirsiniz.

Başlayın

Size en uygun Lighthouse iş akışını seçin:

• Chrome Geliştirici Araçları'nda. Kimlik doğrulaması gerektiren sayfaları denetleyin ve raporlarınızı doğrudan tarayıcıdan kullanıcı dostu bir biçimde okuyun.
• Komut satırından. Kabuk komut dosyalarıyla Lighthouse çalışmalarınızı otomatikleştirin.
• Düğüm modülü olarak. Lighthouse'u sürekli entegrasyon sistemlerinize entegre edin.
• Web kullanıcı arayüzünden. Lighthouse'u çalıştırın ve raporlara bağlayın. Kurulum gerekmez.

Chrome DevTools'da Lighthouse'u çalıştırma

Lighthouse'un Chrome Geliştirici Araçları'nda kendi paneli vardır. Bir rapor çalıştırmak için:

1. Masaüstü için Google Chrome'u indirin.
2. Chrome'u açıp denetlemek istediğiniz URL'ye gidin. Web'deki herhangi bir URL'yi denetleyebilirsiniz.
3. Chrome Geliştirici Araçları'nı açın.

4. Lighthouse sekmesini tıklayın.

   

5. Sayfa yükleme etkinliğini analiz et'i tıklayın. Geliştirici Araçları, denetim kategorilerinin listesini gösterir. Bunların tümünü etkin bırakın.

6. Denetim çalıştır'ı tıklayın. 30 ila 60 saniye sonra Lighthouse, sayfayla ilgili bir rapor sunar.

   

Node komut satırı aracını yükleme ve çalıştırma

Node modülünü yüklemek için:

1. Masaüstü için Google Chrome'u indirin.
2. Düğüm'ün mevcut Uzun Vadeli Destek sürümünü yükleyin.
3. Lighthouse'u yükleyin. -g işareti, modülü genel modül olarak yükler.

npm install -g lighthouse

Denetim çalıştırmak için:

lighthouse <url>

Tüm seçenekleri görmek için:

lighthouse --help

Node modülünü programatik olarak çalıştırma

Lighthouse'u Node modülü olarak programatik olarak çalıştırma örneği için Programatik olarak kullanma bölümüne bakın.

PageSpeed Insights'ı çalıştır

PageSpeed Insights'ta Lighthouse'ı çalıştırmak için:

1. PageSpeed Insights'a gidin.
2. Bir web sayfası URL'si girin.

3. Analyze (Analiz Et) seçeneğini tıklayın.

   

Lighthouse'u Chrome Uzantısı olarak Çalıştırın

Uzantıyı yüklemek için:

1. Masaüstü için Google Chrome'u indirin.
2. Chrome Web Mağazası'ndan Lighthouse Chrome uzantısını yükleyin.

Denetim çalıştırmak için:

1. Chrome'da, denetlemek istediğiniz sayfaya gidin.

2. Chrome adres çubuğunun yanındaki veya Chrome'un uzantı menüsündeki Lighthouse'u tıklayın. Tıklandığında Lighthouse menüsü genişler.

   

3. Rapor üret'i tıklayın. Lighthouse, denetimlerini o anda odaklanılan sayfa üzerinde çalıştırır ve ardından sonuçların raporunu içeren yeni bir sekme açar.

   

Raporları internet üzerinden paylaşma ve görüntüleme

Raporları internette görüntülemek ve paylaşmak için Lighthouse Görüntüleyici'yi kullanın.

Raporları JSON olarak paylaşma

Lighthouse görüntüleyicinin, Lighthouse raporunun JSON çıkışına ihtiyacı vardır. JSON çıkışlarını aşağıdaki gibi oluşturun:

• Lighthouse raporundan. Menü için more_vert simgesini, ardından JSON olarak kaydet'i tıklayın.
• Komut satırı. Çalıştırma: shell lighthouse --output json --output-path <path/for/output.json>

Rapor verilerini görüntülemek için:

1. Lighthouse Görüntüleyici'yi açın.
2. JSON dosyasını Görüntüleyici'ye sürükleyin veya dosya gezgininizi açıp dosyayı seçmek için Görüntüleyici'nin herhangi bir yerini tıklayın.

Raporları GitHub Gist'i olarak paylaşma

JSON dosyalarını manuel olarak aktarmak istemiyorsanız raporlarınızı gizli GitHub gist'leri olarak da paylaşabilirsiniz. Özetlerin avantajlarından biri, ücretsiz sürüm denetimidir.

Bir raporu özet olarak dışa aktarmak için:

1. more_vert menüsünü, ardından Görüntüleyicide Aç'ı tıklayın. Rapora https://googlechrome.github.io/lighthouse/viewer/ adresinden ulaşabilirsiniz.
2. Görüntüleyici'de more_vert menüsünü, ardından Özet olarak kaydet'i tıklayın. Bunu ilk kez yaptığınızda, temel GitHub verilerinize erişmek ve özetlerinize okuma ve yazma izni vermek için bir pop-up gösterilir.

Lighthouse'ın CLI sürümünden bir raporu gist olarak dışa aktarmak için manuel olarak gist oluşturun ve raporun JSON çıktısını gist'e kopyalayıp yapıştırın. JSON çıkışını içeren gist dosya adı .lighthouse.report.json ile bitmelidir. Komut satırı aracından JSON çıkışının nasıl oluşturulacağına dair bir örnek için Raporları JSON olarak paylaşma bölümüne bakın.

Özet olarak kaydedilmiş bir raporu görüntülemek için:

• Görüntüleyenin URL'sine ?gist=<ID> ekleyin. Burada <ID>, gist'in kimliğidir. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
• Görüntüleyici'yi açın ve bir özetin URL'sini yapıştırın.

Lighthouse'un genişletilebilirliği

Lighthouse, tüm web geliştiricileri için alakalı ve uygulanabilir yönergeler sağlamayı amaçlar. Bu amaçla, Lighthouse'u özel ihtiyaçlarınıza göre uyarlamanıza olanak tanıyan iki özellik bulunuyor.

Yığma paketleri

Geliştiriciler web sayfalarını oluşturmak için birçok farklı teknoloji (arka uç, içerik yönetim sistemleri ve JavaScript çerçeveleri) kullanır. Lighthouse, genel öneriler sunmak yerine kullanılan araçlara bağlı olarak alakalı ve uygulanabilir tavsiyeler sunar.

Yığın paketleri, Lighthouse'un sitenizin hangi platformda oluşturulduğunu algılamasına ve yığına dayalı belirli öneriler göstermesine olanak tanır. Bu öneriler, topluluktaki uzmanlar tarafından tanımlanır ve seçilir.

Paket katkıda bulunmak için Katkıda Bulunma Kuralları'nı inceleyin.

Lighthouse eklentileri

Lighthouse eklentileri, alan uzmanlarının Lighthouse'un işlevlerini topluluklarının özel ihtiyaçlarına göre genişletmesine olanak tanır. Yeni denetlemeler oluşturmak için Lighthouse'ın topladığı verilerden yararlanabilirsiniz. Lighthouse eklentileri temel olarak, Lighthouse tarafından çalıştırılacak ve rapora yeni bir kategori olarak eklenecek bir dizi denetimi uygulayan bir düğüm modülüdür.

Kendi eklentinizi nasıl oluşturacağınız hakkında daha fazla bilgi için Lighthouse GitHub deposundaki Eklenti El Kitabı'mıza göz atın.

Lighthouse'u entegre etme

Lighthouse'u sunduğunuz ürün veya hizmetlerin bir parçası olarak entegre eden bir şirket veya bireyseniz bu muhteşemdir. Lighthouse'u mümkün olduğunca çok kullanıcının kullanmasını istiyoruz.

Lighthouse'un hem markamızı korurken kullanıldığını göstermek için Lighthouse Entegre Etmeyle İlgili Kurallar ve Marka Varlıkları'na bakın.

Lighthouse'a katkıda bulunma

Lighthouse açık kaynaktır ve katkılarınızı bekliyoruz. Düzeltebileceğiniz hataları veya oluşturabileceğiniz ya da iyileştirebileceğiniz denetimleri bulmak için deposunun sorun izleyicisine göz atın. Sorunlar, performans metrikleri, yeni denetlemelerle ilgili fikirler veya Lighthouse ile ilgili diğer konuları tartışmak için iyi bir yerdir.