♻️ App Router migration - Homepage

[jeoffreyfischer]

Description
Currently our Website is using Page Router. This results in a huge bundle size which results in a slower UX on the website.

Tasks

• Migrate Homepage from Page Router to App Router

[amankumarrr]

🚧In progress:

✅ Home page is served from App Routing
✅ Improved Cumulative Layout and Largest Content Paint
✅ Cleaned up the unnecessary divs for the mobile view
✅ Reduced Total blocking time by almost half from 3000ms+ to 1600ms
✅ Page score went up for desktop 📈90+ from 70+

Screenshot:

Figure: PageSpeedInsight report

[amankumarrr]

Remaining tasks:

• Testing for UG
• Making Upcoming events static to improve SEO and to reduce the bundle size

[amankumarrr]

Created a separate issue for the remaining tasks - #3186

[amankumarrr]

Figure: Before - App Routing migration

[amankumarrr]

Figure: Figure: Before - App Routing migration

[amankumarrr]

Figure: Figure: Before - App Routing migration

[amankumarrr]

@bradystroud @wicksipedia

After merging the PR, I discovered an issue with cumulative layout shift (CLS), leading to poor performance on desktop. I'm currently investigating the cause.

Figure: After - App routing migration

[amankumarrr]

@wicksipedia @bradystroud @Calinator444 @jeoffreyfischer

The performance on production has not improved but has actually deteriorated. The app service slot shows the same performance; however, when the traffic is routed through Cloudflare, it introduces delays and cumulative layout shifts. I tested the build locally with throttling (4G slow), and it works fine. The issue only appears when served via Cloudflare.

I suspect this could be due to the Brotli compression used by default on Cloudflare, whereas Next.js already returns compressed Gzip for the HTML. I will investigate this further to find the root cause and resolve the issue.

[amankumarrr]

Directly through the app service's production slot.

[amankumarrr]

@wicksipedia @bradystroud @Calinator444 @jeoffreyfischer

I've discovered that the Carousel is being loaded twice, but this only happens when served through Cloudflare. I've been attempting to reproduce the issue locally using Nginx, but the occurrence is significantly lower compared to Cloudflare. Based on the screenshot, it appears the client is making a second call for the Carousel images.

I'll continue investigating to understand why this behavior is unique to Cloudflare and determine how to prevent these duplicate requests.

Figure: On production, the carousel image is being loaded twice

[amankumarrr]

✅fixed the issue with cumulative layout shift.

Before

After