Can we lazy load below the fold? #6669
Draft
+446
−324
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
|
Size Change: +1.51 kB (+0.07%) Total Size: 2.23 MB
ℹ️ View Unchanged
|
| import { retryPaymentStatus } from './retryPaymentStatus'; | ||
| import { setThankYouOrder, unsetThankYouOrder } from './thankYouComponent'; | ||
|
|
||
| const PaymentSection = lazy(() => import('./paymentSection')); |
There was a problem hiding this comment.
Maybe a comment here on why lazy loading used?
There was a problem hiding this comment.
Yep, if we decided to go with it
paul-daniel-dempsey
approved these changes
Jan 3, 2025
|
Interesting that the reported results vary so much between runs on the identical build. Have you looked into alternative ways of measuring page speed performance such as Chrome DevTools' Lighthouse panel, Lighthouse CLI or WebPageTest to see if these offer more consistent results over multiple runs? If there's variability could we run several tests for both the baseline and the build with updates, then calculate the average and standard deviation to account for variability? |
|
Also interested to know if an external factor impacts page speed metrics, eg. I'm thinking the Sourcepoint CMP. Could we we disable the CMP when profiling the page to see whether it produces more consistent results? |
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 are you doing in this PR?
Putting one of the lower down sections in the checkout (the payment method selector) as a lazy loading import, to try improve the performance of the page
Trello Card
How to test
Uploaded to CODE and put the checkout page through https://pagespeed.web.dev/analysis
Have we considered potential risks?
People seeing "Loading..." (or similar)
Screenshots
Before
After
Results
Improved overall performance - lower total blocking time and better speed index. First and largest contentful paints remained the same, which makes sense because most of the loading of the page is unchanged
I repeated the test again, and the results got worse. Running page speed insights just once may not be a good enough indicator - however in general they look somewhat better
EDIT:
I think we can't put any stock into individual page speed score results eg I got these results running it back to back