Lighthouse'u Programlı Olarak Çalıştırmaya Giriş

Yayınlanan: 2022-03-10

Kısa özet ↬ Google'ın Lighthouse analiz paketini programlı olarak çalıştırabilmek, özellikle daha büyük veya daha karmaşık web uygulamaları için birçok avantaj sağlar. Lighthouse'u programlı olarak kullanmak, mühendislerin, Lighthouse'un (Lighthouse CI gibi) basit uygulamalarının izin verdiğinden daha fazla özelleştirmeye ihtiyaç duyan siteler için kaliteli izleme kurmasına olanak tanır. Bu makale, Lighthouse'a kısa bir giriş içerir, onu programlı olarak çalıştırmanın avantajlarını tartışır ve temel bir yapılandırmada yürür.

Lighthouse, Google'ın web sitesi kalite analiz araçları paketidir. Sitenizin performansını, erişilebilirliğini, SEO'sunu ve daha fazlasını değerlendirmenize olanak tanır. Ayrıca son derece yapılandırılabilir olması, en basitinden en karmaşıkına kadar tüm siteler için yararlı olacak kadar esnek olmasını sağlar. Bu esneklik, testleri çalıştırmanın birkaç farklı yolunu içerir ve siteniz veya uygulamanız için en uygun yöntemi seçmenize olanak tanır.

Lighthouse'u çalıştırmanın en basit yollarından biri Chrome'un DevTools Lighthouse panelidir. Sitenizi Chrome'da açarsanız ve ardından Chrome'un DevTools'unu açarsanız, bir “Deniz Feneri” sekmesi görmelisiniz. Oradan, "Rapor Oluştur"u tıklarsanız, sitenizin kalite metriklerinin tam bir raporunu almalısınız.

Bununla birlikte, bu makalede odaklandığım şey, yelpazenin diğer ucunda. Lighthouse'u JavaScript ile programlı olarak çalıştırmak, özel çalıştırmaları yapılandırmamıza, test etmek istediğimiz özellikleri seçip seçmemize, sonuçları toplamamıza ve analiz etmemize ve sitelerimize ve uygulamalarımıza özgü yapılandırma seçeneklerini belirlememize olanak tanır.

Örneğin, her biri kendi verisine ve stiline ve hatta belki de analiz etmek istediğiniz işaretlemeye sahip birden çok URL aracılığıyla erişilebilen bir sitede çalışıyorsunuzdur. Veya her test çalışmasından veri toplamak ve farklı şekillerde derlemek veya analiz etmek isteyebilirsiniz. Siteniz veya uygulamanız için neyin en iyi olduğuna bağlı olarak bir Deniz Feneri analizini nasıl çalıştırmak istediğinizi seçme olanağına sahip olmak, site kalitesini izlemeyi ve sitenizle ilgili sorunların nerede birikmeden veya sizin için çok fazla soruna neden olmadan önce nerede olduğunu saptamayı kolaylaştırır. sitenin kullanıcıları.

Lighthouse'u programlı olarak çalıştırmak her site için en iyi seçim değildir ve Lighthouse ekibinin aracı kullanmak için oluşturduğu tüm farklı yöntemleri keşfetmenizi tavsiye ederim. Ancak Lighthouse'u programlı olarak kullanmaya karar verirseniz, aşağıdaki bilgiler ve öğretici umarız başlamanıza yardımcı olacaktır.

Deniz Feneri Seçeneklerini Özelleştirme

Lighthouse'u programlı olarak çalıştırmanın avantajı, yalnızca Lighthouse'un kendisini yapılandırma yeteneği değil, aynı zamanda Lighthouse testleri etrafında isteyebileceğiniz veya yapmanız gerekebilecek her şeydir. Lighthouse, başlamanıza yardımcı olacak harika belgelere sahiptir. Bununla birlikte, programlı olarak çalıştırmaktan en iyi şekilde yararlanmak için, kazmanız ve Lighthouse'un nasıl çalıştığı hakkında daha fazla bilgi edinmeniz gereken iki ana yer vardır: test çalıştırmalarınızı yapılandırma ve test sonuçlarınızı raporlama.

Deniz Feneri Test Çalıştırması Yapılandırması

Bir Lighthouse test çalıştırmasını yapılandırmak, istediğiniz kadar basit veya karmaşık olabilen görevlerden biridir.

Lighthouse'u programlı olarak çalıştırırken, özel seçenekler sağlayabileceğiniz üç yer vardır: test edeceğiniz URL, Chrome seçenekleri ve Lighthouse yapılandırma nesnesi. Bunların üçünün de Lighthouse belgelerinden Lighthouse'u çalıştırma işlevinde parametreler olduğunu görebilirsiniz:

 function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { return chrome.kill().then(() => results.lhr) }); }); }

Bu parametreleri oluşturmak için ihtiyacınız olan kodu kullanabilirsiniz. Örneğin, test etmek istediğiniz birden çok sayfası veya URL'si olan bir siteniz olduğunu varsayalım. Belki de bu testi, CI görevlerinizin bir parçası olarak bir CI ortamında çalıştırmak ve görev her çalıştığında gerekli tüm sayfaları kontrol etmek isteyebilirsiniz. Bu kurulumu kullanarak, URL'lerinizi oluşturmak için JavaScript'i kullanabilir ve her biri için Lighthouse'ı çalıştıracak bir döngü oluşturabilirsiniz.

İhtiyaç duyabileceğiniz tüm Chrome seçenekleri, krom başlatıcıya iletilen bir nesnede belirtilebilir. Dokümantasyondaki örnekte, opts nesnesi, chrome-launcher'a iletebileceğiniz chromeFlags dediğimiz bir dizi ve chrome-launcher tarafından kullanılan bağlantı noktasını kaydedip ardından Lighthouse'a iletebileceğiniz bir bağlantı noktası içerir.

Son olarak, Lighthouse yapılandırma nesnesi, Lighthouse'a özel seçenekler eklemenize olanak tanır. Lighthouse paketi, olduğu gibi kullanılabilen veya genişletilip değiştirilebilen varsayılan bir yapılandırma nesnesi sağlar. Bu nesneyi, hangi Lighthouse test kategorilerini test etmek istediğinizi belirtmek de dahil olmak üzere birçok şey yapmak için kullanabilirsiniz.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Testin bir mobil veya masaüstü öykünücüsünde çalışmasını isteyip istemediğinizi belirtmek için emulatedFormFactor kullanabilirsiniz. Tarayıcıda kullanmanız gerekebilecek çerezleri eklemek için extraHeaders kullanabilirsiniz. Örneğin, sonuçları HTML olarak veren bir masaüstü öykünücüsünde yalnızca erişilebilirlik kategorisini çalıştıran bir test, şuna benzeyen bir yapılandırma nesnesine sahip olabilir:

 const lighthouseOptions = { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html'], }, }

Bu örnek, minimum bir yapılandırmayı temsil eder. Yapabileceğiniz daha çok şey var. Lighthouse yapılandırma belgeleri çok daha fazla bilgiye sahiptir. Ayrıca bazı daha karmaşık uygulamalar için bir dizi örnek yapılandırma nesnesine sahiptirler.

Özel Sonuç Raporlama

Lighthouse'u programlı olarak çalıştırırken, sonuçların biçimlendirilmiş üç seçenekten birinde veya daha fazlasında döndürülmesini sağlayabilirsiniz ve - ve bence bu en heyecan verici parçadır - ham Lighthouse Result (LHR) nesnesine erişebilirsiniz.

HTML, JSON, CSV

Lighthouse, sonuçları otomatik olarak üç farklı şekilde biçimlendirir: HTML, JSON veya CSV. Bunların tümü, örneğin Chrome DevTools içinde bir Deniz Feneri testi çalıştırdığınızda göreceğiniz temel Lighthouse raporlama şablonuna dayalı olarak önceden yapılandırılmış sonuçlardır. Önceki bölümdeki lighthouseOptions yapılandırma nesnesinde, tek bir dize içeren bir dizi içeren output için bir anahtar görebilirsiniz: html . Bu, döndürülen sonuçların yalnızca HTML olarak biçimlendirilmesini istediğimi belirtir. Sonuçları hem HTML hem de JSON olarak isteseydim, bu dizi ['html', 'json'] gibi görünürdü.

Lighthouse çalıştığında, iki anahtar içeren bir sonuç nesnesi döndürür: report ve lhr . Bir sonraki bölümde lhr anahtarının içeriği hakkında konuşacağız, ancak report anahtarı, istediğiniz gibi biçimlendirilmiş sonuçları içeren bir dizi içerir. Bu nedenle, örneğin, ['html', 'json'] isteğinde bulunduysak, o zaman results.report[0] HTML olarak biçimlendirilmiş sonuçlarımızı içerecek ve results.report[1] JSON olarak biçimlendirilmiş sonuçlarımızı içerecek.

LHR Nesnesi

Lighthouse'u programlı olarak çalıştırmak ayrıca çok daha esnek bir sonuç nesnesine erişmenizi sağlar: LHR nesnesi. Bu nesne, Lighthouse çalıştırmanızdan ham sonuçları ve bazı meta verileri içerir. Daha eksiksiz belgeler Lighthouse Github deposunda bulunabilir.

Bu sonuçları, özel raporlar oluşturmak ve analiz için birden çok çalıştırmadan veri toplamak dahil olmak üzere, istediğiniz sayıda şekilde kullanabilirsiniz.

Örnek: Mobil ve Masaüstü İçin Erişilebilirlik Testi Çalıştırma

Diyelim ki, kullanıcının daha küçük veya daha büyük bir ekran kullanmasına bağlı olarak farklı bileşenler yükleyen bir sitem var, bu, sitenin her sürümünün HTML'sinin biraz farklı olacağı anlamına geliyor. Sitenin her iki sürümünün de Lighthouse erişilebilirlik testlerinde 95 puan aldığından ve main şubemize bu standardı karşılamayan hiçbir kodun taahhüt edilmediğinden emin olmak istiyorum.

Not : Sparkbox ana sayfasını analiz eden aşağıdaki kodun çalışan bir örneğini görmek istiyorsanız, depoyu burada bulabilirsiniz.

Lighthouse'u erişilebilirlik kategorisini iki kez çalıştıracak şekilde yapılandırabilir, her biri için farklı yapılandırma nesneleri sağlayabilirim - biri emulatedFormFactor desktop , diğeri de mobile olarak ayarlayabilir. Bunu yapmanın kolay bir yolu, aşağıda gösterilen her iki nesneyle bir dizi oluşturmaktır.

 const lighthouseOptionsArray = [ { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html', 'json'], }, }, { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'mobile', output: ['html', 'json'], }, }, ]

Ardından, bu dizide döngü oluşturacak ve dizi içinde bulunan her nesne için bir Lighthouse testi çalıştıracak bir işlev oluşturabilirim.

Unutulmaması gereken bir şey, her çalıştırma arasında bir gecikme eklemek gerektiğidir, aksi takdirde Chromium'un kafası karışabilir ve çalıştırmalar hata verir. Bunu yapmak için setTimeout aralığı tamamlandığında bir söz veren bir wait işlevi ekledim.

 function wait(val) { return new Promise(resolve => setTimeout(resolve, val)); } function launchLighthouse(optionSet, opts, results) { return chromeLauncher .launch({ chromeFlags: opts.chromeFlags }) .then(async chrome => { opts.port = chrome.port; try { results = await lighthouse(url, opts, optionSet); } catch (e) { console.error("lighthouse", e); } if (results) reportResults(results, runEnvironment, optionSet, chrome); await wait(500); chrome.kill(); }); } async function runLighthouseAnalysis() { let results; const opts = { chromeFlags: ["--no-sandbox", "--headless"] }; for (const optionSet of lighthouseOptionsArray) { console.log("****** Starting Lighthouse analysis ******"); await launchLighthouse(optionSet, opts, results); } }

Bu durumda, sonuçları bir reportResults Sonuçları işlevine gönderiyorum. Oradan sonuçları yerel dosyalara kaydediyorum, sonuçları konsola yazdırıyorum ve sonuçları, testlerin erişilebilirlik eşiğimizi geçip geçmediğini belirleyecek bir işleve gönderiyorum.

 async function reportResults(results, runEnvironment, optionSet, chrome) { if (results.lhr.runtimeError) { return console.error(results.lhr.runtimeError.message); } await writeLocalFile(results, runEnvironment, optionSet); printResultsToTerminal(results.lhr, optionSet); return passOrFailA11y(results.lhr, optionSet, chrome); }

Bu proje için, CI test çalıştırmalarımız için JSON sonuçlarını belirli bir dizine ve yerel test çalıştırmalarımız için HTML dosyasını belirli bir dizine kaydedebilmek istiyorum. Lighthouse'un bu farklı türdeki sonuçları döndürme şekli, istendikleri sırada bir dizidedir.

Bu örnekte, lighthouseOptions dizimiz önce HTML'yi, ardından JSON'u ister. Bu nedenle, report dizisi önce HTML biçimli sonuçları, sonra JSON biçimli sonuçları içerecektir. writeToLocalFile işlevi, sonuçların doğru sürümünü özelleştirilmiş bir adla bir dosyaya kaydeder.

 function createFileName(optionSet, fileType) { const { emulatedFormFactor } = optionSet.settings; const currentTime = new Date().toISOString().slice(0, 16); const fileExtension = fileType === 'json' ? 'json' : 'html'; return `${currentTime}-${emulatedFormFactor}.${fileExtension}`; } function writeLocalFile(results, runEnvironment, optionSet) { if (results.report) { const fileType = runEnvironment === 'ci' ? 'json' : 'html'; const fileName = createFileName(optionSet, fileType); fs.mkdirSync('reports/accessibility/', { recursive: true }, error => { if (error) console.error('error creating directory', error); }); const printResults = fileType === 'json' ? results.report[1] : results.report[0]; return write(printResults, fileType, `reports/accessibility/${fileName}`).catch(error => console.error(error)); } return null; }

Ayrıca test çalışmaları bittiğinde sonuçları terminale yazdırmak istiyorum. Bu, bir dosyayı açmak zorunda kalmadan sonuçları görüntülemenin hızlı ve kolay bir yolunu sağlar.

 function printResultsToTerminal(results, optionSet) { const title = results.categories.accessibility.title; const score = results.categories.accessibility.score * 100; console.log('\n********************************\n'); console.log(`Options: ${optionSet.settings.emulatedFormFactor}\n`); console.log(`${title}: ${score}`); console.log('\n********************************'); }

Son olarak, erişilebilirlik puanları eşik puanımı 95 karşılamıyorsa test çalıştırmalarımda başarısız olabilmek istiyorum.

 function passOrFailA11y(results, optionSet, chrome) { const targetA11yScore = 95; const { windowSize } = optionSet; const accessibilityScore = results.categories.accessibility.score * 100; if (accessibilityScore) { if (windowSize === 'desktop') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } if (windowSize === 'mobile') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } } }

Hepinizi onunla oynamaya ve Lighthouse'un sitenizin kalitesini izlemenize yardımcı olabileceği tüm farklı yolları keşfetmeye davet ediyorum.

Son Notlar

Yukarıdaki örneği kasıtlı olarak nispeten basit tutmama rağmen, umarım size Lighthouse'u programlı olarak çalıştırırken neler yapılabileceğine dair iyi bir genel bakış sağlamıştır. Ve umarım bu esnek, güçlü aracı kullanmanın yeni yollarını bulmanız için size ilham verir.

Peter Drucker'ın dediği gibi:

“Ölçemezseniz, iyileştiremezsiniz.”

Özellikle karmaşık siteler için web sitemizin kalitesini yalnızca ölçmekle kalmayıp aynı zamanda izleyebilmek, daha iyi bir web oluşturmamıza yardımcı olmak için uzun bir yol kat edecektir.

SmashingMag'de Daha Fazla Okuma :

Mobil Öncelikli Deneyimler için A/B Testi
Etkililik Açısından Bir Tasarım Konsepti Nasıl Test Edilir?
Manuel Erişilebilirlik Testinin Önemi
Tensorflow.js ile Ön Uç Geliştiriciler için Makine Öğrenimi
İş Akışınızı Hızlandırmak İçin Bu İpuçlarıyla Kullanıcı Arayüzü Tasarımına Başlayın