Feat: new RenderSections for all pages
#612
Open
+42
−40
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
eduardoformiga
changed the title
RenderSection StructureRenderSections for all pages
…enderSections-for-all-pages
eduardoformiga
added a commit
to vtex/faststore
that referenced
this pull request
Dec 3, 2024
Depends on - #2555 ## What's the purpose of this pull request? This PR is part of the performance initiative. It aims to create a new structure for the `RenderSections` that uses the `ViewportObserver` along with the `LazyLoadingSection` to load the section on demand. Now, the RenderSections receives the `globalSection` as props, and we are removing the `GlobalSection` (parent) Component that wraps the pages. It also applies this structure to all pages: - home - pdp - plp - login - checkout - account - search - landing page - 500 - 404 PS: some changes from PLP and Landing Page need to be applied now. Then I applied some `Promise.all` and other improvements beforehand. ## How to test it? Now, we can only load the JS for the sections inside the viewport during the first load. You can check the network tab in devtools while scrolling the page until the `Footer` to double-check the JS for sections above the fold being loaded. You can run the project locally or use the starter preview to double-check this behavior. you can test all the pages. The landing page can be accessed through this URL: http://localhost:3000/my-landing-page https://github.com/user-attachments/assets/8d69faa5-782f-4fb4-81fc-fd637043870b ## Performance ||Before|After| |-|-|-| ||https://starter.vtex.app/|https://sfj-b662675--starter.preview.vtex.app/| |on a lucky day (when PSI has a good sense of humor, haha)|<img width="791" alt="Screenshot 2024-11-12 at 19 49 50" src="https://github.com/user-attachments/assets/c1392da6-2e82-40ac-85dd-3367e607752f">|<img width="795" alt="Screenshot 2024-11-12 at 19 50 00" src="https://github.com/user-attachments/assets/e05ab731-5e20-4f2e-b304-97d63efd9d84">| |on a normal day|<img width="804" alt="Screenshot 2024-11-12 at 19 54 24" src="https://github.com/user-attachments/assets/9706709a-00ee-40a2-ae2b-8d5678489b9e">|<img width="789" alt="Screenshot 2024-11-12 at 19 54 17" src="https://github.com/user-attachments/assets/e4947d10-9dfc-491c-9165-a1725e935e11">| ### Starters Deploy Preview - vtex-sites/starter.store#612 preview https://sfj-b662675--starter.preview.vtex.app/ ## References In this video, you can see an explanation of loading JS on demand using the Intersection Observer API + code splitting. https://drive.google.com/file/u/1/d/13VYPu45Vaav2ecGmKcFAOUMKAS3pMHd4/view POC PR - #2404
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's the purpose of this pull request?
Applies changes from FS related PR.
Faststore related PRs
RenderSectionsfor all pages vtex/faststore#2558