Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-133167 CaaS CLS Issue #128

Merged
merged 3 commits into from
Jul 11, 2023
Merged

MWPW-133167 CaaS CLS Issue #128

merged 3 commits into from
Jul 11, 2023

Conversation

JasonHowellSlavin
Copy link
Contributor

@JasonHowellSlavin JasonHowellSlavin commented Jun 28, 2023

  • Adds two classes to styles.css as overrides for CaaS min-height in section metadata.
  • The small class represents roughly the height of the half cards, the medium the full sized cards.

Context

After doing some investigation, essentially loading the footer after CaaS cards load would require a change against the CaaS react components themselves, and may not be the best approach. The CaaS react component mounts to the DOM before the cards are finished fetching, and the CaaS component itself is controlled by the CaaS react components, meaning that though we could ask for an event to be added, there may occur situations in which the footer would not load. In addition to this, since the footer is loaded in loadArea() changes to prevent CLS on this page would require a change that could have effects on all milo consumers.

Because the issue was identified with resources/main on bacom, I am putting the overrides here instead of Milo, since we are not aware of who else may need them. Should it be determined styles like this are needed by the broader community, we can move them then.

Tested via pagespeed insights on a Milo branch first to ensure that CLS was 0, moved to bacom for this PR.

Resolves: MWPW-133167

Test URLs:

@aem-code-sync
Copy link

aem-code-sync bot commented Jun 28, 2023

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

  • Re-run PSI Checks

@aem-code-sync
Copy link

aem-code-sync bot commented Jun 28, 2023

Page Scores Audits Google
/drafts/slavin/CaaS-tests/main?martech=off Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 401) PSI

@meganthecoder
Copy link
Contributor

I thought we decided to publish our draft pages and use the hlx.live urls so that lighthouse could run?

@JasonHowellSlavin
Copy link
Contributor Author

I thought we decided to publish our draft pages and use the hlx.live urls so that lighthouse could run?

404s on prod? https://business.adobe.com/drafts/slavin/CaaS-tests/main?martech=off am I missing something?

@meganthecoder
Copy link
Contributor

Yeah it redirects to the prod url when you publish. I usually just go back to the preview url and replace "page" with "live"

https://caas-cls-issue--bacom--adobecom.hlx.live/drafts/slavin/CaaS-tests/main?martech=off

@JasonHowellSlavin
Copy link
Contributor Author

Yeah it redirects to the prod url when you publish. I usually just go back to the preview url and replace "page" with "live"

https://caas-cls-issue--bacom--adobecom.hlx.live/drafts/slavin/CaaS-tests/main?martech=off

you da best. Thanks.

https://pagespeed.web.dev/analysis/https-caas-cls-issue--bacom--adobecom-hlx-live-drafts-slavin-CaaS-tests-main/iaytgfyvjg?form_factor=mobile

@codecov-commenter
Copy link

codecov-commenter commented Jun 28, 2023

Codecov Report

Merging #128 (e622262) into main (c9aaeaa) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #128   +/-   ##
=======================================
  Coverage   96.36%   96.36%           
=======================================
  Files           6        6           
  Lines         468      468           
=======================================
  Hits          451      451           
  Misses         17       17           

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

Copy link
Contributor

@meganthecoder meganthecoder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought we'd be fixing this in milo, but I understand the decision to put it in bacom. We only have one use case so far, and it's possible that no other pages will need this. Given that, do we really want to include .caas-spacing-s if it's not being used?

@JasonHowellSlavin
Copy link
Contributor Author

I thought we'd be fixing this in milo, but I understand the decision to put it in bacom. We only have one use case so far, and it's possible that no other pages will need this. Given that, do we really want to include .caas-spacing-s if it's not being used?

I wrestled with both adding to milo and the additional class. It's not much process to add another class so we can remove the caas-spacing-s.

@aem-code-sync
Copy link

aem-code-sync bot commented Jun 29, 2023

Page Scores Audits Google
/drafts/slavin/CaaS-tests/main?martech=off PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@aem-code-sync
Copy link

aem-code-sync bot commented Jun 29, 2023

Page Scores Audits Google
/drafts/slavin/CaaS-tests/main?martech=off PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@Dli3 Dli3 added the verified it's been E2E tested by someone (that isn't the PR requestor) label Jul 11, 2023
@JasonHowellSlavin JasonHowellSlavin merged commit c59aee0 into main Jul 11, 2023
@JasonHowellSlavin JasonHowellSlavin deleted the caas-cls-issue branch July 11, 2023 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
verified it's been E2E tested by someone (that isn't the PR requestor)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants