Merge pull request #1211 from nestjs/feature/lighthouse-ci

chore: add lighthouse ci check

Author: kamilmysliwiec

.github/workflows/lighthouse.yml

@@ -0,0 +1,39 @@
+name: Lighthouse
+
+on:
+  pull_request:
+    paths-ignore:
+    - 'content/**/*.md'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      # Build needs around 400 seconds on Netlify.
+      # We can not rely on "Waiting for 200", since the user
+      # might push another commit to an existing PR, meaning
+      # the deploy preview is already online.
+      - name: Sleep 400 seconds
+        run: sleep 400
+      - name: Waiting for 200 from the Netlify Preview
+        uses: jakepartusch/wait-for-netlify-action@v1
+        id: wait-for-netflify-preview
+        with:
+          site_name: 'docs-nestjs'
+          max_timeout: 600
+      - name: Run Lighthouse on urls and validate with lighthouserc
+        uses: treosh/lighthouse-ci-action@v2
+        with:
+          urls: |
+            ${{ steps.wait-for-netflify-preview.outputs.url }}
+            ${{ steps.wait-for-netflify-preview.outputs.url }}/first-steps
+          runs: 5
+          configPath: './lighthouserc.json'
+          uploadArtifacts: true
+          temporaryPublicStorage: true

lighthouserc.json

@@ -0,0 +1,35 @@
+{
+  "ci": {
+    "collect": {
+      "numberOfRuns": 5
+    },
+    "assert": {
+      "assertions": {
+        "categories:accessibility": [
+          "error",
+          { "minScore": 0.84, "aggregationMethod": "optimistic" }
+        ],
+        "categories:performance": [
+          "error",
+          { "minScore": 0.4, "aggregationMethod": "optimistic" }
+        ],
+        "categories:best-practices": [
+          "error",
+          { "minScore": 0.86, "aggregationMethod": "optimistic" }
+        ],
+        "categories:seo": [
+          "error",
+          { "minScore": 0.67, "aggregationMethod": "optimistic" }
+        ],
+        "categories:pwa": "off",
+
+        "first-contentful-paint": "off",
+
+        "canonical": "off",
+        "label": "off",
+
+        "color-contrast": "off"
+      }
+    }
+  }
+}

src/app/homepage/footer/footer.component.html

@@ -1,12 +1,21 @@
 <footer>
   <div class="social-wrapper">
-    <a href="https://www.facebook.com/kammysliwiec/" target="_blank"
+    <a
+      title="Kamil Mysliwiec Facebook"
+      href="https://www.facebook.com/kammysliwiec/"
+      target="_blank"
       ><i class="fab fa-facebook"></i
     ></a>
-    <a href="https://twitter.com/kammysliwiec" target="_blank"
+    <a
+      title="Kamil Mysliwiec Twitter"
+      href="https://twitter.com/kammysliwiec"
+      target="_blank"
       ><i class="fab fa-twitter"></i
     ></a>
-    <a href="https://github.com/kamilmysliwiec" target="_blank"
+    <a
+      title="Kamil Mysliwiec Github"
+      href="https://github.com/kamilmysliwiec"
+      target="_blank"
       ><i class="fab fa-github"></i
     ></a>
     <a

src/app/homepage/homepage.component.html

@@ -4,7 +4,7 @@
       href="https://docs.nestjs.com/"
       title="Documentation | NestJS - A node.js framework built on top of TypeScript"
     >
-      <img src="/assets/logo-small.svg" />
+      <img alt="NestJS Logo" src="/assets/logo-small.svg" />
     </a>
   </div>
 </app-header>
@@ -29,6 +29,7 @@ <h4 class="title">Principal Sponsor</h4>
             <a href="https://valor-software.com/" target="_blank">
               <img
                 src="/assets/sponsors/valor-software.png"
+                alt="Valor Logo"
                 class="logo-sponsor"
               />
             </a>

src/app/homepage/newsletter/newsletter.component.html

@@ -28,6 +28,7 @@ <h3>Join our Newsletter</h3>
         <button
           type="submit"
           class="signup-button"
+          aria-label="Signup to Newsletter"
           [disabled]="isDisabled"
           [class.btn-success]="isEmailAdded"
         >

src/index.html

@@ -44,10 +44,12 @@
 
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link
+      defer
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
     <link
+      defer
       href="https://fonts.googleapis.com/css?family=Inconsolata"
       rel="stylesheet"
     />