LCP takes much longer than all other metrics

[Icecold777]

Hello,

sitespeed.io version 17.2.0 (issue is reproduced on older versions too).
During scripted e2e scenario I've faced the issue with LCP takes much longer than all other metrics
Please see the screens below.
I don't have any idea of the reason. Chrome trace finishes at 11 sec.

[soulgalore]

Hi @Icecold777 what did you see in the video/filmstrip? If I remember correctly there will be a screenshot in the filmstrip when the LCP happens. You can also check the metrics tab and go to the Largest Contentful Paint:

Can that help you?

[Icecold777]

Thanks, your answer is really helpful. It's MasterCard logo svg.

But this element is not observed at measured page and there is no call for it when I check it manually in a browser.
More to say this element is from the previous page and its loading is out of scope of measure.start .. measure.stop.
So I don't understand why this element is considered for LCP

[soulgalore]

LCP uses Chrome Largest Contentful API to get that https://wicg.github.io/largest-contentful-paint/. Maybe the previous page hasn't finished loading yet before the next navigation starts and it somehow gets confused? I would check the wait before the next page load and see if that seems to work correct.

[Icecold777]

a bit of context
script fills in payment form where svg logo is called. Then there is 5 sec pause with wait command. After that measure.start is triggered and submit button pushed. As a result LCP is about 1 minute but element was loaded much earlier.

[soulgalore]

But its the same page load right, so the form is within the same navigation? Do you see the svg in the waterfall?

[Icecold777]

I hope this piece of code should explain what I'm doing

//ORDER PAYMENT PAGE
		**await commands.measure.start('09_PaymentPage');**
navigate to /payment page
		await commands.click.bySelector(selectorOrderPaymentPage); 
		await waitFor(selectorOrderPaymentPageWaitsFor, 15000);
		**await commands.measure.stop();**


//SUBMIT ORDER PAGE

fill in form, each line is an iframe

		await driver.switchTo().frame(0);

		//*cardNumber
		await driver.findElement(webdriver.By.id('encryptedCardNumber')).sendKeys(card);
		await driver.switchTo().defaultContent();
		await commands.wait.byTime(1000);

_SVG is loaded after card number input_

			
		//*card encryptedExpiryDate
		await driver.switchTo().frame(1);
		await driver.findElement(webdriver.By.id('encryptedExpiryDate')).sendKeys(date);
		await driver.switchTo().defaultContent();
		await commands.wait.byTime(1000);
		
		//*card encryptedSecurityCode
		await driver.switchTo().frame(2);
		await driver.findElement(webdriver.By.id('encryptedSecurityCode')).sendKeys(code);
		await driver.switchTo().defaultContent();
		await commands.wait.byTime(1000);
		
		//*card holder name
		await driver.findElement(webdriver.By.css('input.adyen-checkout__card__holderName__input')).sendKeys('test');
		await commands.wait.byTime(5000);


        **await commands.measure.start('10_OrderConfirmationPage');**

submit form and navigate to /confirmation page where LCP is measured

	await commands.click.bySelector(selectorSubmitOrder);
	await waitFor(selectorSubmitOrderWaitsFor, 15000);
	**return commands.measure.stop();**

[soulgalore]

Hi @Icecold777 if you are measuring and click on elements and load a new page I think its safer to use the clickAndWait command or add https://www.sitespeed.io/documentation/sitespeed.io/scripting/#waitbypagetocomplete so that the page finished loading before. you start to do the next thing?

[Icecold777]

I'll try to wait but as I remember I began to wait for an element because PageComplete event is not fired and sitespeed crashed with OOM error.

[soulgalore]

Ok, but then you are on the same page right, there's no navigation involved (just popups/frames) so the LCP is tide to the first navigation that happens.

[Icecold777]

Run has executed correctly but commands.click.bySelectorAndWait doesn't help.

That's the point, there is navigation as I wrote above I measure LCP for /confirmation page (page URL changes). But actually it's measured from the element located at /payment (page where I submit the form and start navigating to /confirmation).

[Icecold777]

Looks like app issue because local API call returns irrelevant metrics
new PerformanceObserver(entryList => {console.log(entryList.getEntries());}).observe({ type: "largest-contentful-paint", buffered: true })

[Icecold777]

API is quite unsrable and supports 'hard navigations' only. w3c/largest-contentful-paint#6