Web vitals automation using github actions

• lighthouse

  152 27,823 9.5 JavaScript

  Automated auditing, performance metrics, and best practices for the web.

  

Light house allows to maintain a budget file that specifies requirements of each web vitals measurement such as first-contentful-pain and cumulative-layout-shift. You can also specify the maximum sizes for images , script loads and third-party requests count.More information on Budgets here.

• vercel-action

  11 593 5.0 JavaScript

  This action make a deployment with github actions instead of Vercel builder.

In order to do that we need to connect our project to vercel via vercel API to get the project-Id and org-id information as per the following Vercel Project Linking documentation

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• sticky-pull-request-comment

  3 388 9.0 TypeScript

  create comment on pull request, if exists update that comment.

To best display the results of the audit, we need to get hold of the Lighthouse audit output and format the results. We can then display these on the pull request using the sticky-pull-request-comment action. This action allows sticky comments to be added to a pull request and later edited.

• starter-workflows

  259 8,421 8.3 TypeScript

  Accelerating new GitHub Actions workflows

  

We can write our workflow within our repository thanks to the Github Actions that make it seem-less . Since it is developed by Github we have complete control on the CI.We can trigger actions based on pull, push, tags or anything that is supported from GitHub Marketplace. We can also call external services like vercel API or Lighthouse cli.

• vercel-lighthouse-action

  1 24 3.2

  Vercel lighthouse audit github action

The complete finished action can be found in the vercel-lighthouse-action repository along with an example budget.

• typescript-action

  29 1,769 9.2 TypeScript

  Create a TypeScript Action with tests, linting, workflow, publishing, and versioning

  

Google recently announced new standards for search engine ranching and Web vitals score directly impacts user's experience visiting your website and also influences the search engine ranking. These new standards expect you to have less performance issues in production. we will use vercel CI Deployment using Github Actions

Suggest a related project