From b57c150269d51bbd4fd4bd8022f8c4e091c54e04 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Fri, 20 Feb 2026 19:41:44 +0530 Subject: [PATCH 1/6] (pricing):Improve mobile performance Signed-off-by: Sbragul26 --- _headers | 28 ++++++-- src/components/Pricing/PlanCard/index.js | 2 +- src/components/Pricing/PricingAddons/index.js | 22 +++---- .../Blockquote/Blockquote-image/index.js | 8 +-- src/sections/Pricing/comparison.js | 2 +- src/sections/Pricing/index.js | 26 ++++++-- src/sections/Pricing/openSource.js | 2 +- src/sections/Pricing/review-slider.js | 66 +++++++++---------- 8 files changed, 95 insertions(+), 61 deletions(-) diff --git a/_headers b/_headers index ad684eb7db5bb..43d211527f7e4 100644 --- a/_headers +++ b/_headers @@ -1,17 +1,35 @@ -# Cache static resources for 10 months +# Default: no cache for HTML files (allow fresh content) +/*.html + Cache-Control: public, max-age=3600, must-revalidate + +# Cache immutable assets (with content hash) for 1 year +/framework-*.js +/app-*.js /*.js /*.css + Cache-Control: public, max-age=31536000, immutable + +# Cache images and fonts for 1 year /*.woff2 /*.webp /*.jpeg /*.webp /*.gif /*.svg - Cache-Control: public, max-age=25920000 +/images/* +/fonts/* + Cache-Control: public, max-age=31536000, immutable -# Cache HTML files for 10 months -/*.html - Cache-Control: public, max-age=25920000 +# Cache static files +/static/* + Cache-Control: public, max-age=31536000, immutable + +# Security headers +/* + X-Frame-Options: SAMEORIGIN + X-Content-Type-Options: nosniff + X-XSS-Protection: 1; mode=block + Referrer-Policy: strict-origin-when-cross-origin diff --git a/src/components/Pricing/PlanCard/index.js b/src/components/Pricing/PlanCard/index.js index 67561fc021196..6f67ec182fc36 100644 --- a/src/components/Pricing/PlanCard/index.js +++ b/src/components/Pricing/PlanCard/index.js @@ -115,4 +115,4 @@ const PlanCard = ({ planData, isYearly, currency }) => { ); }; -export default PlanCard; +export default React.memo(PlanCard); diff --git a/src/components/Pricing/PricingAddons/index.js b/src/components/Pricing/PricingAddons/index.js index 329b970dea31f..fd7fb10588050 100644 --- a/src/components/Pricing/PricingAddons/index.js +++ b/src/components/Pricing/PricingAddons/index.js @@ -1,5 +1,5 @@ /* eslint-disable indent */ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback, useMemo } from "react"; import { Container, Card, @@ -41,7 +41,7 @@ import { } from "./styles"; import { formatAndConvertPrice, formatSliderPrice } from "../../../utils/currencies"; -export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterprisePlan }) => { +export const PricingAddons = React.memo(({ isYearly = false, setIsYearly, currency, enterprisePlan }) => { const [selectedAddon, setSelectedAddon] = useState(null); // const [quantity, setQuantity] = useState(1); const quantity = 1; @@ -128,7 +128,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr } }, [selectedAddon, quantity, quantityIndex, selectedSubAddOns, isYearly, enterpriseUsers, enterprisePlan]); - const handleAddonChange = (addonId) => { + const handleAddonChange = useCallback((addonId) => { const addon = addOns.find((a) => a.id === addonId); setSelectedAddon(addon || null); setQuantityIndex(0); @@ -139,16 +139,16 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr } else { setSelectedSubAddOns({}); } - }; + }, [addOns]); - const handleSubAddOnToggle = (subAddOnId, isChecked) => { + const handleSubAddOnToggle = useCallback((subAddOnId, isChecked) => { setSelectedSubAddOns(prev => ({ ...prev, [subAddOnId]: isChecked })); - }; + }, []); - const getPlanLinkForAcademy = () => { + const getPlanLinkForAcademy = useCallback(() => { if (!selectedAddon || selectedAddon.id !== "academy") { return { link: "#", name: "Subscribe" }; } @@ -180,9 +180,9 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr } return { link: "#", name: "Subscribe" }; - }; + }, [selectedAddon, quantityIndex, isYearly]); - const getPlanLinkForOtherAddons = () => { + const getPlanLinkForOtherAddons = useCallback(() => { if (!selectedAddon || selectedAddon.id === "academy") { return { link: "#", name: "Subscribe" }; } @@ -191,7 +191,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr link: "#", name: "Subscribe" }; - }; + }, [selectedAddon]); return ( @@ -576,4 +576,4 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr ); -}; +}); diff --git a/src/reusecore/Blockquote/Blockquote-image/index.js b/src/reusecore/Blockquote/Blockquote-image/index.js index c52504eebf133..efdefde494eef 100644 --- a/src/reusecore/Blockquote/Blockquote-image/index.js +++ b/src/reusecore/Blockquote/Blockquote-image/index.js @@ -10,7 +10,7 @@ const Customers = (props) => {
-
+
{props.person}
❝
@@ -41,7 +41,7 @@ const Customers = (props) => {
-
+
{props.person}
@@ -71,7 +71,7 @@ const Customers = (props) => { {props.quote}
-
+
{props.person}
{props.person ? props.person : ""}
{props.title ? props.title : ""}
@@ -87,4 +87,4 @@ const Customers = (props) => { ); }; -export default Customers; +export default React.memo(Customers); diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index 5455f00f77f57..599ddffe7e8c4 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -244,4 +244,4 @@ const Comparison = () => { ); }; -export default Comparison; +export default React.memo(Comparison); diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js index dd28ea12e7317..eaf1dd8795ecb 100644 --- a/src/sections/Pricing/index.js +++ b/src/sections/Pricing/index.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, Suspense, lazy } from "react"; import PricingWrapper from "./pricing.style"; import Comparison from "./comparison"; import FAQ from "../General/Faq"; @@ -14,6 +14,12 @@ import { getToggleButtonStyle, } from "../../components/Pricing/PricingAddons/styles.js"; +// Lazy load components below the fold for better performance +const LazyComparison = lazy(() => import("./comparison")); +const LazyReviews = lazy(() => import("./review-slider")); +const LazyOpenSourceBanner = lazy(() => import("./openSource")); +const LazyFAQ = lazy(() => import("../General/Faq")); + const customToggleButtonStyles = { container: { ...toggleButtonStyles.container, @@ -134,10 +140,20 @@ const Pricing = () => {
opt.tier == "Enterprise")[0]} />
- - - - + + {/* Lazy load below-fold components */} + }> + + + }> + + + }> + + + }> + + ); diff --git a/src/sections/Pricing/openSource.js b/src/sections/Pricing/openSource.js index dfe7370aac27e..5b070a85ddad0 100644 --- a/src/sections/Pricing/openSource.js +++ b/src/sections/Pricing/openSource.js @@ -48,4 +48,4 @@ const OpenSourceBannerWrapper = styled.div` } } `; -export default OpenSourceBanner; +export default React.memo(OpenSourceBanner); diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js index 9eaa1ff3c2d52..11fcdab6d8e23 100644 --- a/src/sections/Pricing/review-slider.js +++ b/src/sections/Pricing/review-slider.js @@ -1,5 +1,5 @@ -import React, { useRef, useState, useLayoutEffect } from "react"; +import React, { useRef, useState, useLayoutEffect, useMemo, useCallback } from "react"; import styled from "styled-components"; import Customers from "../../reusecore/Blockquote/Blockquote-image"; import Slider from "react-slick"; @@ -28,7 +28,7 @@ const settings = { slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, - + lazyLoad: "progressive", // Load images progressively responsive: [ { breakpoint: 1300, @@ -92,55 +92,55 @@ const Reviews = () => { const [isClient, setIsClient] = useState(false); const [slidesToShowState, setSlidesToShowState] = useState(null); const sliderRef = useRef(null); + const resizeTimeoutRef = useRef(null); - const mergedSettings = { + const computeSlides = useCallback(() => { + const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200; + if (w <= 800) return 1; + if (w <= 1024) return 2; + return 3; + }, []); + + const mergedSettings = useMemo(() => ({ ...settings, slidesToShow: slidesToShowState || 1, slidesToScroll: 1, responsive: [] - }; + }), [slidesToShowState]); - const computeSlides = () => { - const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200; - if (w <= 800) return 1; - if (w <= 1024) return 2; - return 3; - }; + const onResizeDebounced = useCallback(() => { + if (resizeTimeoutRef.current) { + clearTimeout(resizeTimeoutRef.current); + } + resizeTimeoutRef.current = setTimeout(() => { + const slides = computeSlides(); + setSlidesToShowState((prev) => { + if (prev !== slides) return slides; + return prev; + }); + if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") { + sliderRef.current.innerSlider.onWindowResized(); + } + }, 150); + }, [computeSlides]); useLayoutEffect(() => { - setIsClient(true); setSlidesToShowState(computeSlides()); - let resizeTimeout = null; - const onResizeDebounced = () => { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => { - const slides = computeSlides(); - setSlidesToShowState((prev) => { - if (prev !== slides) return slides; - return prev; - }); - if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") { - sliderRef.current.innerSlider.onWindowResized(); - } - }, 100); - }; - const onLoad = () => onResizeDebounced(); - window.addEventListener("resize", onResizeDebounced); + window.addEventListener("resize", onResizeDebounced, { passive: true }); window.addEventListener("load", onLoad); - const imgs = document.querySelectorAll(".slider img"); - imgs.forEach((img) => img.addEventListener("load", onLoad)); return () => { window.removeEventListener("resize", onResizeDebounced); window.removeEventListener("load", onLoad); - imgs.forEach((img) => img.removeEventListener("load", onLoad)); - clearTimeout(resizeTimeout); + if (resizeTimeoutRef.current) { + clearTimeout(resizeTimeoutRef.current); + } }; - }, []); + }, [computeSlides, onResizeDebounced]); if (!isClient || slidesToShowState === null) return null; @@ -288,4 +288,4 @@ const Reviews = () => { ); }; -export default Reviews; +export default React.memo(Reviews); From c4a0ecb4bc738a76ebc7e55e5b7b86fe68af84f1 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Fri, 20 Feb 2026 20:39:32 +0530 Subject: [PATCH 2/6] (pricing):Improve mobile performance Signed-off-by: Sbragul26 --- src/sections/Pricing/index.js | 94 +++++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 38 deletions(-) diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js index eaf1dd8795ecb..50709256e950a 100644 --- a/src/sections/Pricing/index.js +++ b/src/sections/Pricing/index.js @@ -1,12 +1,10 @@ -import React, { useState, Suspense, lazy } from "react"; +import React, { useState, Suspense, lazy, useCallback, useMemo } from "react"; import PricingWrapper from "./pricing.style"; -import Comparison from "./comparison"; import FAQ from "../General/Faq"; import Reviews from "./review-slider"; import options from "./generatePlans"; import PlanCard from "../../components/Pricing/PlanCard"; import OpenSourceBanner from "./openSource"; -import { PricingAddons } from "../../components/Pricing/PricingAddons"; import { Box, FormControl, InputLabel, MenuItem, Select, Typography } from "@sistent/sistent"; import { Currencies } from "../../utils/currencies"; import { @@ -19,6 +17,7 @@ const LazyComparison = lazy(() => import("./comparison")); const LazyReviews = lazy(() => import("./review-slider")); const LazyOpenSourceBanner = lazy(() => import("./openSource")); const LazyFAQ = lazy(() => import("../General/Faq")); +const LazyPricingAddons = lazy(() => import("../../components/Pricing/PricingAddons").then(module => ({ default: module.PricingAddons }))); const customToggleButtonStyles = { container: { @@ -47,41 +46,47 @@ const getCustomToggleButtonStyle = (isActive, baseStyle) => ({ }, }); -export const CurrencySelect = ({ currency, setCurrency }) => { +export const CurrencySelect = React.memo(({ currency, setCurrency }) => { + const handleCurrencyChange = useCallback((e) => { + setCurrency(e.target.value); + }, [setCurrency]); + + const formControlSx = useMemo(() => ({ + minWidth: 150, + "& .MuiInputLabel-root": { + color: "white", + "&.Mui-focused": { color: "#00B39F" }, + }, + "& .MuiOutlinedInput-root": { + color: "white", + "& .MuiSelect-icon": { color: "white" }, + "& .MuiOutlinedInput-notchedOutline": { borderColor: "white" }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + borderColor: "#00B39F", + }, + }, + "&:hover": { + "& .MuiInputLabel-root": { color: "#00B39F" }, + "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { + borderColor: "#00B39F", + borderWidth: "2px", + }, + }, + }), []); + + const currencyEntries = useMemo(() => Object.entries(Currencies), []); + return ( Currency ); -}; +}); const Pricing = () => { - // const [monthly, setMonthly] = useState(false); const [isYearly, setIsYearly] = useState(false); const [currency, setCurrency] = useState("USD"); + const handleYearlyToggle = useCallback((yearly) => { + setIsYearly(yearly); + }, []); + + const handleCurrencyChange = useCallback((newCurrency) => { + setCurrency(newCurrency); + }, []); + + const enterprisePlan = useMemo(() => options.filter(opt => opt.tier == "Enterprise")[0], []); + return (

Plans For Every Team Size

- + setIsYearly(false)} + onClick={() => handleYearlyToggle(false)} sx={getCustomToggleButtonStyle(!isYearly, customToggleButtonStyles.base)} > Monthly setIsYearly(true)} + onClick={() => handleYearlyToggle(true)} sx={getCustomToggleButtonStyle(isYearly, customToggleButtonStyles.base)} > Yearly @@ -137,9 +151,13 @@ const Pricing = () => {
-
- opt.tier == "Enterprise")[0]} /> -
+ + {/* Lazy load PricingAddons to reduce TBT */} + }> +
+ +
+ {/* Lazy load below-fold components */} }> From 905e67cc7fe56f04acc682cbf2fb27350b98ff92 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Fri, 20 Feb 2026 21:07:24 +0530 Subject: [PATCH 3/6] (pricing):Improve mobile performance Signed-off-by: Sbragul26 --- src/sections/Pricing/index.js | 57 +++++++++++++++++++++-------------- 1 file changed, 35 insertions(+), 22 deletions(-) diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js index 50709256e950a..4b71a9e8ab5ba 100644 --- a/src/sections/Pricing/index.js +++ b/src/sections/Pricing/index.js @@ -1,4 +1,4 @@ -import React, { useState, Suspense, lazy, useCallback, useMemo } from "react"; +import React, { useState, Suspense, lazy, useCallback, useMemo, useEffect } from "react"; import PricingWrapper from "./pricing.style"; import FAQ from "../General/Faq"; import Reviews from "./review-slider"; @@ -111,6 +111,7 @@ export const CurrencySelect = React.memo(({ currency, setCurrency }) => { const Pricing = () => { const [isYearly, setIsYearly] = useState(false); const [currency, setCurrency] = useState("USD"); + const [renderHeavyComponents, setRenderHeavyComponents] = useState(false); const handleYearlyToggle = useCallback((yearly) => { setIsYearly(yearly); @@ -122,6 +123,14 @@ const Pricing = () => { const enterprisePlan = useMemo(() => options.filter(opt => opt.tier == "Enterprise")[0], []); + // Defer rendering of heavy components until after paint + useEffect(() => { + const timeout = setTimeout(() => { + setRenderHeavyComponents(true); + }, 100); + return () => clearTimeout(timeout); + }, []); + return (
@@ -152,30 +161,34 @@ const Pricing = () => {
- {/* Lazy load PricingAddons to reduce TBT */} - }> -
- -
- + {/* Lazy load PricingAddons to reduce TBT - defer until after paint */} + {renderHeavyComponents && ( + }> +
+ +
+ + )} - {/* Lazy load below-fold components */} - }> - - - }> - - - }> - - - }> - - + {/* Lazy load below-fold components - defer until after paint */} + {renderHeavyComponents && ( + <> + }> + + + }> + + + }> + + + }> + + + + )} ); - }; - export default Pricing; From 40aab7b2ba8afbad8e1f2d67318f8260d12ef6ba Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Fri, 20 Feb 2026 21:33:21 +0530 Subject: [PATCH 4/6] (pricing):Improve mobile performance Signed-off-by: Sbragul26 --- fonts.css | 14 +++++++------- gatsby-browser.js | 11 ++++++----- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/fonts.css b/fonts.css index 3eeefe4ffd6d3..c7d8a45a9973d 100644 --- a/fonts.css +++ b/fonts.css @@ -2,21 +2,21 @@ font-family: "Qanelas Soft Black"; src: url('./static/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype'); font-weight: normal; - font-display: swap; + font-display: optional; } @font-face { font-family: "Qanelas Soft Black Italic"; src: url('./static/fonts/qanelas-soft/QanelasSoftBlackItalic.otf') format('opentype'); font-style: italic; - font-display: swap; + font-display: optional; } @font-face { font-family: "Qanelas Soft Heavy"; src: url('./static/fonts/qanelas-soft/QanelasSoftHeavy.otf') format('opentype'); font-weight: 900; - font-display: swap; + font-display: optional; } @font-face { @@ -24,14 +24,14 @@ src: url('./static/fonts/qanelas-soft/QanelasSoftHeavyItalic.otf') format('opentype'); font-weight: 900; font-style: italic; - font-display: swap; + font-display: optional; } @font-face { font-family: "Qanelas Soft ExtraBold"; src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBold.otf') format('opentype'); font-weight: 800; - font-display: swap; + font-display: optional; } @font-face { @@ -39,14 +39,14 @@ src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf') format('opentype'); font-weight: 800; font-style: italic; - font-display: swap; + font-display: optional; } @font-face { font-family: "Qanelas Soft Bold"; src: url('./static/fonts/qanelas-soft/QanelasSoftBold.otf') format('opentype'); font-weight: bold; - font-display: swap; + font-display: optional; } @font-face { diff --git a/gatsby-browser.js b/gatsby-browser.js index 773e5b0527b2d..42bf28cbb5602 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -3,12 +3,13 @@ import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; document.addEventListener("DOMContentLoaded", () => { - /** init gtm after 3500 seconds - this could be adjusted */ - setTimeout(initGTM, 3500); + /** init gtm after 100ms to avoid blocking main thread during paint */ + setTimeout(initGTM, 100); }); -document.addEventListener("scroll", initGTMOnEvent); -document.addEventListener("mousemove", initGTMOnEvent); -document.addEventListener("touchstart", initGTMOnEvent); +/** Use passive: true to prevent event handler from blocking scrolling performance */ +document.addEventListener("scroll", initGTMOnEvent, { passive: true }); +document.addEventListener("mousemove", initGTMOnEvent, { passive: true }); +document.addEventListener("touchstart", initGTMOnEvent, { passive: true }); function initGTMOnEvent(event) { initGTM(); event.currentTarget.removeEventListener(event.type, initGTMOnEvent); // remove the event listener that got triggered From 84f6c8116312d0d5ffb6762b201e60ab042551a7 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Fri, 20 Feb 2026 21:57:53 +0530 Subject: [PATCH 5/6] (pricing):Improve mobile performance Signed-off-by: Sbragul26 --- fonts.css | 14 +++++++------- gatsby-browser.js | 11 +++++------ src/html.js | 1 - src/sections/Pricing/review-slider.js | 14 ++++++++++++-- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/fonts.css b/fonts.css index c7d8a45a9973d..3eeefe4ffd6d3 100644 --- a/fonts.css +++ b/fonts.css @@ -2,21 +2,21 @@ font-family: "Qanelas Soft Black"; src: url('./static/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype'); font-weight: normal; - font-display: optional; + font-display: swap; } @font-face { font-family: "Qanelas Soft Black Italic"; src: url('./static/fonts/qanelas-soft/QanelasSoftBlackItalic.otf') format('opentype'); font-style: italic; - font-display: optional; + font-display: swap; } @font-face { font-family: "Qanelas Soft Heavy"; src: url('./static/fonts/qanelas-soft/QanelasSoftHeavy.otf') format('opentype'); font-weight: 900; - font-display: optional; + font-display: swap; } @font-face { @@ -24,14 +24,14 @@ src: url('./static/fonts/qanelas-soft/QanelasSoftHeavyItalic.otf') format('opentype'); font-weight: 900; font-style: italic; - font-display: optional; + font-display: swap; } @font-face { font-family: "Qanelas Soft ExtraBold"; src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBold.otf') format('opentype'); font-weight: 800; - font-display: optional; + font-display: swap; } @font-face { @@ -39,14 +39,14 @@ src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf') format('opentype'); font-weight: 800; font-style: italic; - font-display: optional; + font-display: swap; } @font-face { font-family: "Qanelas Soft Bold"; src: url('./static/fonts/qanelas-soft/QanelasSoftBold.otf') format('opentype'); font-weight: bold; - font-display: optional; + font-display: swap; } @font-face { diff --git a/gatsby-browser.js b/gatsby-browser.js index 42bf28cbb5602..773e5b0527b2d 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -3,13 +3,12 @@ import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; document.addEventListener("DOMContentLoaded", () => { - /** init gtm after 100ms to avoid blocking main thread during paint */ - setTimeout(initGTM, 100); + /** init gtm after 3500 seconds - this could be adjusted */ + setTimeout(initGTM, 3500); }); -/** Use passive: true to prevent event handler from blocking scrolling performance */ -document.addEventListener("scroll", initGTMOnEvent, { passive: true }); -document.addEventListener("mousemove", initGTMOnEvent, { passive: true }); -document.addEventListener("touchstart", initGTMOnEvent, { passive: true }); +document.addEventListener("scroll", initGTMOnEvent); +document.addEventListener("mousemove", initGTMOnEvent); +document.addEventListener("touchstart", initGTMOnEvent); function initGTMOnEvent(event) { initGTM(); event.currentTarget.removeEventListener(event.type, initGTMOnEvent); // remove the event listener that got triggered diff --git a/src/html.js b/src/html.js index 12e4c194c7770..80e0240b16c8e 100644 --- a/src/html.js +++ b/src/html.js @@ -12,7 +12,6 @@ export default function HTML(props) { content="width=device-width, initial-scale=1, shrink-to-fit=no" /> { } - { responsive: [] }), [slidesToShowState]); + // Debounced resize handler - avoid repeated reflow queries const onResizeDebounced = useCallback(() => { if (resizeTimeoutRef.current) { clearTimeout(resizeTimeoutRef.current); @@ -118,10 +119,19 @@ const Reviews = () => { if (prev !== slides) return slides; return prev; }); + // Use requestIdleCallback to defer slider update until idle if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") { - sliderRef.current.innerSlider.onWindowResized(); + if (typeof requestIdleCallback !== "undefined") { + requestIdleCallback(() => { + if (sliderRef.current?.innerSlider?.onWindowResized) { + sliderRef.current.innerSlider.onWindowResized(); + } + }); + } else { + sliderRef.current.innerSlider.onWindowResized(); + } } - }, 150); + }, 200); // Increased debounce to 200ms to avoid excessive reflows }, [computeSlides]); useLayoutEffect(() => { From b492e68436eff70d30c45120d0a7c5b90c388a66 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Sat, 21 Feb 2026 08:51:51 +0530 Subject: [PATCH 6/6] perf:(pricing):Improve mobile performance Signed-off-by: Sbragul26 --- src/components/Pricing/PlanCard/index.js | 4 ---- src/components/Pricing/PricingAddons/index.js | 6 ------ src/sections/Pricing/comparison.js | 1 - src/sections/Pricing/index.js | 2 -- src/sections/Pricing/review-slider.js | 6 ++---- 5 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/components/Pricing/PlanCard/index.js b/src/components/Pricing/PlanCard/index.js index 6f67ec182fc36..99f00058250aa 100644 --- a/src/components/Pricing/PlanCard/index.js +++ b/src/components/Pricing/PlanCard/index.js @@ -18,7 +18,6 @@ const PlanCard = ({ planData, isYearly, currency }) => { const formatPrice = (price) => { const formattedPrice = formatAndConvertPrice(price, currency); - // Remove the currency symbol by extracting only the numeric part return parseFloat(formattedPrice.replace(/[^0-9.]/g, "")); }; const getCurrencySymbol = (currency) => { @@ -30,7 +29,6 @@ const PlanCard = ({ planData, isYearly, currency }) => { {planData.map((x) => ( - //
@@ -64,7 +62,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {