MWPW-158071: Optimize LCP loading times #2914
Conversation
mokimo
requested review from
narcis-radu,
overmyheadandbody and
robert-bogos
| @@ -731,6 +731,8 @@ function decorateDefaults(el) { | |||
| } | |||
|
|
|||
| function decorateHeader() { | |||
| const breadcrumbs = document.querySelector('.breadcrumbs'); | |||
There was a problem hiding this comment.
I noticed that if a breadcrumbs is authored as first block, we immediately load it. The global-navigation should take care of this and on L752 we move the breadcrumbs into the header if (breadcrumbs) header.append(breadcrumbs);
There was a problem hiding this comment.
There was a problem hiding this comment.
@mokimo where are you seeing that we immediately load this? For me it looks like it was already working properly before any change here. 😅
There was a problem hiding this comment.
Here's a test experience @vhargrave https://main--milo--adobecom.aem.page/drafts/osahin/education
When you turn the header off, it treats the breadcrumbs as block, which 404s. PS: I noticed my comment might have been a bit misleading, the issue is that we try to load it as a block, but if there is no header - there is no breadcrumbs, so we should remove it to safeguard authoring mistakes.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## stage #2914 +/- ##
========================================
Coverage ? 96.27%
========================================
Files ? 238
Lines ? 54527
Branches ? 0
========================================
Hits ? 52497
Misses ? 2030
Partials ? 0 ☔ View full report in Codecov by Sentry. |
|
nala tests also failing on stage: #2910 |
|
This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR. |
|
|
@JasonHowellSlavin I've added a unit test covering the new behavior, other than that the old ones should continue working as is |
There was a problem hiding this comment.
Ready to stage , Regression PASS , testing details https://jira.corp.adobe.com/browse/MWPW-158913
Description
It's relatively hard to track performance beforehand, however we observed a +500MS (13%) gain on CC pages speeding up loading placeholders. We've also seen good success with preloading
Decorate.js
This PR initially introduced the idea of preloading
decorate.jsfor a performance gain, but introduced too much flexibility. The idea of preloadingdecorate.jsfor specifically the two common (hero-)marquees blocks is valuable and worth the added 3 lines of code, as neither is likely to change anytime soon.Impressions
This should provide good benefits on a wide arrange of blocks, consumers and pages by optimizing the load order and chains, however we will want to observe the CRUM/RUM/CRUX data after merging the changes in this PR.
Given the success we seen with preloading & parallelizing work in general, this harmonizes the timeline and ensures the browser loads everything as fast as it can, without any impact on TBT/CLS.
Before
After
Resolves: MWPW-158071
Test URLs:
Bacom
CC