Lighthouse GraphQL ile Nasıl Kullanılır?
Lighthouse Nedir?
Lighthouse, Google tarafından açık kaynak olarak geliştirilen, web uygulamalarının hız performansı, içerik erişilebilirliği, PWA, SEO gibi kalite metriklerini ölçmeye ve raporlamaya yarayan bir araçtır.
Web sitesine simüle ettiği cihazdan (mobil/tablet/pc) bağlanarak gerçek hayattaki verilere yakın bir rapor sunmayı amaçlar.
4 farklı şekilde kullanılabilir.
- Chrome eklentisi olarak
- Komut satırı üzerinden
- Node modülü olarak
- Web Arayüzünde
Ancak hangi yöntemle kullanırsanız kullanın, Google Chrome’un makinenizde kurulu olması gerekiyor.
Bu yazıda lighthouse’u node modülü olarak kullanıp, JSON olarak raporlamayı ve web uygulamaları için GraphQL üzerinden veritabanı olarak kullanmayı göstermeye çalışacağım.
Öncesinde makinenizde Chrome’un ve Node’un son versiyonlarının yüklü olduğundan emin olalım.
Lighthouse’u global olarak yükleyelim:
npm install -g lighthouseDaha sonra analizini yapmak istediğimiz sitenin URL’ini girelim
lighthouse https://www.google.com
Bu esnada output olarak herhangi bir komut vermediğimiz için, default olarak raporu bir html dosyasına çıkaracaktır.
JSON çıktısı alabilmek için:
Ve bu şekilde bir veri dosyası elde ettik:
Şimdi oluşturduğumuz dosyayı, data olarak kullanıp GraphQL üzerinden çekelim. Bunun için Gatsby üzerinden GraphQL’i çalıştırabilirsiniz.
Verileri artık GraphQL’de görebiliyoruz.
Şimdi de sorgumuzu oluşturarak, sadece istediğimiz verileri filtreleyelim:
Daha sonra oluşturduğumuz sorguyu, Gatsby içerisinde useStaticQuery ile entegre edelim:
Son olarak React içinde renderlanmış hali de bu şekilde,
Kaynak:
https://developers.google.com/web/tools/lighthouse
