Merge pull request #479 from canopas/improve-page-speed-score

Improve performance of home page mobile

.github/workflows/deploy-dev.yml

@@ -84,4 +84,4 @@ jobs:
             ClusterName=canopas-website-dev,
             ImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-frontend,
             BackendImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-backend,
-            NginxImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-nginx
+            NginxImageTag=${{ github.sha }}-${{ github.run_attempt }}-dev-nginx

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

@@ -7,6 +7,7 @@
       :srcset="`${background400} 400w, ${background800} 800w, ${background1200} 1200w, ${background2100} 2100w`"
       class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw--z-[1] tw-object-contain"
       alt="canopas-landing"
+      loading="eager"
     />
 
     <div

vue-frontend/src/components/mobile-app-development/CTASection2.vue

@@ -50,6 +50,7 @@
           :srcset="`${ctaImage400w} 400w, ${ctaImage800w} 800w`"
           class="tw-mt-8 tw-h-full tw-w-full md:tw-mt-0"
           alt="cta-image"
+          loading="lazy"
         />
         <div
           class="gradient-border tw-absolute tw-bottom-4 tw-left-[0.5rem] tw-h-[55px] tw-border-l-[13px] md:tw-hidden"

vue-frontend/src/entry-client.js

@@ -3,21 +3,12 @@ import mixpanel from "mixpanel-browser";
 import config from "@/config.js";
 import "animate.css";
 import { useContributionStore } from "./stores/contribution";
-
-const { app, router, pinia } = buildApp(false);
-
-// wait until router is ready before mounting to ensure hydration match
+const { app, router, pinia } = buildApp(!1);
 router.isReady().then(() => {
-  const piniaInitialState = window.INITIAL_DATA;
-  if (piniaInitialState) {
-    pinia.state.value = piniaInitialState;
-  }
-
-  mixpanel.init(config.MIX_PANEL_TOKEN);
-
-  if (!config.IS_PROD) {
-    useContributionStore(pinia).fetchStars("fetchContributionStars");
-  }
-
-  app.provide("mixpanel", mixpanel).mount("#app");
+  var piniaInitialState = window.INITIAL_DATA;
+  piniaInitialState && (pinia.state.value = piniaInitialState),
+    mixpanel.init(config.MIX_PANEL_TOKEN),
+    config.IS_PROD ||
+      useContributionStore(pinia).fetchStars("fetchContributionStars"),
+    app.provide("mixpanel", mixpanel).mount("#app");
 });

vue-frontend/src/entry-server.js

@@ -2,17 +2,14 @@ import { buildApp } from "./main";
 import { renderToString } from "vue/server-renderer";
 import { renderMetaToString } from "vue-meta/ssr/index.js";
 
-export async function render(url, manifest) {
+async function render(url, manifest) {
   const { app, router, pinia } = buildApp(true);
 
-  // set the router to the desired URL before rendering
+  // Set the router to the desired URL before rendering
   router.push(url);
   await router.isReady();
 
-  // passing SSR context object which will be available via useSSRContext()
-  // @vitejs/plugin-vue injects code into a component's setup() that registers
-  // itself on ctx.modules. After the render, ctx.modules would contain all the
-  // components that have been instantiated during this render call.
+  // Passing SSR context object which will be available via useSSRContext()
   const ctx = {};
   const html = await renderToString(app, ctx);
   await renderMetaToString(app, ctx);
@@ -22,10 +19,10 @@ export async function render(url, manifest) {
     window.INITIAL_DATA = ${JSON.stringify(pinia.state.value)}
   </script>`;
 
-  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
-  // which we can then use to determine what files need to be preloaded for this
-  // request.
+  // Generate preload links based on module IDs from the SSR context
   const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
+
+  // Return the rendered HTML, preload links, teleports, render state, and route name
   return [
     html,
     preloadLinks,
@@ -63,3 +60,5 @@ function renderPreloadLink(file) {
     return "";
   }
 }
+
+export { render };

vue-frontend/src/main.js

@@ -5,13 +5,20 @@ import { createPinia } from "pinia";
 import { createMetaManager } from "vue-meta";
 import "@/assets/css/tailwind.css";
 
-export function buildApp(isSSR) {
-  const app = isSSR ? createSSRApp(App) : createApp(App);
-  const router = createRouter();
-  const pinia = createPinia();
-  const metaManager = createMetaManager(isSSR);
+function buildApp(isSSR) {
+  var appInstance = (isSSR ? createSSRApp : createApp)(App),
+    routerInstance = createRouter(),
+    piniaInstance = createPinia(),
+    metaManagerInstance = createMetaManager(isSSR);
 
-  app.use(router).use(metaManager).use(pinia);
+  appInstance.use(routerInstance).use(metaManagerInstance).use(piniaInstance);
 
-  return { app, router, pinia, metaManager };
+  return {
+    app: appInstance,
+    router: routerInstance,
+    pinia: piniaInstance,
+    metaManager: metaManagerInstance,
+  };
 }
+
+export { buildApp };

vue-frontend/src/router.js

@@ -3,28 +3,20 @@ import {
   createRouter as _createRouter,
   createWebHistory,
 } from "vue-router";
-
 const Error404Page = () => import("@/components/error404/index.vue");
 import routes from "~pages";
-
-routes.push({
-  path: "/:pathMatch(.*)*",
-  name: "Error404Page",
-  component: Error404Page,
-});
-
-export function createRouter() {
+function createRouter() {
   return _createRouter({
-    // use appropriate history implementation for server/client
-    // import.meta.env.SSR is injected by Vite.
-    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
-    routes,
+    history: (import.meta.env.SSR ? createMemoryHistory : createWebHistory)(),
+    routes: routes,
     scrollBehavior(to, from, savedPosition) {
-      if (savedPosition) {
-        return savedPosition;
-      } else {
-        return { top: 0, behavior: "instant" };
-      }
+      return savedPosition || { top: 0, behavior: "instant" };
     },
   });
 }
+routes.push({
+  path: "/:pathMatch(.*)*",
+  name: "Error404Page",
+  component: Error404Page,
+});
+export { createRouter };

vue-frontend/src/utils.js

@@ -1,37 +1,27 @@
 import { useElementVisibility } from "@vueuse/core";
 import mixpanel from "mixpanel-browser";
-export function elementInViewPort(refs) {
+function elementInViewPort(refs) {
   var element;
-  Object.keys(refs).forEach((key) => {
-    if (refs[key] && refs[key].length > 0) {
-      refs[key].forEach((ref, index) => {
-        if (useElementVisibility(refs[key][index]).value) {
-          element = key;
-          return;
-        }
-      });
-    } else {
-      if (useElementVisibility(refs[key]).value) {
-        element = key;
-        return;
-      }
-    }
-  });
-  return element;
+  return (
+    Object.keys(refs).forEach((key) => {
+      refs[key] && 0 < refs[key].length
+        ? refs[key].forEach((ref, index) => {
+            useElementVisibility(refs[key][index]).value && (element = key);
+          })
+        : useElementVisibility(refs[key]).value && (element = key);
+    }),
+    element
+  );
 }
-
-export function handleAnimationOnScroll(data) {
-  if (data) {
-    let { top, bottom } = data.name.getBoundingClientRect();
-    let height = document.documentElement.clientHeight;
-
-    if (top < height && bottom > 0) {
-      data.name.classList.add(data.animation);
-    }
-  }
+function handleAnimationOnScroll(data) {
+  var n, t;
+  data &&
+    (({ top: n, bottom: t } = data.name.getBoundingClientRect()),
+    n < document.documentElement.clientHeight) &&
+    0 < t &&
+    data.name.classList.add(data.animation);
 }
-
-export function setGithubStars(contributions, githubRepos) {
+function setGithubStars(contributions, githubRepos) {
   return contributions.forEach((contribution) => {
     contribution.stars = githubRepos
       .filter(
@@ -42,8 +32,7 @@ export function setGithubStars(contributions, githubRepos) {
       .map((repo) => repo.stargazers_count.toString())[0];
   });
 }
-
-export function openBlog(link, event) {
-  window.open(link, "_blank");
-  mixpanel.track(event);
+function openBlog(link, event) {
+  window.open(link, "_blank"), mixpanel.track(event);
 }
+export { elementInViewPort, handleAnimationOnScroll, setGithubStars, openBlog };