Lighthouse as a Service: Scan WebPages for Performance, SEO and Best Practices

Motivation

System Design

Scanner: API Endpoint

  1. Can the scanner accept another request?
  • No: return 429 with a Retry-After header
  • Yes: continue
  • No: abort, return 400
  • Yes: continue
  • No: abort, return 400
  • Yes: continue
  1. Is the UUID present?
  • No: return 400
  • Yes: continue
  • No: return 400
  • Yes: continue
  • No: return 202
  • Yes: continue
  • No: return 500, and the report result.
  • Yes: continue

Frontend Requirements

  1. Requesting /scan
  • Disable the search bar
  • When receiving a 400 or 429 error
  • =>show the error message below the search bar
  • =>Enable the search bar
  • When receiving a 202ok
  • => show the success message
  • => open a progress bar
  • When receiving a 400 error
  • => disable progress bar
  • => show the error message below the search bar
  • => enable the search bar
  • When receiving a 429 error, retry
  • => When receiving a 500 error
  • => disable progress bar
  • => show the error message below the search bar
  • => show the download link to the user
  • => enable the search bar
  • When receiving a 200 ok
  • => disable progress bar
  • => show the message below the search bar
  • => show the download link to the user
  • => enable the search bar
  • When receiving a 400 error
  • => show the error message below the search bar
  • When receiving a 200 ok
  • =>open the report in a new browser tab

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store