#000 | refactor: migrate from Google Analytics to gtag and optimize site performance

Author: himeshr

Makefile

@@ -1,9 +1,23 @@
+# Speedier defaults and robust targets
+.PHONY: start deps clean build serve
+
+NPM_FLAGS ?= --prefer-offline --no-audit --no-fund
 
 start:
 	npm run develop
 
 deps:
-	npm i
+	@if [ -d node_modules ]; then \
+	  npm i $(NPM_FLAGS); \
+	else \
+	  npm ci $(NPM_FLAGS); \
+	fi
 
 clean:
-	rm -rf node_modules
+	rm -rf node_modules
+
+build:
+	NODE_ENV=production npm run build
+
+serve:
+	npm run serve

_headers

@@ -1,4 +1,9 @@
 [[headers]]
 for = "/static/*"
 [headers.values]
-Cache-Control = "public, max-age=360000"
+Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+for = "/page-data/*"
+[headers.values]
+Cache-Control = "public, max-age=31536000, immutable"

gatsby-config.js

@@ -11,31 +11,21 @@ module.exports = {
     },
     plugins: [
         {
-            resolve: `gatsby-plugin-google-analytics`,
+            resolve: `gatsby-plugin-google-gtag`,
             options: {
-                trackingId: "UA-151665102-1",
-                // Defines where to place the tracking script - `true` in the head and `false` in the body
-                head: false,
-                // Setting this parameter is optional
-                anonymize: true,
-                // Setting this parameter is also optional
-                respectDNT: true,
-                // Avoids sending pageview hits from custom paths
-                exclude: ["/do-not-track/example/"],
-                // Delays sending pageview hits on route update (in milliseconds)
-                pageTransitionDelay: 0,
-                defer: true,
-                enableWebVitalsTracking: true,
-                // Enables Google Optimize using your container Id
-                // optimizeId: "YOUR_GOOGLE_OPTIMIZE_TRACKING_ID",
-                // Enables Google Optimize Experiment ID
-                // experimentId: "YOUR_GOOGLE_EXPERIMENT_ID",
-                // Set Variation ID. 0 for original 1,2,3....
-                // variationId: "YOUR_GOOGLE_OPTIMIZE_VARIATION_ID",
-                // Any additional optional fields
-                // sampleRate: 5,
-                // siteSpeedSampleRate: 10,
-                // cookieDomain: "example.com",
+                trackingIds: [
+                    'G-Y3E7H5MDX8',
+                    'AW-17511540130'
+                ],
+                gtagConfig: {
+                    anonymize_ip: true,
+                },
+                pluginConfig: {
+                    head: false,
+                    respectDNT: true,
+                    delayOnRouteUpdate: 0,
+                    exclude: ['/preview/**', '/do-not-track/**'],
+                },
             },
         },
         'gatsby-plugin-react-helmet',
@@ -110,26 +100,20 @@ module.exports = {
             },
         },
         {
-            resolve: 'gatsby-plugin-google-tagmanager',
+            resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
             options: {
-                id: 'AW-17511540130',
-                // Optional: Include in development environment
-                includeInDevelopment: false,
-                // Optional: Default data layer values
-                defaultDataLayer: {platform: 'gatsby'},
-                // Optional: Respect Do Not Track (DNT) browser setting
-                respectDNT: true,
-                // Optional: Exclude certain paths from tracking
-                exclude: ['/preview/**', '/do-not-track/'],
-                // Optional: Delay pageview event on route updates (e.g., for page transitions)
-                delayOnRouteUpdate: 0,
+                analyzerMode: 'static',
+                reportFilename: 'bundle-report.html',
+                openAnalyzer: false,
+                disable: !process.env.ANALYZE_BUNDLE,
             },
         },
         {
             resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
             options: {
                 develop: true, // Activates purging in npm run develop
                 purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
+                printRejected: true,
             },
         }, // must be after other CSS plugins
         'gatsby-plugin-netlify', // make sure to keep it last in the array

gatsby-ssr.js

@@ -1,22 +1,3 @@
 import React from "react";
 
-export const onRenderBody = ({ setHeadComponents }) => {
-    setHeadComponents([
-        <script
-            key="google-ads-tag"
-            async
-            src="https://www.googletagmanager.com/gtag/js?id=AW-17511540130"
-        />,
-        <script
-            key="google-ads-inline"
-            dangerouslySetInnerHTML={{
-                __html: `
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', 'AW-17511540130');
-        `,
-            }}
-        />,
-    ]);
-};
+export const onRenderBody = () => {};

optimize-hero.js

@@ -0,0 +1,50 @@
+/*
+ Optimizes the homepage hero image for better LCP.
+ - Backs up src/img/cover.png to src/img/cover.original.png (if not already backed up)
+ - Writes an optimized resized PNG back to src/img/cover.png (max width 2000)
+ - Also generates src/img/cover.jpg and src/img/cover.webp for future use
+*/
+
+const fs = require('fs');
+const path = require('path');
+const sharp = require('sharp');
+
+(async () => {
+  const imgDir = path.join(__dirname, '..', 'src', 'img');
+  const srcPng = path.join(imgDir, 'cover.png');
+  const backupPng = path.join(imgDir, 'cover.original.png');
+  const outPng = path.join(imgDir, 'cover.png');
+  const outJpg = path.join(imgDir, 'cover.jpg');
+  const outWebp = path.join(imgDir, 'cover.webp');
+
+  if (!fs.existsSync(srcPng)) {
+    console.error('Source image not found at', srcPng);
+    process.exit(1);
+  }
+
+  // Backup original once
+  if (!fs.existsSync(backupPng)) {
+    fs.copyFileSync(srcPng, backupPng);
+    console.log('Backed up original to', backupPng);
+  } else {
+    console.log('Backup already exists at', backupPng);
+  }
+
+  const pipeline = sharp(srcPng).resize({ width: 2000, withoutEnlargement: true });
+
+  // Optimized PNG overwrite
+  await pipeline.clone().png({ quality: 70, compressionLevel: 9 }).toFile(outPng);
+  console.log('Wrote optimized PNG to', outPng);
+
+  // Also create JPG and WebP variants
+  await pipeline.clone().jpeg({ quality: 70 }).toFile(outJpg);
+  console.log('Wrote optimized JPG to', outJpg);
+
+  await pipeline.clone().webp({ quality: 70 }).toFile(outWebp);
+  console.log('Wrote optimized WebP to', outWebp);
+
+  console.log('Optimization complete.');
+})().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package.json

@@ -6,18 +6,20 @@
   "dependencies": {
     "bulma": "^0.9.1",
     "fs-extra": "^8.1.0",
+    "@loadable/component": "^5.15.2",
     "gatsby": "^2.24.78",
     "gatsby-image": "^2.11.0",
     "gatsby-plugin-catch-links": "^5.14.0",
-    "gatsby-plugin-google-analytics": "^2.3.18",
-    "gatsby-plugin-google-tagmanager": "^2.0.15",
+    "gatsby-plugin-google-gtag": "^1.2.0",
+    "gatsby-plugin-loadable-components-ssr": "^2.1.0",
     "gatsby-plugin-netlify": "^2.3.19",
     "gatsby-plugin-netlify-cms": "^4.3.16",
     "gatsby-plugin-purgecss": "^5.0.0",
     "gatsby-plugin-react-helmet": "^3.3.14",
     "gatsby-plugin-sass": "^2.3.16",
     "gatsby-plugin-sharp": "^2.14.4",
     "gatsby-plugin-sitemap": "^2.4.17",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
     "gatsby-plugin-typography": "^2.5.13",
     "gatsby-remark-copy-linked-files": "^2.3.19",
     "gatsby-remark-embed-video": "^3.0.10",
@@ -36,12 +38,10 @@
     "parcel-bundler": "^1.12.4",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
-    "react-calendly": "^1.1.3",
     "react-dom": "^16.14.0",
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
     "react-phone-number-input": "^3.4.12",
-    "react-share": "^4.3.1",
     "react-typography": "^0.16.19",
     "rss": "^1.2.2",
     "sharp": "^0.26.2",
@@ -61,6 +61,7 @@
     "build:app": "npm run clean && gatsby build",
     "build:lambda": "netlify-lambda build src/lambda",
     "build": "run-p build:**",
+    "analyze": "ANALYZE_BUNDLE=true gatsby build",
     "develop": "npm run clean && gatsby develop",
     "serve": "gatsby serve",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",

src/components/LandingPageHero.js

@@ -2,11 +2,11 @@ import React from "react";
 import Navbar from "./Navbar"
 // import banner from '../img/cover.png'
 // import DiwaliBanner from '../img/diwali-banner.jpg'
-import {PopupText} from "react-calendly";
 import Constants from "../Constants";
 import SecondaryCTAButton from "./SecondaryCTAButton";
 import Img from "gatsby-image";
 import {graphql, useStaticQuery} from 'gatsby';
+import { Helmet } from "react-helmet";
 
 let subtitle = function (text) {
   return <p
@@ -24,15 +24,23 @@ export default function LandingPageHero() {
     query {
       file(relativePath: { eq: "cover.png" }) {
         childImageSharp {
-          fluid {
-            ...GatsbyImageSharpFluid_withWebp_tracedSVG
+          fluid(maxWidth: 2000, quality: 70, toFormat: JPG) {
+            ...GatsbyImageSharpFluid_withWebp
           }
         }
       }
     }
   `)
   return (
     <div>
+      <Helmet>
+        <link
+          rel="preload"
+          as="image"
+          href={data.file.childImageSharp.fluid.src}
+          imagesrcset={data.file.childImageSharp.fluid.srcSet}
+        />
+      </Helmet>
       <div className="hero-head">
         <Navbar/>
       </div>
@@ -83,11 +91,12 @@ export default function LandingPageHero() {
           <div style={{paddingTop: '1rem', flexDirection: 'column', display: 'flex', alignItems: 'center'}}>
             <SecondaryCTAButton text="Try for free" link={`/signup?${Constants.ContactSource}=${Constants.Trial}`}/>
             <p className="button is-primary is-medium" style={{marginTop: 10}}>
-              <PopupText
-                text="Schedule a Demo"
-                url="https://calendly.com/avnisupport-samanvayfoundation/product-demo-and-discussion"
-                styles={{color: 'white', fontWeight: 'bold'}}
-              />
+              <a
+                href="https://calendly.com/avnisupport-samanvayfoundation/product-demo-and-discussion"
+                style={{color: 'white', fontWeight: 'bold'}}
+              >
+                Schedule a Demo
+              </a>
             </p>
           </div>
         </div>

src/components/Navbar.js

@@ -3,7 +3,6 @@ import {Link} from 'gatsby'
 import logo from '../img/avni-logo-color.png'
 import {Location} from '@reach/router'
 import Constants from "../Constants";
-import {PopupText} from "react-calendly";
 
 
 export default class Navbar extends React.Component {
@@ -50,7 +49,10 @@ export default class Navbar extends React.Component {
                                     src={logo}
                                     alt="avni"
                                     className="logo"
-                                    style={{height: '50px'}}
+                                    width="276"
+                                    height="81"
+                                    decoding="async"
+                                    style={{height: '50px', width: 'auto'}}
                                 />
                             </Link>
                         </div>
@@ -136,11 +138,12 @@ export default class Navbar extends React.Component {
                                                         )
                                                         }
                                                         <p className="button is-primary" style={{marginRight: 12}}>
-                                                            <PopupText
-                                                                text="Schedule a Demo"
-                                                                url="https://calendly.com/avnisupport-samanvayfoundation/product-demo-and-discussion"
-                                                                styles={{color:'white', fontWeight:'bold'}}
-                                                            />
+                                                            <a
+                                                                href="https://calendly.com/avnisupport-samanvayfoundation/product-demo-and-discussion"
+                                                                style={{color:'white', fontWeight:'bold'}}
+                                                            >
+                                                                Schedule a Demo
+                                                            </a>
                                                         </p>
                                                     </div>
                                                 </div>

src/components/Plan.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import {PopupText} from "react-calendly";
 
 let step = function (title, text) {
     return <div className="columns">
@@ -24,11 +23,12 @@ const Plan = ({}) => (
             <div className="column is-one-third"/>
             <div className="column is-one-third has-text-centered">
                 <p className="button is-primary is-medium">
-                    <PopupText
-                        text="Schedule a Demo"
-                        url="https://calendly.com/avnisupport-samanvayfoundation/product-demo-and-discussion"
-                        styles={{color: 'white', fontWeight: 'bold'}}
-                    />
+                    <a
+                        href="https://calendly.com/avnisupport-samanvayfoundation/product-demo-and-discussion"
+                        style={{color: 'white', fontWeight: 'bold'}}
+                    >
+                        Schedule a Demo
+                    </a>
                 </p>
             </div>
             <div className="column is-one-third"/>