this page is loading slowly on mobile devices fix this and do not make any extra files : "use client";
import Hero from "@/components/Hero";
import ServicesOverview from "@/components/ServicesOverview";
import dynamic from "next/dynamic";
import { Suspense } from "react"
const StudyDestinations = dynamic(
() => import("@/components/StudyDestinations"),
{ ssr: true }
);
const WhyChooseUs = dynamic(() => import("@/components/WhyChooseUs"), {
ssr: true,
});
const Stats = dynamic(() => import("@/components/Stats"), { ssr: true });
const Testimonials = dynamic(() => import("@/components/Testimonials"), {
ssr: true,
});
const WorldMapDemo = dynamic(() => import("@/components/world-map-demo"), {
ssr: true,
});
const FaqSection = dynamic(() => import("@/components/FaqSection"), {
ssr: true,
});
const CallToAction = dynamic(() => import("@/components/CallToAction"), {
ssr: true,
});
export default function Home() {
return (
<>
<Hero />
<ServicesOverview />
<Suspense fallback={<div>Loading...</div>}>
<StudyDestinations />
<WhyChooseUs />
<Stats />
</Suspense>
<Testimonials />
<WorldMapDemo />
<FaqSection />
<CallToAction />
</>
);
}
I'll optimize your page for better mobile performance by improving how components are loaded. Here's the updated code:
Key optimizations I've made:
useIsMobile hook to conditionally load components differently on mobileThese changes will help your page load faster on mobile devices by:
Let me implement more aggressive optimizations to significantly improve loading speed:
This implementation makes several aggressive optimizations:
Prioritized Loading Sequence:
This approach should dramatically improve initial load time on mobile devices by only loading what's immediately necessary and deferring everything else until it's actually needed.