search

SSWConsulting / SSW.Website

Generator for ssw.com.au
https://www.ssw.com.au
Apache License 2.0
9 stars 8 forks source link

🔍 SEO - Reduce Total Blocking Time #3067

Closed jeoffreyfischer closed 2 weeks ago

jeoffreyfischer commented 2 months ago

Description Our SEO is down due to the TBL (see screenshot below).

Screenshots Image Figure: TBL is high

Note: Work done to improve live stream banner performance was done as part of this PBI with the misunderstanding that it would reduce total blocking time. A separate issue was created for this - see https://github.com/SSWConsulting/SSW.Website/issues/3108

Calinator444 commented 2 months ago

I tried adding additional dynamic imports but didn't see significant performance improvements

From analyzing the code I discovered that the livestream banner performs a data fetch for every page, which is expensive. I'm in the progress of converting this to a static fetch which should reduce total blocking time, particularly around user groups.

Image Figure: Page speed insights for slot with new dynamic imports (average performance in staging 60)

Calinator444 commented 2 months ago

TODO: Look at why overall performance has regressed from 90

Calinator444 commented 1 month ago

I've looked into re-enabling Party Town, however Next JS workers are still experimental and are not guaranteed to work with all third party scripts.

Note: PartyTown was disabled due to compatibility issues with Hotjar and microsoft Clarity. Compatibility must be ensured before enabling it. https://github.com/SSWConsulting/SSW.Website/pull/1091

https://nextjs.org/docs/pages/api-reference/components/script#optional-props

Calinator444 commented 1 month ago

As per my conversation with @jeoffreyfischer , I will investigate at which point in time the TBT regressed (it appears to have been between sprint 67-68).

@amankumarrr Also mentioned that migrating to app routing could improve performance as well.

Calinator444 commented 1 month ago

I enabled bundling for Pages dependences. The results look promising on staging.

Our live site is on the left, staging slot with bundling enabled is on the right

image Figure: Staging vs production TBT

Calinator444 commented 1 month ago

It's worth mentioning that the Total Blocking time can fluctuate fairly randomly. Here are some page speed insight reports I ran on the 20th of September.

TBT Time
4640ms 6:30pm
2920ms 6:30pm
3240ms 7:00pm
Calinator444 commented 1 month ago

@wicksipedia

As per my conversation with @amankumarrr I think it might be worth parking this for now until we migrate to App routing. Link to related PBI: https://github.com/SSWConsulting/SSW.Website/issues/3153

image Figure: Page using App routing (/products)
image Figure: Similar page using Pages router (/industry)

Calinator444 commented 1 month ago

@wicksipedia

As per our conversation we are going to park this for now until we move to app routing.

This sprint I tried enable external dependency bundling for pages router dependencies but it cause build errors in our pipeline. This is an experimental feature and I don't recommend enabling it this close to switching over to rules.

Image

jeoffreyfischer commented 1 month ago

As per our conversation with @adamcogan during Sprint Review 75, @amankumarrr will work on implementing app-routing on SSW Website TODO: Add link to PBI

amankumarrr commented 1 month ago

@wicksipedia @Calinator444 @bradystroud @jeoffreyfischer

Interestingly, the bundle size of the migrated app routing page is almost half of that on the page routing, indicating that app routing could potentially reduce TBT (Total Blocking Time). However, the performance metrics from PageSpeed Insights don't show a significant improvement. I’ll investigate further to see if we can enhance performance and web vitals before implementing it on the homepage.

Image Figure: PageSpeedInsights report of /product and /industry with their tree map respectively

Calinator444 commented 1 month ago

@amankumarrr I don't think bundling is enabled by default for pages router pages

I investigated enabling dependency bundling for pages router pages during the last sprint but it caused errors on our build pipeline. Overall it's not a very stable feature so moving to app routing should be the priority for now.

https://nextjs.org/docs/pages/building-your-application/optimizing/package-bundling

jeoffreyfischer commented 1 month ago

❌ Not Done - We are hoping that this will be fixed by moving from Pages Router to App Router in #3159

amankumarrr commented 1 month ago

TBT will improve with this issue - https://github.com/SSWConsulting/SSW.Website/issues/3159. Upon further investigation, I found that while /_next/static/* was cached by Cloudflare, /_next/image/* was still being served by TinaCloud. This presents an opportunity to potentially save more TBT.

amankumarrr commented 3 weeks ago

Fixed the layout shift issue with the live stream banner

Screenshot: image Figure: Before

image Figure: After

amankumarrr commented 2 weeks ago

✅ Removed the prefetching of data on homepage ✅ Converted jpg images to webp ✅ Reduce the client side rendering ✅ Removed the background video for the /consulting pages

On Production Slot

image Figure: Home page report

image Figure: Consulting page report

On Staging Slot

image Figure: Home page report

image Figure: Consulting page report

wicksipedia commented 2 weeks ago

Converted jpg images to webp

It looks like you deleted the jpgs and replaced them with webp files. next/image should be able to serve webp files for us when appropriate.

This would be a better approach in case users don't support webp files

amankumarrr commented 2 weeks ago

Converted jpg images to webp

It looks like you deleted the jpgs and replaced them with webp files. next/image should be able to serve webp files for us when appropriate.

This would be a better approach in case users don't support webp files

I haven’t deleted any JPGs; I manually converted them to WebP. Since they were being served from CSS, next/image couldn't optimize them. @wicksipedia