Web uygulamalarında performans ölçümü (Lighthouse-Unlighthouse)
Günümüzde web teknolojileri hızla ilerlemekte olup, ziyaret edilen web siteleri ve uygulamaların yüksek performanslı bir şekilde çalışması büyük önem taşımaktadır. Kullanıcılara üstün bir deneyim sunabilmek için projelerimizi web standartlarına uygun olarak geliştirmeliyiz. Bu yazıda, geliştirdiğimiz uygulamaların performansını nasıl ölçebileceğimizden bahsedeceğim.
Bir web sayfasının ne kadar hızlı çalıştığını sayfa içeriğinin yüklenmesi, tarayıcıda render olması ve kullanıcı etkileşimine hazır olması süresiyle ölçülebilir. Uygulamamızın performansını ölçmek için Google tarafından geliştirilen Core Web Vitals adlı aracı kullanabiliriz. Bu araç, kullanıcı deneyimini uçtan uca ölçmek için kullanılmakta olup yüklenme süreleri, etkileşim ve görsel istikrar gibi konulara odaklanarak performans, erişilebilirlik ve arama motoru optimizasyonu gibi alanlarda skorlar sunmaktadır. Core Web Vitals metrikleri hakkında daha detaylı bilgi için bu bağlantıya göz atabilirsiniz.
Uygulamalarımızın Core Web Vitals skorlarını ölçmek için kullanabileceğimiz bazı araçlardan bahsedeceğim. Bu araçlardan ilki, yine Google tarafından geliştirilen Lighthouse. Lighthouse’u Google Chrome DevTools, tarayıcı eklentisi, komut satırı, node bağımlılığı veya PageSpeed Insights (web arayüzü) aracılığıyla kullanabilirsiniz.
Geliştirdiğim uygulamalardan birini Lighthouse web arayüzünü kullanarak performans ölçümüne sokacağım. Test etmek istediğim sayfanın adresini girdikten sonra karşıma mobil ve masaüstü performans verileri geliyor.
Bu aşamada karşımıza Performance, Accessibility, Best Practices ve SEO gibi bazı başlıklar çıkıyor. Bu başlıkların altında Lighthouse’un size sunduğu Core Web Vitals metrikleri ve diğer iyileştirme önerilerini gözlemleyebilirsiniz. Bu önerileri iyileştirerek performans artışı sağlayabilirsiniz. Yazının konusundan bağımsız olduğu için bu kısımda iyileştirme ayrıntılarına girmeyeceğim.
Ölçümü gerçekleştirmek istediğiniz web uygulaması birden fazla sayfaya sahipse bu araçları kullanmak pek pratik olmayabilir. Bu gibi bir durumda, bu yazıyı asıl yazma sebebim olan Unlighthouse uygulamasını kullanmayı tercih edebiliriz.
Unlighthouse, açık kaynak olarak geliştirilen bir Lighthouse alternatifi ve CLI ve CI üzerinden farklı çalışma prensiplerine sahip. Gerekli CLI komutunu terminale girmek uygulamanın sahip olduğu tüm sayfaları test etmeye yetiyor. Uygulamayı kullanabilmek için sisteminizde Chromium tabanlı bir tarayıcı yüklü olması gerekiyor.
Ben bu demo için kendi web uygulamamı kullanacağım.
npx unlighthouse — site https://aycan.devBu komutu yazdıktan sonra Unlighthouse terminal üzerinde yerel bir sunucu açarak web sayfalarınızın puanlarını ölçmeye başlıyor.
Kısa bir süre geçtikten sonra bütün sayfaların skorları Unlighthouse web arayüzü içerisinde erişilebilir oluyor. Eğer Nuxt, vite ya da webpack gibi bir bundler kullanıyorsanız bu aracı uygulamanıza bağımlılık olarak ekleyip daha ayrıntılı bir şekilde yapılandırabilirsiniz.
Unlighthouse gibi araçlar, birden fazla sayfaya sahip web uygulamalarında performans ölçümünü daha kolay ve hızlı hale getirebilir. Bu sayede, web uygulamanızın farklı sayfalarının performansını daha verimli bir şekilde analiz edebilir ve geliştirebilirsiniz.
Web performansı iyileştirme üzerine kullanılabilecek farklı araçlar için Shawn Wang tarafından yazılan bu yazıyı incelemenizi tavsiye ederim.
Kaynaklar
The “why” of web performance
The ultimate guide to web performance
