This is a React 18 SSC port of WKND app.
The only client side components are MobileHeader.jsx and next/Image.
PageSpeed Insights on Vercel = 99
PageSpeed Insights on Azure = 95
This variant shows the impact of loading GSAP on the initial page load and its instant run to generate the final rendering as the page. GSPA is loaded and innitiliased by using a Client Side React Component PanelAnimationWrapper.jsx. One component instance is created for each Panel that has animations -- in total 7 instances.
PageSpeed Insights on Vercel ~= 86
PageSpeed Insights on Azure ~= 70
This variant shows the impact of loading GSAP plus the time to play the animation as directed by the fragment. Largest CWV as the LCP end is the moment the animation is done. Actively playing the animation also has a negative impact on Total Blocking Time on non-potato devices.
PageSpeed Insights on Vercel ~= 88
PageSpeed Insights on Azure ~= 89
PageSpeed Insights on Vercel ~= 100
PageSpeed Insights on Azure ~= 100
Use the following env vars:
NEXT_PUBLIC_AEM_HOST=https://publish-p64257-e147834-cmstg.adobeaemcloud.com
NEXT_GRAPHQL_ENDPOINT=/content/_cq_graphql/aem-demo-assets/endpoint.json
NEXT_PUBLIC_URL=https://green-tree-0385ee80f.2.azurestaticapps.net