Improve page speed score

.github/workflows/build.yml

@@ -50,7 +50,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: "17"
+          node-version: "18"
 
       - name: Build frontend
         run: |

vue-frontend/index.html

@@ -54,7 +54,7 @@
       fbq('track', 'PageView');
     }, 3000)
   </script>
-  <noscript><img height="1" width="1" class="pixel"
+  <noscript><img height="1" width="1" class="pixel" alt=""
       src="https://www.facebook.com/tr?id=545237827595479&ev=PageView&noscript=1" /></noscript>
   <style nonce="8950026480">.pixel{display:none}</style>
   <!-- End Meta Pixel Code -->

vue-frontend/package.json

@@ -26,7 +26,7 @@
     "@vue/cli-plugin-eslint": "~5.0.0-rc.2",
     "@vue/compiler-sfc": "^3.0.0",
     "animate.css": "^4.1.1",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.14",
     "axios": "^0.25.0",
     "compression": "^1.7.4",
     "core-js": "^3.6.5",
@@ -37,20 +37,21 @@
     "express": "^4.17.3",
     "gsap": "^3.9.1",
     "lottie-web": "^5.9.1",
-    "postcss": "^8.4.17",
+    "postcss": "^8.4.22",
     "postcss-nesting": "^10.1.7",
     "prettier": "^2.5.1",
     "sass": "^1.49.9",
     "serve-static": "^1.14.2",
     "swiper": "^8.0.7",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^3.3.1",
     "vite-plugin-pages": "^0.21.4",
     "vue-meta": "^3.0.0-alpha.10",
     "vue-router": "^4.0.14"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.297.0",
     "@vueuse/core": "^9.3.0",
+    "lozad": "^1.16.0",
     "mixpanel-browser": "^2.45.0",
     "pinia": "^2.0.14",
     "serialize-javascript": "^6.0.0",

vue-frontend/src/assets/css/tailwind.css

@@ -7,71 +7,71 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/ProductSans-Normal.woff2) format("woff2");
+  src: url(./../fonts/ProductSans-Regular-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "FuturaLT-Bold";
   font-style: bold;
   font-weight: 700;
   font-display: swap;
-  src: url(./../fonts/FuturaLT-Bold.woff2);
+  src: url(./../fonts/FuturaLT-Bold-Subset.woff2);
 }
 
 @font-face {
   font-family: "Inter-Bold";
   font-style: bold;
   font-weight: 700;
   font-display: swap;
-  src: url(./../fonts/Inter-Bold.woff2) format("woff2");
+  src: url(./../fonts/Inter-Bold-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "Inter-SemiBold";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(./../fonts/Inter-SemiBold.woff2) format("woff2");
+  src: url(./../fonts/Inter-SemiBold-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "Inter-Medium";
   font-style: medium;
   font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/Inter-Medium.woff2) format("woff2");
+  src: url(./../fonts/Inter-Medium-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "Inter-Regular";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/Inter-Regular.woff2) format("woff2");
+  src: url(./../fonts/Inter-Regular-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "Inter-Light";
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(./../fonts/Inter-Light.woff2) format("woff2");
+  src: url(./../fonts/Inter-Light-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "Roboto-Bold";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(./../fonts/Roboto-Bold.woff2);
+  src: url(./../fonts/RobotoBold-Subset.woff2);
 }
 
 @font-face {
   font-family: "Roboto-Medium";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/Roboto-Medium.woff2);
+  src: url(./../fonts/RobotoMedium-Subset.woff2);
 }
 
 @layer utilities {
@@ -100,6 +100,7 @@
   .gradient-border-btn:hover > a > .footer-icon > path {
     fill: #ffffff;
   }
+
   .landing-bg-clip-path {
     -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 84%, 30% 100%, 0 84%, 0 0);
     clip-path: polygon(50% 0%, 100% 0, 100% 84%, 30% 100%, 0 84%, 0 0);

vue-frontend/src/components/about/LandingSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="tw-bg-gradient-to-t tw-from-[#F2709C]/[0.1] tw-via-[#FF835B]/[0.1] tw-to-[#FFFFFF] tw-pb-[2.5rem] lg:tw-pb-[5.5rem]"
+    class="tw-opacity-80 tw-bg-gradient-to-b tw-from-[#FFFFFF]/[0.1] tw-via-[#FF835B]/[0.1] tw-to-[#F2709C]/[0.1] tw-pb-[2.5rem] lg:tw-pb-[5.5rem]"
   >
     <div
       class="tw-container tw-flex tw-flex-col lg:tw-flex-row tw-items-center tw-mt-[2.313rem] 2xl:tw-mt-[5.313rem]"

vue-frontend/src/components/home-new/CaseStudy.vue

@@ -4,7 +4,7 @@
       v-if="currentRoutePath == '/portfolio'"
       class="tw-text-center tw-mt-8 lg:tw-mt-36 tw-pb-9 md:tw-pb-20 tw-text-[#3d3d3d] tw-font-futura-bold tw-text-[4.5rem] md:tw-text-[5.625rem] lg:tw-text-[7.5rem] tw-leading-[6rem] md:tw-leading-[7.625rem] lg:tw-leading-[9rem]"
     >
-      <p>Portfolio</p>
+      <h1>Portfolio</h1>
     </div>
     <div v-else>
       <p

vue-frontend/src/components/home-new/ContributionSection.vue

@@ -36,9 +36,16 @@
         :class="index % 2 != 0 ? 'tw-flex-row-reverse' : ''"
       >
         <div class="tw-shadow-[2px_2px_10px_rgba(0,0,0,0.1)]">
-          <video autoplay loop muted playsinline style="height: 690px">
-            <source :src="contribution.video[1]" type="video/webm" />
-            <source :src="contribution.video[0]" type="video/mp4" />
+          <video
+            class="lozad"
+            autoplay
+            loop
+            muted
+            playsinline
+            style="height: 690px"
+          >
+            <source :data-src="contribution.video[1]" type="video/webm" />
+            <source :data-src="contribution.video[0]" type="video/mp4" />
           </video>
         </div>
 
@@ -134,6 +141,7 @@ import introShowCaseWebm from "@/assets/images/contribution/animations/introShow
 import jcAnimationsMp4 from "@/assets/images/contribution/animations/JetpackComposeAnimations.mp4";
 import jcAnimationsWebm from "@/assets/images/contribution/animations/JetpackComposeAnimations.webm";
 import Config from "@/config.js";
+import lozad from "lozad";
 
 library.add(faGithub);
 
@@ -172,6 +180,9 @@ export default {
       ],
     };
   },
+  mounted() {
+    lozad().observe(); // lazy loads videos with default selector as '.lozad'
+  },
   methods: {
     openLink(contributions) {
       window.open(contributions.link, "_blank");

vue-frontend/src/components/home-new/ContributionSectionMobile.vue

@@ -30,9 +30,9 @@
         :class="index % 2 != 0 ? 'tw-flex-row-reverse' : 'tw-flex-row'"
       >
         <div class="tw-w-[45%] tw-shadow-[2px_2px_10px_rgba(0,0,0,0.1)]">
-          <video autoplay loop muted playsinline>
-            <source :src="contribution.video[1]" type="video/webm" />
-            <source :src="contribution.video[0]" type="video/mp4" />
+          <video class="lozad" autoplay loop muted playsinline>
+            <source :data-src="contribution.video[1]" type="video/webm" />
+            <source :data-src="contribution.video[0]" type="video/mp4" />
           </video>
         </div>
 
@@ -124,6 +124,7 @@ import introShowCaseWebm from "@/assets/images/contribution/animations/introShow
 import jcAnimationsMp4 from "@/assets/images/contribution/animations/JetpackComposeAnimations.mp4";
 import jcAnimationsWebm from "@/assets/images/contribution/animations/JetpackComposeAnimations.webm";
 import Config from "@/config.js";
+import lozad from "lozad";
 
 library.add(faGithub);
 
@@ -158,6 +159,9 @@ export default {
       ],
     };
   },
+  mounted() {
+    lozad().observe(); // lazy loads videos with default selector as '.lozad'
+  },
   methods: {
     openLink(contributions) {
       window.open(contributions.link, "_blank");

vue-frontend/src/components/home-new/HomeIndex.vue

@@ -20,18 +20,37 @@
 <script>
 import ScreenHeader from "@/components/partials/NewHeader.vue";
 import LandingSection from "@/components/home-new/LandingSection.vue";
-import CaseStudy from "@/components/home-new/CaseStudy.vue";
-import ServiceSection from "@/components/home-new/ServiceSection.vue";
-import ServiceSectionMobile from "@/components/home-new/ServiceSectionMobile.vue";
-import ContributionSection from "@/components/home-new/ContributionSection.vue";
-import ContributionSectionMobile from "@/components/home-new/ContributionSectionMobile.vue";
-import ClientReview from "@/components/home-new/ClientReviewSection.vue";
-import CTASection from "@/components/home-new/CTASection.vue";
-import BlogSection from "@/components/home-new/BlogSection.vue";
 import FooterV3 from "@/components/partials/FooterV3.vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { elementInViewPort } from "@/utils.js";
+import { defineAsyncComponent } from "vue";
+
+const CaseStudy = defineAsyncComponent(() =>
+  import("@/components/home-new/CaseStudy.vue")
+);
+const ServiceSection = defineAsyncComponent(() =>
+  import("@/components/home-new/ServiceSection.vue")
+);
+const ServiceSectionMobile = defineAsyncComponent(() =>
+  import("@/components/home-new/ServiceSectionMobile.vue")
+);
+const ContributionSection = defineAsyncComponent(() =>
+  import("@/components/home-new/ContributionSection.vue")
+);
+const ContributionSectionMobile = defineAsyncComponent(() =>
+  import("@/components/home-new/ContributionSectionMobile.vue")
+);
+const ClientReview = defineAsyncComponent(() =>
+  import("@/components/home-new/ClientReviewSection.vue")
+);
+const CTASection = defineAsyncComponent(() =>
+  import("@/components/home-new/CTASection.vue")
+);
+const BlogSection = defineAsyncComponent(() =>
+  import("@/components/home-new/BlogSection.vue")
+);
+
 library.add(faPlus);
 
 export default {

vue-frontend/src/components/home-new/LandingSection.vue

@@ -18,8 +18,8 @@
       >
         <img
           class="tw-w-full tw-h-full tw-object-contain"
-          :src="landing2100"
-          :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2100} 2100w`"
+          :src="landing800"
+          :srcset="`${landing400} 400w, ${landing800} 800w`"
           alt="landing-view-image"
         />
       </aspect-ratio>
@@ -134,8 +134,6 @@
 <script>
 import landing400 from "@/assets/images/landing/landing-400w.webp";
 import landing800 from "@/assets/images/landing/landing-800w.webp";
-import landing1200 from "@/assets/images/landing/landing-1200w.webp";
-import landing2100 from "@/assets/images/landing/landing-2100w.webp";
 import client1 from "@/assets/images/landing/client1-100w.webp";
 import client2 from "@/assets/images/landing/client2-100w.webp";
 import client3 from "@/assets/images/landing/client3-100w.webp";
@@ -152,8 +150,6 @@ export default {
       width: 680,
       landing400,
       landing800,
-      landing1200,
-      landing2100,
       background400,
       background800,
       background1200,