hlxsites / merative2

Merative.com site on Franklin
https://merative.com
Apache License 2.0
2 stars 9 forks source link

fix: reduce cls caused by nav #378

Closed fkakatie closed 2 months ago

fkakatie commented 2 months ago

Description

Currently, all header height styles are located in block/header/header.css, which is lazy-loaded. This generates significant CLS when the loaded content in main is shoved down to accommodate the newly loaded stylesheets impacting header and nav. Proposing to move header nav styles impacting height into styles.css so circumvent this issue. Also proposing the removal of duplicative styles.

Screenshot 2024-04-15 at 2 06 53 PM Screenshot 2024-04-15 at 2 13 11 PM

Before vs. After

Changed

Removed

Test URLs

aem-code-sync[bot] commented 2 months ago

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.

Commits * [7732329](https://github.com/hlxsites/merative2/commit/77323290cb37a33ef6bce8de7f9ac2515b8371dd) :arrows_counterclockwise: (latest) * [a9990ab](https://github.com/hlxsites/merative2/commit/a9990ab28fe5c71a0d832972023d47b22faf5d34) :white_check_mark: * [a7d261b](https://github.com/hlxsites/merative2/commit/a7d261ba03f0ca93359c91b2a5d1101efcf784c8) :white_check_mark: * [3b59dc3](https://github.com/hlxsites/merative2/commit/3b59dc32a9b574ada357ff8c5f90d76e692bc402) :white_check_mark:
aem-code-sync[bot] commented 2 months ago
Page Scores Audits Google
/ PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/blog PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/clinical-development PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
amol-anand commented 2 months ago

Looks good to me. Thanks @fkakatie !

@helms-charity please take a look and merge when you have a moment.