Lighthouse ile daha iyi bir web oluşturma

Google I/O'dan bu yana, Lighthouse'u harika Progresif Web Uygulamaları geliştirme konusunda mükemmel bir yardımcı hale getirmek için yoğun şekilde çalışıyoruz:

Bugün Lighthouse'un 1.3 sürümünü duyurmaktan mutluluk duyuyoruz. Lighthouse 1.3, bir dizi önemli yeni özellik, denetim ve her zamanki hata düzeltmelerini içerir. Uzantıyı npm'den (npm i -g lighthouse) veya Chrome Web Mağazası'ndan indirebilirsiniz.

Peki, sunulan yenilikler neler?

Yeni görünüm ve tarz

Lighthouse'un önceki bir sürümünü kullandıysanız logonun yeni olduğunu fark etmiş olabilirsiniz. HTML raporu ve Chrome Uzantısı da daha temiz bir puanlama ve denetim sonuçları genelinde daha fazla tutarlılık ile birlikte tamamen yenilendi. Ayrıca, bir testte başarısız olduğunuzda işinize yarayacak hata ayıklama bilgileri ekledik ve önerilen geçici çözümlere yönelik işaretçiler ekledik.

Lighthouse Raporu

Yeni En İyi Uygulamalar

Bugüne kadar Lighthouse, performans metriklerine ve PWA'ların kalitesine odaklandı. Ancak projenin temel amacı web geliştirmenin tamamı için bir kılavuz oluşturmaktır. Burada genel en iyi uygulamalar, performans ve erişilebilirlik ipuçlarıyla ilgili yol gösterici bilgiler ile kaliteli uygulamalar geliştirme konusunda uçtan uca yardım sağlanmaktadır.

"Do Better Web", Lighthouse projesi kapsamında geliştiricilerin web'de daha iyi olmalarına yardımcı olmaya yönelik bir çalışmadır. Başka bir deyişle, web uygulamalarını modernleştirmelerine ve optimize etmelerine yardımcı olun. Çoğu zaman web geliştiricileri eski uygulamaları, kalıpların karşıtılığını kullanır veya farkında olmadan bilinen performans tuzaklarına ulaşır. Örneğin, JS tabanlı animasyonların setInterval() yerine requestAnimationFrame() ile yapılması gerektiği genel olarak bilinmektedir. Ancak geliştirici daha yeni API'nin farkında değilse web uygulaması gereksiz şekilde zarar görür.

Lighthouse 1.3, CSS ve JavaScript özelliklerini modernleştirme ipuçlarından "Oluşturmayı engelleyen öğelerin sayısını azaltın" ve"Kaydırma performansını iyileştirmek için pasif etkinlik işleyicileri kullanın" gibi performans önerilerine kadar 20'den fazla yeni en iyi uygulama önerisi içerir.

Web'le ilgili en iyi uygulamaları daha iyi hale getirin.

Zaman içinde daha fazla öneri eklemeye devam edeceğiz. En iyi uygulama önerileriniz varsa veya denetleme yazmamıza yardımcı olmak istiyorsanız GitHub'da sorun bildirin.

Rapor Görüntüleyici

Son olarak, Lighthouse sonuçları için yeni bir web görüntüleyiciyi duyurmanın heyecanını yaşıyoruz. googlechrome.github.io/lighthouse/viewer adresini ziyaret edin, bir Lighthouse çalıştırmasının çıkışını sürükleyip bırakın (veya dosyanızı yüklemek için tıklayın) ve işte oldu. "Insta" HTML raporuyla çalışır.

Rapor görüntüleyici.
Rapor Görüntüleyici

Lighthouse Görüntüleyici, raporları başkalarıyla paylaşmanıza da olanak tanır. Paylaş simgesini tıkladığınızda GitHub'da oturum açarsınız. Raporları hesabınızda gizli bilgiler olarak saklarız. Böylece, paylaşılan bir raporu kolayca silebilir veya daha sonra güncelleyebilirsiniz. Veri depolama için GitHub'ı kullandığınızda ücretsiz sürüm kontrolüne de sahip olursunuz!

Görüntüleyen mimarisi.
İzleyici Mimarisi

Mevcut raporlar, URL'ye ?gist=GIST_ID eklenerek Lighthouse Görüntüleyici tarafından yeniden yüklenebilir:

Görüntüleyen mimarisi 2.
İzleyici Mimarisi 2

Lighthouse'daki en güncel bilgiler için GitHub'daki sürüm notlarının tamamına göz atın. Her zaman olduğu gibi hataları bildirmek, özellik isteklerini bildirmek veya ileride ne görmek istediğinize dair fikirler üzerinde beyin fırtınası yapmak için bize ulaşın.