Socket
Socket
Sign inDemoInstall

wpm-webiste-performance-monitoring

Website Performance Monitoring (WPM) is a Puppeteer-based library developed in order to monitor the performance of a website using WebVitals scores (like Lighthouse).


Version published
Maintainers
1

Readme

Source

// v2

WPM - Website Performance Monitoring

Description

  • Website Performance Monitoring (WPM) is a Puppeteer-based library developed by Lemundo in order to monitor the performance of a website using WebVitals scores (like Lighthouse).

Info for Lemundies

  • Please see the Confluence Page for more info

Initial concept

  • this is a prototype
  • NPM package page
  • GitLab Repo
  • GOAL: feed this a webpage (through a config.js file) and WPM should return it's WebVitals (through Lighthouse) score
  • STACK:

Dataflow

  • main.js
    • instantiates WPM with ./config.json and immediately runs it
  • wpm.js
    • constructor()from the class wpm deconstructs the data targetWebsite and logFilePath from ./config.json and saves it for internal use
    • run() method is activated
    • getTargetScore() method is activated
      • uses puppeteer to launch the browser
      • calls on lighthouse to use the browser and load the URL to extract json info
      • closes browser
      • gets relevant data (report)
      • returns report
    • run() saves report as initialReport
    • formatReport() method is activated
      • filters only the ids and its scores
      • saved them as an object formatted as { id: score }
      • returns that object with all ids and its respective scores (formattedReport)
    • run() saves formattedReport and passes it on for local saving
    • saveReportToScoreLog() method gets activated
      • it uses the FileSystem API(fs) to append the formattedReport to the file under logFilePath (set in ./config.json) run() displays formattedReport in the console to signalise the operation is complete

example data returned from formatReport()

 {
  website: 'https://www.google.com/',
  scoreDate: '2022.01.03-19:1:40',
  performance: 0.32,
  accessibility: 0.7,
  best_practices: 0.75,
  seo: 0.85,
  pwa: 0.3
} 

example data returned from getTargetScore()

{
    performance: {
      title: 'Performance',
      supportedModes: [Array],
      auditRefs: [Array],
      id: 'performance',
      score: 0.31
    },
    accessibility: {
      title: 'Accessibility',
      description: 'These checks highlight opportunities to [improve the accessibility of your web app](https://developers.google.com/web/fundamentals/accessibility). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.',
      manualDescription: 'These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://developers.google.com/web/fundamentals/accessibility/how-to-review).',
      supportedModes: [Array],
      auditRefs: [Array],
      id: 'accessibility',
      score: 0.7
    },
    'best-practices': {
      title: 'Best Practices',
      supportedModes: [Array],
      auditRefs: [Array],
      id: 'best-practices',
      score: 0.75
    },
    seo: {
      title: 'SEO',
      description: 'These checks ensure that your page is following basic search engine optimization advice. There are many additional factors Lighthouse does not score here that may affect your search ranking, including performance on [Core Web Vitals](https://web.dev/learn-web-vitals/). [Learn more](https://support.google.com/webmasters/answer/35769).',
      manualDescription: 'Run these additional validators on your site to check additional SEO best practices.',
      supportedModes: [Array],
      auditRefs: [Array],
      id: 'seo',
      score: 0.85
    },
    pwa: {
      title: 'PWA',
      description: 'These checks validate the aspects of a Progressive Web App. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist).',
      manualDescription: "These checks are required by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) but are not automatically checked by Lighthouse. They do not affect your score but it's important that you verify them manually.",
      supportedModes: [Array],
      auditRefs: [Array],
      id: 'pwa',
      score: 0.3
    }
}

Keywords

FAQs

Last updated on 03 Feb 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc