fix: set body to display:none initially

[buuhuu]

Instead of using display:none on the body during the early eager phase, the commerce boilerplate uses visibility: hidden. Content that is hidden that way will still be layouted by the browser and this causes the browser to change the loading priority of images from low to high which loads images immediately even below the fold before LCP.

develop (breakpoint at scripts.js line 373 before any decoration happens)

visibility-fix (same breakpoint)

Test URLs:

• Before: https://develop--aem-boilerplate-commerce--hlxsites.aem.live/
• After: https://visibility-fix--aem-boilerplate-commerce--hlxsites.aem.live/

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [cf2c687](https://github.com/hlxsites/aem-boilerplate-commerce/commit/cf2c68769cd08c2ca47a3ae3ca085b219ad0bb96) :arrows_counterclockwise: (latest) * [dd05fa8](https://github.com/hlxsites/aem-boilerplate-commerce/commit/dd05fa8659743f59e4722a2dfa62b9f9e10fe3c5) :white_check_mark:

[aem-code-sync[bot]]

	Page	Scores	Audits	Google
:iphone:	/
:desktop_computer:	/