Chrome Geliştirici Araçları'ndaki Lighthouse, kodlama aracınızın erişilebilirlik, SEO, en iyi uygulamalar ve aracıyla göz atma için canlı durum kontrolleri yaparak web sitesi kalitesini değerlendirmesine olanak tanır.
Ajan tabanlı iş akışında, kodlama aracınız genel iyileştirmeler için kod tabanınızda rastgele arama yapmak yerine belirli ve ölçülebilir çalışma zamanı sorunlarını belirlemek için Lighthouse denetimlerini kullanır.
Bu hedefli yaklaşım, doğrudan temsilcinizin bağlamında uygulanabilir tavsiyeler sunar. Böylece kodlama temsilciniz, kod tabanınızda yapılan geniş kapsamlı ve statik aramalara kıyasla hataları daha doğru bir şekilde bulup düzeltebilir.
Lighthouse denetimleri şu ana kategorilere odaklanır:
- Erişilebilirlik (a11y): Sitenizin, ekran okuyucu kullananlar da dahil olmak üzere herkes tarafından kullanılabilmesini sağlar.
- SEO: Arama motorlarının içeriğinizi bulup anlayabilmesini sağlamak için teknik kontroller yapar.
- En iyi uygulamalar: Sitenizin modern web geliştirme standartlarına uygun olduğunu onaylayın.
- Acenteli göz atma: Yapay zeka asistanlarının web sitenizi ne kadar anlayabildiğini ve web sitenizle ne kadar etkileşime geçebildiğini ölçün.
Lighthouse'u kullanırken aşağıdakileri göz önünde bulundurun:
- Yerel ve hazırlama desteği: Aracınız,
file://protokolü üzerinden erişilen yerel geliştirme sunucuları ve yerel HTML dosyaları da dahil olmak üzere Chrome'da görünen tüm sayfaları denetleyebilir. - Tarayıcı davranışı: Denetimler, görünümünüzü kısa süreliğine kesintiye uğratabilir. Araç farklı cihazları simüle ederken sayfanın yeniden boyutlandırıldığını veya yeniden yüklendiğini görebilirsiniz.
Web kalitesini denetleme
Lighthouse'u geliştirme sürecinize entegre etmek için aşağıdaki iş akışlarını ve örnekleri kullanın.
Erişilebilirliği doğrulama
Bir kullanıcı arayüzünü değiştirdiğinizde, sayfanın erişilebilirliğini koruduğunu doğrulama görevini temsilcinize atayın.
Örnek istem:
How can I improve accessibility on this page as measured by Lighthouse?
Örnek temsilci yürütme: Temsilciniz, formFactor değeri mobile olarak ayarlanmış bir Lighthouse denetimini tetikler. Yetersiz renk kontrastı veya eksik ARIA etiketleri gibi sonuçları analiz eder ve belirli kod düzeltmeleri önerir.
Arama görünürlüğü için SEO'yu denetleme
Teknik SEO gereksinimleri genellikle geliştirme döngüsünde çok geç fark edilir. Geliştirme yaparken temsilcinizden teknik engelleri bulup düzeltmesini isteyebilirsiniz.
Örnek istem:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
Örnek aracı yürütme: Aracınız SEO denetimi gerçekleştirir ve eksik meta etiketleri, kanonik bağlantıları veya açıklayıcı metinleri tanımlar. Ardından, denetim hatasını gidermek için kaynak kodunu güncellemeyi teklif edebilir.
En iyi uygulamaları doğrulama
Yerel sunucunuzun veya hazırlama sitenizin güvenlik ve teknik en iyi uygulamalara uygun olduğundan emin olun.
Örnek istem:
Does my site follow best practices as measured by Lighthouse?
Aracı yürütme örneği: Aracınız, Lighthouse tarafından bildirilen HTTPS kullanımı, konsol hataları ve desteği sonlandırılan API çağrıları gibi teknik yönleri inceler.
Genel site iyileştirme
Sitenizin tam Lighthouse denetimlerini çalıştırabilir ve geliştirmenin ilk aşamalarında iyileştirme alanlarını tanımlamanıza yardımcı olabilirsiniz.
Örnek istem:
Run a full Lighthouse audit of my site, in mobile and desktop, and suggest improvement areas and possible fixes for any problems you find.
Örnek aracı yürütme: Aracınız, sitenizin hem mobil hem de masaüstü sürümünde tam bir Lighthouse denetimi gerçekleştirir ve farklı denetimlerin puanlarını iyileştirebilecek değişiklikler önerir. Ajanınız kaynak kod hakkında tam bağlamsal bilgiye sahipse doğrudan düzeltmeler önerebilir. Doğru bağlama erişimi varsa sunucu yapılandırmasını veya diğer arka uç yapılandırmalarını nasıl iyileştirebileceğiniz konusunda da önerilerde bulunabilir.