Improve performance of pages

canopas · Sep 12, 2023 · 04e5247 · 04e5247
1 parent 23df288
commit 04e5247
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 34 deletions.
diff --git a/vue-frontend/index.html b/vue-frontend/index.html
@@ -31,20 +31,7 @@
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@canopas" />
     <meta name="twitter:creator" content="@canopas" />
-    <!-- Google tag (gtag.js) -->
-    <script
-      defer
-      src="https://www.googletagmanager.com/gtag/js?id=AW-11157168108"
-    ></script>
-    <script defer>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-      gtag("config", "AW-11157168108");
-    </script>
-    <!-- End Google tag (gtag.js) -->
+
   </head>
 
   <body>

diff --git a/vue-frontend/src/components/about/HowItAllStartedSection.vue b/vue-frontend/src/components/about/HowItAllStartedSection.vue
@@ -59,6 +59,7 @@
         <img
           :src="image1"
           alt="workspace-image-1"
+          loading="lazy"
           class="tw-absolute tw-bottom-[8.5rem] xl:tw-bottom-[9.5rem] 2xl:tw-bottom-[12.5rem] xll:tw-bottom-[12.5rem] tw-left-[1.5rem] xll:tw-left-[-2.5rem] tw-w-[60%] xll:tw-w-[80%] tw-z-[3]"
         />
         <img

diff --git a/vue-frontend/src/components/contact/NewContactForm.vue b/vue-frontend/src/components/contact/NewContactForm.vue
@@ -334,9 +334,6 @@ export default {
               axios
                 .post(config.API_BASE + "/api/send-contact-mail", formData)
                 .then(() => {
-                  gtag("event", "conversion", {
-                    send_to: "AW-11157168108/OpYlCPjY4poYEOy_k8gp",
-                  });
                   this.$router.push({
                     path: "/thank-you",
                   });

diff --git a/vue-frontend/src/components/contributions/DesignExplore.vue b/vue-frontend/src/components/contributions/DesignExplore.vue
@@ -82,6 +82,7 @@
                 :srcset="`${item.images[0]} 400w,${item.images[1]} 800w`"
                 class="tw-h-full tw-w-full tw-rounded-lg tw-object-cover tw-drop-shadow-md lg:tw-h-fit lg:tw-w-fit"
                 alt="DesignImage"
+                loading="lazy"
               />
             </div>
           </swiper-slide>
@@ -115,6 +116,7 @@
                 :srcset="`${item.images[0]} 400w,${item.images[1]} 800w`"
                 class="tw-h-full tw-w-full tw-rounded-lg tw-object-cover tw-drop-shadow-md lg:tw-h-fit lg:tw-w-fit"
                 alt="DesignImage"
+                loading="lazy"
               />
             </div>
           </swiper-slide>

diff --git a/vue-frontend/src/components/contributions/DevOps.vue b/vue-frontend/src/components/contributions/DevOps.vue
@@ -20,6 +20,7 @@
               :srcset="`${blog.image[0]} 400w, ${blog.image[1]} 800w`"
               class="tw-relative tw-h-full tw-w-full tw-rounded-[10px] tw-object-cover"
               alt="devops"
+              loading="lazy"
             />
             <div
               class="tw-absolute tw-right-0 tw-top-0 tw-rounded-bl-[5px] tw-bg-white tw-px-3 tw-py-1 tw-font-inter-medium tw-text-[0.875rem] tw-leading-[1.313rem]"

diff --git a/vue-frontend/src/components/contributions/GithubContribution.vue b/vue-frontend/src/components/contributions/GithubContribution.vue
@@ -52,6 +52,7 @@
             :srcset="`${contribution.image[0]} 400w, ${contribution.image[1]} 800w`"
             class="tw-relative tw-h-full tw-w-full tw-object-cover"
             alt="contribution-image"
+            loading="lazy"
           />
           <div
             class="tw-z-[1] tw-mx-auto tw-mb-10 tw-mt-[-23px] tw-flex tw-max-w-[95%] tw-flex-col tw-rounded-[10px] tw-bg-white tw-py-4 tw-drop-shadow-2xl sm:tw-max-w-[85%] md:tw-max-w-[70%]"
@@ -62,12 +63,10 @@
               <div
                 class="tw-flex tw-h-[1.875rem] tw-w-[4.75rem] tw-items-center tw-justify-center tw-rounded-full tw-from-[#ff835b] tw-to-[#f2709c] tw-px-2.5 tw-font-inter-semibold tw-text-[1rem] tw-text-white tw-bg-gradient-[270.11deg]"
               >
-                <span>
-                  <font-awesome-icon
-                    class="fa tw-h-[18px] tw-w-[18px] tw-pr-[5px] tw-text-white"
-                    :icon="star"
-                  />{{ contribution.stars }}</span
-                >
+                <font-awesome-icon
+                  class="fa tw-h-[18px] tw-w-[18px] tw-pr-[5px] tw-text-white"
+                  :icon="star"
+                />{{ contribution.stars }}
               </div>
               <div class="tw-flex tw-flex-row tw-items-center tw-gap-2">
                 <span
@@ -80,14 +79,10 @@
                 >
               </div>
               <div class="tw-flex tw-flex-row tw-items-center tw-gap-2">
-                <span>
-                  <font-awesome-icon
-                    class="fa tw-h-4 tw-w-4"
-                    :icon="fork" /></span
-                ><span
-                  class="tw-font-inter-medium tw-text-[1rem] tw-leading-4 tw-text-black-core/[0.87]"
-                  >{{ contribution.forks }}</span
-                >
+                <font-awesome-icon
+                  class="fa tw-h-4 tw-w-4 tw-font-inter-medium tw-text-[1rem] tw-leading-4 tw-text-black-core/[0.87]"
+                  :icon="fork"
+                />{{ contribution.forks }}
               </div>
             </div>
             <p

diff --git a/vue-frontend/src/components/contributions/UnitTest.vue b/vue-frontend/src/components/contributions/UnitTest.vue
@@ -35,6 +35,7 @@
               :srcset="`${test.images[0]} 400w,${test.images[1]} 800w`"
               class="cover-image tw-h-fit tw-w-fit tw-rounded-t-lg tw-border-b-[0.5px] tw-border-black-core/[0.87] tw-object-contain tw-drop-shadow-md"
               alt="UnitTestImage"
+              loading="lazy"
             />
             <div
               class="content tw-mb-8 tw-rounded-b-lg tw-bg-white tw-p-5 tw-drop-shadow-md"
@@ -86,6 +87,7 @@
                 :srcset="`${test.images[0]} 400w,${test.images[1]} 800w`"
                 class="image-content swiper-zoom-container tw-h-[80%] tw-w-fit tw-object-cover tw-drop-shadow-md lg:tw-h-fit"
                 alt="UnitTestImage"
+                loading="lazy"
               />
             </div>
           </swiper-slide>

diff --git a/vue-frontend/src/components/home-new/PortfolioSection.vue b/vue-frontend/src/components/home-new/PortfolioSection.vue
@@ -53,7 +53,7 @@
                 : '',
             ]"
             :alt="portfolio.title + `-image`"
-            loading="lazy"
+            loading="eager"
           />
         </div>
         <div

diff --git a/vue-frontend/src/components/services/LandingSection.vue b/vue-frontend/src/components/services/LandingSection.vue
@@ -9,6 +9,7 @@
         :srcset="`${bgImages[0]} 400w, ${bgImages[1]} 800w, ${bgImages[2]} 1200w, ${bgImages[2]} 1600w`"
         class="lg:tw-hidden tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw--z-[1] tw-object-cover"
         alt="background-image"
+        loading="eager"
       />
     </div>
     <div
@@ -23,7 +24,6 @@
           :src="landingImages[0]"
           :srcset="`${landingImages[0]} 400w, ${landingImages[1]} 800w, ${landingImages[2]} 1200w, ${landingImages[2]} 1400w`"
           alt="landing-view-image"
-          loading="lazy"
         />
       </aspect-ratio>
       <div

diff --git a/vue-frontend/src/components/services/SuccessStories.vue b/vue-frontend/src/components/services/SuccessStories.vue
@@ -74,6 +74,7 @@
             :srcset="`${story.image[0]} 400w, ${story.image[1]} 800w`"
             class="tw-mb-2 tw-w-full tw-h-[600px] lg:tw-h-full tw-object-cover"
             alt="story-image"
+            loading="lazy"
           />
         </swiper-slide>
         <div class="swiper-pagination"></div>

diff --git a/vue-frontend/src/components/utils/LottieAnimation.vue b/vue-frontend/src/components/utils/LottieAnimation.vue
@@ -42,11 +42,25 @@ export default {
       progressiveLoad: true,
     },
     anim: null,
+    animationInViewport: false,
   }),
   mounted() {
-    this.init();
+    // Initialize the Intersection Observer
+    const observer = new IntersectionObserver(this.handleIntersection, {
+      threshold: 0.5, // Adjust as needed based on when you want to trigger loading
+    });
+
+    // Observe the animation container
+    observer.observe(this.$refs.lavContainer);
   },
   methods: {
+    handleIntersection(entries) {
+      const entry = entries[0];
+      if (entry.isIntersecting && !this.animationInViewport) {
+        this.animationInViewport = true;
+        this.init();
+      }
+    },
     async init() {
       if (this.anim) {
         this.anim.destroy(); // Releases resources. The DOM element will be emptied.
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,7 @@ @@
                     : '',
                 ]"
                 :alt="portfolio.title + `-image`"
-                loading="lazy"
+                loading="eager"
               />
             </div>
             <div
@@ Expand Down @@