Lighthouse – Deniz Feneri Test Aracı

Deniz Feneri, web uygulamalarınızın performansını, kalitesini ve doğruluğunu artırmak için kullanılan açık kaynaklı, otomatik bir araçtır.

Deniz Feneri Test Aracı (Lighthouse Test Tool)

Google, Web sitelerini ve uygulamalarını düzeltmek ve daha hızlı ve hatasız bir İnternet oluşturmaya çalışmak için elinden gelen tüm gayreti gösteriyor. Bu yazımızda yine Google’ın geliştiriciler için sunmuş olduğu Deniz Feneri aracını konu alıyoruz. Bu araç sayfalarınıza yada uygulamalarınıza çeşitli testler uygulayarak kullanıcılar için ne kadar sağlıklı ve sorunsuz olduğunu tespit ediyor. Tespit sonucunda da sizlere hatalarınızı listeliyor buda yetmiyor bu hataları nasıl düzelteceğinizi açıklayan ilgili web sayfalarını gösteriyor. Yani anlayacağınız para verseniz alamayacağınız güzel bir hizmeti size beleş veriyor. Neden? Çünkü amaç hızlı bir İnternet oluşturmak. Devir hız devri, insanların boşa harcayacak mili saniyeleri bile yok. 😃

Google tarafından açık kaynaklı olarak geliştirilen, Web sitelerine çeşitli testler yaparak puanlama sağlayan ve hatalarını düzeltmeye yardımcı olan Geliştirici aracı

Lighthouse Aracına Nasıl Ulaşırım?

Çevrim içi olarak buradan.

Chrome Eklentisi olarak buradan.

Hiçbiri olmadan ise aşağıdaki şekilde:

Test etmek istediğiniz sayfayı Chrome İnternet Tarayıcısı ile açın ve sayfanın herhangi bir yerinde mouse’unuzun sağ tuşunu tıklayarak “İncele” sekmesine tıklayın açılan sayfada “Audits” menüsünü açın ve sayfanızı test edin.

 

Lighthouse Test Aracında Neler Var?

Deniz Feneri Test Aracında o kadar çok şey var ki buraya yazmakla bitmez, hadi len ordan demeyin şaka yapmıyorum araçta 80 den fazla test var. Bu testleri ana başlıklara ayırırsak şöyle ki;

  • Aşamalı Web Uygulaması Testi
  • Performans Testi
  • Erişebilirlik Testi
  • En İyi Uygulamalar Testi
  • SEO Testi

Aşağıda biraz daha açacağız bu listeyi.

 

Aşamalı Web Uygulaması Testi

Bu denetimler, Temel PWA Denetim Listesi’nde belirtildiği gibi PWA yönlerini doğrulamaktadır. Peki nedir bu Aşamalı Web Uygulama Testi? Google tarafından bir araya getirilmiş olan temel bir takım kriterlerin test edilmesidir. Bu kriterleri aşağıda liste halinde yazıyorum böylece daha net bir şekilde anlayabilirsiniz.

Registers A Service Worker

Bu terim Türkçe’ye çevrildiğinde biraz garip gelebilir, “Bir Hizmet Çalışanı Kayıt Etmek” olarak çevirebiliriz. Peki nedir bu? Bu “Service Worker” arkadaşlar arka planda çalışacak bir takım servisleri yönetecek betik yada script diyelim bu bir Javascript dosyası da olabilir örneğin. Peki neler yapar bu servis çalışanı?

Mesela kullanıcıya tarayıcı bildirimleri oluşturabilir yada Web sayfanızın kullanıcı çevrim dışıyken bağlanmaya çalıştığında ona bildirim yada açıklayıcı bir sayfa göstere bilir. Örnek; İnternet’i yokken daha önce sitenize girmiş birisine “Şuanda İnternete bağlı değilsiniz” gibi bir bildirim sunabilirsiniz.

 

Responds With A 200 When Offline

Bu test ise uygulamanız, kullanıcı çevrim dışı olduğunda bile sayfanıza bağlanmaya çalıştığında sayfanızın HTTP 200 yani bağlantının başarılı olduğunu bildiren HTTP Durum Kodu döndürmesi gerekir. Bu testler aslında web sitelerinden ziyade çeşitli web uygulamaları içindir fakat açıklayacak olursak. Sayfa kullanıcı tarafından daha önce görüntülendiğinde sizin Service Worker scriptiniz sayfanın bir kopyasını kullanıcının bilgisayarına önbellek olarak kayıt eder ve kullanıcı İnternet’e bağlı olmadığında sayfanızı görüntülemeye çalışırsa sizin daha önce önbellekleme yaptığınız sayfayı görüntüler böylece sanki İnternet’e bağlıymış gibi istediği bilgiye ulaşabilir.

 

Redirects HTTP Traffic To HTTPS

Bu test büyük ihtimal anlamışsınızdır zaten, HTTP bağlantılarının HTTPS bağlantılarına yönlendirilip yönlendirilmediğini test ediyor. Yani sitenizde bir SSL hizmeti kullanıyorsanız, HTTP bağlantılar üzerinden gelen ziyaretçi yada kullanıcıları HTTPS olan gübenli bağlantıya 301 durum yönlendirmesi ile yönlendirmelisiniz.

 

Page Load Is Fast Enough On 3G

3G bağlantısında sayfanızın yüklenme hızını test ediyor. Yani sitenize 3G İnternet ile bağlanmış bir kullanıcının ne kadar sürede sayfanızı yükleyebildiğini ölçüyorsunuz. Böylece sonuçlara bakarak sayfanızı hızlı açılması için optimizasyon yapmanız gerekip, gerekmediğini anlayabilirsiniz.

 

User will not be prompted to Install the Web App

Kullanıcılardan Web uygulamanızı yüklemelerini isteyip, istemediğinizi test ediyor. Yani ugulamanızı yüklemesi için kullanıcıya gerekli bildirimi oluşturmuş musunuz ona bakıyor.

 

Web App Splash Screen

Uygulamanız yada Web sayfanız yüklenene kadar geçen sürede kullanıcıya bir başka sayfa göstermek iyi bir deneyim sağlar. Örneğin bazı yüksek boyutlu web sayfaları yüklenirken sırayla yüklenen kaynaklar nedeni ile sayfanın aşağı yukarı hareket ettiğini, hatta değişik değişik triplere girdiğini görebilirsiniz. İşte bu durumu engellemek amacı ile sayfanız arka planda yüklene dururken siz kullanıcıya farklı bir ekran göstere bilirsiniz. Bu test aracıda bunu yani uygulama yada sayfanızda “Açılış Ekranı” özelliğinin olup olmadığına bakıyor.

 

Address bar colors

Adres bar rengi, bildiğiniz gibi Android Chrome tarayıcısını kullanan kişilerin tarayıcılarının rengini sitemize girdiklerinde değiştirebiliyoruz. Böylece tarayıcı ve Web sitemiz sanki tümleşik bir sistem gibi görünüyor. İşte bu araçta bu özelliği kullanıp, kullanmadığınıza bakıyor.

 

JavaScript is not available test

Bu test ise kullanıcının tarayıcısında JavaScript kapalı olduğunda yada desteklenmediği durumlarda sayfanızda görünebilir içeriklerin olup olmadığını denetliyor.

 

Uses HTTPS Test

Sayfanızda HTTPS yani güvenli bağlantıların çalıştığını test ediyor. SSL sertifikanız varsa ve siteniz HTTPS bağlantılar üzerinden çalışıyorsa, bu testi başarı ile geçebilirsiniz.

 

Mobile Screens Viewport Test

Mobil ekranlar için sitenizin görünümünü düzenleyen Viewport meta etiketinin olup olmadığına bakıyor.

 

Content is sized correctly for the viewport

Ayarlamış olduğunuz Viewport etiketinin sayfanızı gerçekten de doğru bir şekilde boyutlandırdığını test ediyor.

 

Site works cross-browser

Çapraz tarayıcı testi yani farklı İnternet tarayıcılarında siteniz düzgün bir şekilde görüntüleniyor mu? Bunu sizden manüel bir şekilde test etmenizi istiyor.

 

Page transitions don’t feel like they block on the network

Sayfalar arası geçişlerin durumunu manüel olarak test etmenizi istiyor, farklı İnternet bağlantısı hızlarında sayfalarınızın her daim hızlı bir şekilde geçiş yapması gerekli.

 

Each page has a URL

Sizden istediği her sayfanın kendine özgü bir URL adresinin olup olmadığını kontrol etmeniz. Tek bir URL adresinde dinamik olarak oluşturulan bir çok sayfa aslında tek bir sayfa olarak kabul edilir. Bu nedenle her sayfanın kendine özgü bir URL adresi olması gerekir.

 

Performance Test

Bu kısımda ise Web uygulamanızın yada Web sayfanızın performans testleri yapılıyor ve bu konuda sizlere bilgi veriliyor, hatalı olan kısımları nasıl düzelte bileceğinize dair ipucu sayfalarına bağlantılar veriyor.

 

Metrics

Bu testlerde sayfanızın ilk açılış ânını, yükleme esnasındaki durumunu ve yüklemenin bittiğinde ki durumunu gösteriyor ve yüklenme zamanı olarak hız performansını değerlendiriyor.

 

Opportunities

Fırsatlar yada imkanlar diyelim. Bu kısımda sayfanızı daha hızlı hale getirmek için neler yapabileceğinizi listeliyor, sayfanızın yavaş yüklenmesine sebep olan şeyleri gösteriyor ve nasıl düzelteceğiniz ile ilgili ipuçları veriyor.

Diagnostics

Bu alanda size teşhis ettiği sonuçları sunarak sizi bilgilendiriyor. Ayrıca öneriler ve ipuçları sunuyor.

 

Passed Audits

Bu kısımda ise geçerli bir şekilde başarılı olan testleri gösteriyor. Hangi testlerden başarı ile geçtiğinizi bu alandan inceleyebilirsiniz.

 

Accessibility Test

Erişebilirlik yada ulaşılabilirlik testi. Bu kısımda Web sayfanızın HTML kullanımını ve nelerin yanlış nelerinse doğru kullanıldığını bildiriyor.Sizden bunları düzetmenizi istiyor ve Doğru bir HTML için ipuçları veriyor.

 

Yazının devamı çoook yakında geliyor takipte kalın. 👍

Merhaba ben Cihan EKEN   Uzun yıllardır bilgisayar ve internet ile ilgileniyorum. Esasen mesleğim Elektrik Teknisyeniyim fakat hem keyif aldığım için hem hobi amaçlı web siteleri ve bunların gelişimi ile ilgileniyorum.   Wordpress özellikle ilgi alanıma giren bir sistem, bu nedenle sık sık Wordpress hakkında faydalı paylaşımlar yapıyorum. Bunun haricinde web sitelerinin SEO ve özellikle de Site İçi SEO gelişimlerini araştırmakta ve bu gelişimleri takip etmekteyim.   1993 ANKARA doğumluyum. Şuan da Fransa da yaşamaktayım. Merak edip okuduğunuz için teşekkürler. :)

Bir Cevap Yazın