perf : improve performance & pagespeed

canopas · Sep 8, 2023 · dbf36bd · dbf36bd
1 parent 4d224c4
commit dbf36bd
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 16 deletions.
diff --git a/components/cta/CTA1.js b/components/cta/CTA1.js
@@ -26,7 +26,7 @@ export default function CTA() {
             implement robust mobile apps to achieve your business objectives.
             Schedule Your Free Consultation Now.
           </p>
-          <Link href={`${config.WEBSITE_URL}/contact`}>
+          <Link prefetch={false} href={`${config.WEBSITE_URL}/contact`}>
             <div className="flex items-center mt-10 mx-auto md:mx-0 w-max rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal text-[1.1875rem] leading-[1.1875rem] font-inter-semibold tracking-normal text-white active:scale-[0.98]">
               <span className="py-4 px-[1.2rem] hoverable-text inline-block">
                 Get Free Consultation
@@ -55,7 +55,7 @@ export default function CTA() {
             implement robust mobile apps to achieve your business objectives.
             Schedule Your Free Consultation Now.
           </p>
-          <Link href={`${config.WEBSITE_URL}/contact`}>
+          <Link prefetch={false} href={`${config.WEBSITE_URL}/contact`}>
             <div className="flex items-center mt-10 mx-auto md:mx-0 w-max rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal text-[1.1875rem] leading-[1.1875rem] font-inter-semibold tracking-normal text-white active:scale-[0.98]">
               <span className="py-4 px-[1.2rem] hoverable-text inline-block">
                 Get Free Consultation

diff --git a/components/cta/CTA4.js b/components/cta/CTA4.js
@@ -43,7 +43,11 @@ export default function CTA() {
                 Bring us your toughest challenge and we&apos;ll show you the
                 path to a sleek solution.
               </div>
-              <Link href={`${config.WEBSITE_URL}/contact`} className="">
+              <Link
+                prefetch={false}
+                href={`${config.WEBSITE_URL}/contact`}
+                className=""
+              >
                 <div className="flex items-center mt-5 md:mt-4 lg:mt-5 mx-auto md:mx-0 w-max rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal text-[1rem] leading-[1.1875rem] md:text-[1.09375rem] md:leading-[1.3125rem] xl:text-[1.1875rem] xl:leading-[1.4375rem] font-inter-semibold !tracking-[0] text-white active:scale-[0.98]">
                   <span className="py-[0.7rem] px-[1.2rem] hoverable-text inline-block">
                     Talk to our experts

diff --git a/components/cta/CTA5.js b/components/cta/CTA5.js
@@ -32,7 +32,11 @@ export default function CTA() {
               Not sure where to start? We also offer code and architecture
               reviews, strategic planning, and more.
             </p>
-            <Link href={`${config.WEBSITE_URL}/contact`} className="mt-10">
+            <Link
+              prefetch={false}
+              href={`${config.WEBSITE_URL}/contact`}
+              className="mt-10"
+            >
               <div className="flex items-center mx-auto md:mx-0 w-max rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal  text-[1.09375rem] leading-[1.3125rem] xl:text-[1.188rem] xl:leading-[1.188rem] font-inter-semibold !tracking-[0] text-white active:scale-[0.98]">
                 <span className="py-[0.9rem] md:py-[1rem] px-[1.2rem] md:px-[1.3rem] hoverable-text inline-block">
                   Get Free Consultation

diff --git a/components/partials/footer.js b/components/partials/footer.js
@@ -117,6 +117,7 @@ export default function Footer({ mixpanel }) {
               <ul className="flex flex-wrap justify-center w-full m-auto mt-[1.5rem] xl:mt-8 pl-0 cursor-pointer list-none">
                 <li className="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] mr-1 md:mr-1.5 !rounded-full text-center cursor-pointer gradient-border-btn !border-0">
                   <Link
+                    prefetch={false}
                     href={config.FACEBOOK_URL}
                     target="_blank"
                     onClick={() => {
@@ -134,6 +135,7 @@ export default function Footer({ mixpanel }) {
 
                 <li className="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] mx-1 md:mx-1.5 !rounded-full text-center cursor-pointer gradient-border-btn !border-0">
                   <Link
+                    prefetch={false}
                     href={config.INSTAGRAM_URL}
                     target="_blank"
                     onClick={() => {
@@ -151,6 +153,7 @@ export default function Footer({ mixpanel }) {
 
                 <li className="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] mx-1 md:mx-1.5 !rounded-full text-center cursor-pointer gradient-border-btn !border-0">
                   <Link
+                    prefetch={false}
                     href={config.TWITTER_URL}
                     target="_blank"
                     onClick={() => {
@@ -168,6 +171,7 @@ export default function Footer({ mixpanel }) {
 
                 <li className="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] mx-1 md:mx-1.5 !rounded-full text-center cursor-pointer gradient-border-btn !border-0">
                   <Link
+                    prefetch={false}
                     href={config.BLOG_URL}
                     target="_blank"
                     onClick={() => {
@@ -185,6 +189,7 @@ export default function Footer({ mixpanel }) {
 
                 <li className="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] mx-1 md:mx-1.5 !rounded-full text-center cursor-pointer gradient-border-btn !border-0">
                   <Link
+                    prefetch={false}
                     href={config.LINKEDIN_URL}
                     target="_blank"
                     onClick={() => {
@@ -202,6 +207,7 @@ export default function Footer({ mixpanel }) {
 
                 <li className="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] mx-1 md:mx-1.5 !rounded-full text-center cursor-pointer gradient-border-btn !border-0">
                   <Link
+                    prefetch={false}
                     href={config.YOUTUBE_URL}
                     target="_blank"
                     onClick={() => {

diff --git a/components/partials/header.js b/components/partials/header.js
@@ -63,7 +63,7 @@ export default function Header({ mixpanel }) {
         <nav className="py-5 md:py-[1.75rem] font-inter-medium">
           <div className="container flex flex-row flex-wrap justify-start items-center 3xl:px-24">
             <div className="mr-4 py-[0.3125rem] text-[1.25rem] text-black no-underline whitespace-nowrap">
-              <Link href={HOST_URL}>
+              <Link prefetch={false} href={HOST_URL}>
                 <Image
                   src={Logo}
                   className="mt-1 w-[205px] h-[38.5px]"
@@ -76,6 +76,7 @@ export default function Header({ mixpanel }) {
               <ul className="hidden lg:flex flex-row flex-wrap items-center justify-start lg:ml-auto pl-0 text-[1rem] md:text-[1.10375rem] xl:text-[1.1875rem] leading-[1.125rem] md:leading-[1.28125rem] lg:leading-[1.4375rem]">
                 <li className="ml-0 my-2 sm:my-0">
                   <Link
+                    prefetch={false}
                     href={`${HOST_URL}/services`}
                     className={`relative mr-3.5 xl:mr-[30px] after:absolute after:top-[29px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] ${
                       router.pathname == `${HOST_URL}/services`
@@ -92,6 +93,7 @@ export default function Header({ mixpanel }) {
 
                 <li className="ml-0 my-2 sm:my-0">
                   <Link
+                    prefetch={false}
                     href={`${HOST_URL}/portfolio`}
                     className={`relative mr-3.5 xl:mr-[30px] after:absolute after:top-[29px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] ${
                       router.pathname == `${HOST_URL}/portfolio`
@@ -108,6 +110,7 @@ export default function Header({ mixpanel }) {
 
                 <li className="ml-0 my-2 sm:my-0">
                   <Link
+                    prefetch={false}
                     href={`${HOST_URL}/contributions`}
                     className="relative mr-3.5 xl:mr-[30px] after:absolute after:top-[29px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                     onMouseEnter={handleMouseEnter}
@@ -126,6 +129,7 @@ export default function Header({ mixpanel }) {
                   >
                     <li className="relative ml-0 my-2 sm:my-0">
                       <Link
+                        prefetch={false}
                         href={`${HOST_URL}/contributions`}
                         className="relative mr-3.5 xl:mr-[30px] mx-2 font-inter-medium text-black-core/[0.6] after:absolute after:top-[27px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                         onClick={() => {
@@ -139,6 +143,7 @@ export default function Header({ mixpanel }) {
 
                     <li className="ml-0 my-2 sm:my-0 relative">
                       <Link
+                        prefetch={false}
                         href="https://blog.canopas.com/"
                         className="relative mr-3.5 xl:mr-[30px] mx-2 font-inter-medium text-black-core/[0.6] after:absolute after:top-[27px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                         onClick={() => {
@@ -152,6 +157,7 @@ export default function Header({ mixpanel }) {
                     </li>
                     <li className="ml-0 my-2 sm:my-0 relative">
                       <Link
+                        prefetch={false}
                         href={`${HOST_URL}/resources`}
                         className="relative mr-3.5 xl:mr-[30px] mx-2 font-inter-medium text-black-core/[0.6] after:absolute after:top-[27px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                         onClick={() => {
@@ -170,6 +176,7 @@ export default function Header({ mixpanel }) {
 
                 <li className="ml-0 my-2 sm:my-0">
                   <Link
+                    prefetch={false}
                     href={`${HOST_URL}/jobs`}
                     className={`relative mr-3.5 xl:mr-[30px] after:absolute after:top-[29px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] ${
                       router.pathname == `${HOST_URL}/jobs`
@@ -186,6 +193,7 @@ export default function Header({ mixpanel }) {
 
                 <li className="ml-0 my-2 sm:my-0">
                   <Link
+                    prefetch={false}
                     href={`${HOST_URL}/about`}
                     className={`relative mr-3.5 xl:mr-[30px] after:absolute after:top-[29px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] ${
                       router.pathname == `${HOST_URL}/about`
@@ -202,6 +210,7 @@ export default function Header({ mixpanel }) {
 
                 <li className="order-last ml-0 my-2 sm:my-0 p-0">
                   <Link
+                    prefetch={false}
                     href={`${HOST_URL}/contact`}
                     className={`relative mb-0 mr-3.5 xl:mr-[25px] rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff835b] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.75rem] font-inter-bold text-white ${
                       router.pathname == `${HOST_URL}/contact`
@@ -235,7 +244,7 @@ export default function Header({ mixpanel }) {
                 <div className="sticky top-0 w-full py-3">
                   <div className="flex justify-between items-center">
                     <div className="text-[1.25rem] text-black no-undurline whitespace-nowrap">
-                      <Link href={HOST_URL}>
+                      <Link prefetch={false} href={HOST_URL}>
                         <Image
                           src={Logo}
                           className="mt-1 w-[190px] h-[34.5px]"
@@ -258,6 +267,7 @@ export default function Header({ mixpanel }) {
                 <ul className="flex flex-col justify-start h-[50%] sm:h-[45%] mt-5 text-[1rem] text-[1.09375rem] leading-[1.125rem] overflow-y-scroll">
                   <li className="my-5">
                     <Link
+                      prefetch={false}
                       href={`${HOST_URL}/services`}
                       className="relative hover:bg-gradient-to-r after:absolute after:top-[26px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left hoverable-text"
                       onClick={() => {
@@ -270,6 +280,7 @@ export default function Header({ mixpanel }) {
 
                   <li className="my-5">
                     <Link
+                      prefetch={false}
                       href={`${HOST_URL}/portfolio`}
                       className="relative hover:bg-gradient-to-r after:absolute after:top-[26px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left hoverable-text"
                       onClick={() => {
@@ -282,6 +293,7 @@ export default function Header({ mixpanel }) {
 
                   <li className="my-5">
                     <Link
+                      prefetch={false}
                       href={``}
                       className="relative mr-3.5 xl:mr-[30px] after:absolute after:top-[29px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                       onClick={() => setShowContributionMenu((prev) => !prev)}
@@ -297,6 +309,7 @@ export default function Header({ mixpanel }) {
                     >
                       <li className="relative">
                         <Link
+                          prefetch={false}
                           href={`${HOST_URL}/contributions`}
                           className="relative mr-3.5 xl:mr-[30px] mx-2 font-inter-medium text-black-core/[0.6] after:absolute after:top-[25px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                           onClick={() => {
@@ -309,6 +322,7 @@ export default function Header({ mixpanel }) {
                       </li>
                       <li className="relative">
                         <Link
+                          prefetch={false}
                           href="https://blog.canopas.com/"
                           className="relative mr-3.5 xl:mr-[30px] mx-2 font-inter-medium text-black-core/[0.6] after:absolute after:top-[25px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                           onClick={() => {
@@ -321,6 +335,7 @@ export default function Header({ mixpanel }) {
                       </li>
                       <li className="relative">
                         <Link
+                          prefetch={false}
                           href={`${HOST_URL}/resources`}
                           className="relative mr-3.5 xl:mr-[30px] mx-2 font-inter-medium text-black-core/[0.6] after:absolute after:top-[25px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                           onClick={() => {
@@ -336,6 +351,7 @@ export default function Header({ mixpanel }) {
 
                   <li className="my-5">
                     <Link
+                      prefetch={false}
                       href={`${HOST_URL}/jobs`}
                       className="relative hover:bg-gradient-to-r after:absolute after:top-[26px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left hoverable-text"
                       onClick={() => {
@@ -348,6 +364,7 @@ export default function Header({ mixpanel }) {
 
                   <li className="my-5">
                     <Link
+                      prefetch={false}
                       href={`${HOST_URL}/about`}
                       className="relative hover:bg-gradient-to-r after:absolute after:top-[26px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left hoverable-text"
                       onClick={() => {
@@ -361,6 +378,7 @@ export default function Header({ mixpanel }) {
                 <div className="w-full h-auto bg-white p-4">
                   <div className="grid p-3 pb-5">
                     <Link
+                      prefetch={false}
                       href={`${HOST_URL}/contact`}
                       className="relative justify-self-center rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-bold text-white "
                       onClick={() => {

diff --git a/components/posts/postsList.js b/components/posts/postsList.js
@@ -31,7 +31,7 @@ export default function PostsList({ postData, mixpanel }) {
             className="flex flex-col col-span-2 mb-8 lg:mb-10 border-b-2"
             key={i}
           >
-            <Link href={"/" + post.slug}>
+            <Link prefetch={false} href={"/" + post.slug}>
               <div className="flex flex-row space-x-2 items-center text-[1rem] md:text-[1.03rem] leading-5 tracking-wide capitalize">
                 <div className="relative w-[30px] md:w-[31px] h-[30px] max-w-full max-h-full overflow-hidden">
                   <Image
@@ -89,6 +89,7 @@ export default function PostsList({ postData, mixpanel }) {
               <>
                 <div className="flex flex-row flex-wrap space-x-2 items-center mb-10 md:mb-14 w-[60%] ">
                   <Link
+                    prefetch={false}
                     href={"/tag/" + slug}
                     className="my-1 rounded-full bg-[#f2f2f2] px-2.5 py-1 font-medium no-underline capitalize"
                   >
@@ -105,6 +106,7 @@ export default function PostsList({ postData, mixpanel }) {
                   return (
                     <div className="my-4 mr-2" key={tag.id}>
                       <Link
+                        prefetch={false}
                         href={"/tag/" + tag.slug}
                         className="my-1 rounded-full bg-[#f2f2f2] px-3 py-1.5 font-medium no-underline capitalize"
                       >