Lighthouse ile daha iyi bir web oluşturma

Google I/O'dan bu yana, Lighthouse'u mükemmel Progresif Web Uygulamaları oluşturmak için mükemmel bir yardımcı haline getirmek üzere yoğun bir şekilde çalışıyoruz:

Bugün, Lighthouse 1.3 sürümünü kullanıma sunduğumuzu duyurmaktan mutluluk duyuyoruz. Lighthouse 1.3, birçok yeni özellik, denetim ve normal hata düzeltmelerini içerir. npm'den (npm i -g lighthouse) yükleyebilir veya Chrome Web Mağazası'ndan uzantıyı indirebilirsiniz.

Peki, 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 tamamen yenilendi. Bu yeni sürümde puanlama daha net bir şekilde sunulur ve denetim sonuçları arasında daha fazla tutarlılık sağlanır. Ayrıca, bir testi geçemediğinizde faydalı hata ayıklama bilgileri ekledik ve önerilen geçici çözümlerin işaretçilerini ekledik.

Lighthouse raporu

Yeni En İyi Uygulamalar

Lighthouse bugüne kadar performans metrikleri ve PWA'ların kalitesine odaklandı. Bununla birlikte, projenin genel hedeflerinden biri de web geliştirmenin tamamı için bir rehber sağlamaktır. Buna genel en iyi uygulamalar, performans ve erişilebilirlik ipuçları ile kaliteli uygulamalar geliştirmeyle ilgili uçtan uca yardım dahildir.

"Daha İyi Web", Lighthouse projesi kapsamında geliştiricilerin web'de daha iyi performans göstermesine yardımcı olmak için yürütülen bir çalışmadır. Diğer bir deyişle, web uygulamalarını modernize etmelerine ve optimize etmelerine yardımcı olun. Web geliştiricileri çoğu zaman güncel olmayan uygulamalar, anti-pattern'ler kullanır veya farkında olmadan bilinen performans sorunlarına rastlar. Örneğin, JS tabanlı animasyonların setInterval() yerine requestAnimationFrame() ile yapılmasının yaygın olarak bilindiği bir gerçektir. Ancak geliştirici yeni API'den haberdar değilse web uygulaması gereksiz yere zarar görür.

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

Web'de en iyi uygulamaları daha iyi uygulayın.

Zaman içinde daha fazla öneri eklemeye devam edeceğiz. En iyi uygulamalarla ilgili önerileriniz varsa veya bir denetim yazmamıza yardımcı olmak istiyorsanız GitHub'da sorun kaydı oluşturun.

Rapor Görüntüleyici

Son olarak, Lighthouse sonuçları için yeni bir web görüntüleyiciyi kullanıma sunduğumuzu duyurmaktan mutluluk duyuyoruz. googlechrome.github.io/lighthouse/viewer adresini ziyaret edin, Lighthouse çalıştırmasının çıktısını sürükleyip bırakın (veya dosyanızı yüklemek için tıklayın) ve işte bu kadar. "Insta" Lighthouse HTML raporu.

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şım simgesini tıkladığınızda GitHub'da oturumunuz açılır. Paylaşılan raporları hesabınızda gizli özet olarak saklarız. Böylece, paylaşılan bir raporu kolayca silebilir veya daha sonra güncelleyebilirsiniz. Veri depolama için GitHub'ı kullanmak, sürüm denetimini de ücretsiz olarak kullanabileceğiniz anlamına gelir.

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

Mevcut raporlar, Lighthouse Viewer tarafından URL'ye ?gist=GIST_ID eklenerek yeniden yüklenebilir:

Görüntüleyici mimarisi 2.
Görüntüleyen Mimarisi 2

Lighthouse'taki en son gelişmelerle ilgili tüm ayrıntılar için GitHub'daki tam sürüm notlarına göz atın. Her zaman olduğu gibi, hataları bildirmek, özellik isteği göndermek veya gelecekte görmek istediğiniz fikirler hakkında beyin fırtınası yapmak için bize ulaşın.