[CI] - NPM Dependency Caching and Lighthouse Audit Action

.github/config/lighthouse-budget.json

@@ -0,0 +1,35 @@
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 10000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 1500
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "document",
+        "budget": 18
+      },
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 750
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]

.github/config/lighthouse-config-desktop.js

@@ -0,0 +1,31 @@
+module.exports = {
+	extends: 'lighthouse:default',
+	url: 'https://layer5.io/',
+	settings: {
+		scores: {
+			performance: 90,
+			accessibility: 90,
+			'best-practices': 90,
+			seo: 80,
+		},
+		// 'onlyCategories': [
+		//   'performance',
+		//   'accessibility',
+		//   'best-practices',
+		//   'seo'`
+		// ],
+		// 'skipAudits': [
+		//   'byte-efficiency/uses-responsive-images',
+		//   'byte-efficiency/uses-webp-images',
+		//   'seo/meta-description'
+		// ]
+	},
+	ci: {
+		collect: {
+			settings: {
+				emulatedFormFactor: 'desktop',
+				plugins: ['lighthouse-plugin-field-performance'],
+			},
+		},
+	},
+};

.github/config/lighthouse-config-mobile.js

@@ -0,0 +1,30 @@
+module.exports = {
+    extends: 'lighthouse:default',
+    url: 'https://layer5.io/',
+    settings: {
+        scores: {
+            performance: 90,
+            accessibility: 90,
+            'best-practices': 90,
+            seo: 80,
+        },
+        // 'onlyCategories': [
+        //   'performance',
+        //   'accessibility',
+        //   'best-practices',
+        //   'seo'`
+        // ],
+        // 'skipAudits': [
+        //   'byte-efficiency/uses-responsive-images',
+        //   'byte-efficiency/uses-webp-images',
+        //   'seo/meta-description'
+        // ]
+    },
+    ci: {
+        collect: {
+            settings: {
+                emulatedFormFactor: 'mobile',
+            },
+        },
+    },
+};

.github/workflows/build-and-deploy-site.yml

@@ -8,12 +8,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v3
 
-      - name: Install and Build 🔧 
+      - name: Get NPM Cache Directory 🤔
+        id: npm-cache-dir
         run: |
-          npm install
-          npm run build
+          echo "::set-output name=dir::$(npm config get cache)"
+
+      - name: Check for NPM Cache ✅
+        uses: actions/cache@v3
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install NPM Dependencies 👀 # Checks npm cache and use it for dependencies install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm install
+
+      - name: Build Site 🔧 
+        run: npm run build
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@4.0.0

.github/workflows/build-and-preview-site.yml

@@ -10,23 +10,40 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v3
         with:
           persist-credentials: false
-
-      - name: Install and Build 🔧 
+
+      - name: Get NPM Cache Directory 🤔
+        id: npm-cache-dir
         run: |
-          npm install
-          npm run noIndex
+          echo "::set-output name=dir::$(npm config get cache)"
+
+      - name: Check for NPM Cache ✅
+        uses: actions/cache@v3
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
 
-      - name: Zip Site
+      - name: Install NPM Dependencies 👀 # Checks npm cache and use it for dependencies install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm install
+
+      - name: Build Site 🔧 
+        run: npm run noIndex
+
+      - name: Zip Site 📚
         run: bash ./script.sh
 
-      - name: Upload files
+      - name: Upload Files ⬆️
         uses: actions/upload-artifact@v2
         with:
           name: public-dir
           path: ./public-dir.zip
           retention-days: 1
+
       - name: Triger Inner workflow
-        run: echo "trigering inner workflow"
+        run: echo "Trigering Inner Workflow"

.github/workflows/label-triggered.yml

@@ -18,7 +18,7 @@ jobs:
   comment:
     runs-on: ubuntu-18.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           ref: master
 

.github/workflows/lighthouse.yml

@@ -0,0 +1,43 @@
+name: Lighthouse CI
+
+on:
+  pull_request:
+    branches: [ master ]
+    types: [ labeled ]
+
+jobs:
+  lighthouse:
+    if: ${{ github.event.label.name == 'lighthouse' }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Wait for the Netlify Preview
+        # https://github.com/JakePartusch/wait-for-netlify-action
+        uses: jakepartusch/wait-for-netlify-action@v1.3
+        id: netlify
+        with:
+          max_timeout: 600
+          site_name: 'layer5'
+
+      - name: Audit URLs using Lighthouse for desktop
+        # https://github.com/treosh/lighthouse-ci-action
+        uses: treosh/lighthouse-ci-action@v9
+        with:
+          urls: ${{ steps.netlify.outputs.url }}
+          budgetPath: ./.github/config/lighthouse-budget.json
+          configPath: ./.github/config/lighthouse-config-desktop.json
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+          runs: 3
+
+      - name: Audit URLs using Lighthouse for mobile
+        uses: treosh/lighthouse-ci-action@v9
+        with:
+          urls: ${{ steps.netlify.outputs.url }}
+          budgetPath: ./.github/config/lighthouse-budget.json
+          configPath: ./.github/config/lighthouse-config-mobile.json
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+          runs: 3

.github/workflows/preview-site.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v3
 
       - name: Download Site dir
         uses: dawidd6/action-download-artifact@v2
@@ -44,5 +44,3 @@ jobs:
         with:
           token: ${{ secrets.GH_ACCESS_TOKEN }}
           deploy_url: "${{ steps.netlify.outputs.deploy-url }}"
-
-

gatsby-config.js

@@ -11,6 +11,7 @@ module.exports = {
     twitterUsername: "@layer5",
   },
   flags: {
+    PARALLEL_SOURCING: true,
     FAST_DEV: true,
     PARALLEL_SOURCING: true
   },