The largest contentful paint is anticipating an unidentified event

My website is encountering issues with Google Pagespeed and I'm unsure of the cause. The primary bottleneck appears to be the LCP time, which Google reports as taking between 7 and 11 seconds during each test.

Upon analyzing the waterfall chart, it is evident that everything above the fold loads quickly and remains static thereafter. Even when simulating a slower network speed on Chrome's performance tab, the content above the fold loads within 2 seconds. When examining the "View original trace" in Chrome with Lightspeed, there are no notable changes to the website after the initial load.

I have experimented by removing background images, web fonts, scripts, and all content below the fold, but these adjustments have had minimal impact on improving the LCP time.

Could someone provide insight into what Pagespeed is waiting for before registering the LCP as loaded?

https://i.sstatic.net/x0KY5.jpg

UPDATE

I have stripped down my website to only include essential elements with CSS retained. Visit

Despite rendering everything in the first frame of the waterfall, I continue to receive a poor LCP score (2.9s) on Lighthouse tests.

https://i.sstatic.net/29WJb.png

javascripthtmlcsspagespeed-insights

Answer №1

What is the reason behind pagespeed waiting before LCP is loaded?

Running with "Fast 3G" and "4x CPU Slowdown" shows a similar time to Lighthouse's prediction. The hero image seems to be causing the LCP at 7 seconds.

https://i.sstatic.net/B03wm.png

Why are there discrepancies in results?

If you have "Disable Cache" unchecked on the "Network" tab, it might be running from a "warm cache," leading to different performance traces.

https://i.sstatic.net/YWzv7.png

Keep in mind that Lighthouse always behaves as if it's the first visit to a page unless specified otherwise, so cached images and files are not taken into account.

https://i.sstatic.net/HcFME.png

Caching the image resulted in a 2-second LCP, matching your experience.

How can I align the performance profile with Lighthouse's perspective?

You may find this guide on running Lighthouse in the browser and aligning it with the performance profile useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment of the images is off, with varying heights that do not match

My current issue involves images appearing in varying heights and the text underneath not aligning properly. Here is the markup: I have six row containers to showcase 6 different images. <div class="row"> <div class="posts"> <im ...

cssimagealignmentheightoverflow

What is the process for uploading an image using fetch?

After just starting to learn react, I decided to create a gallery App. However, I am facing an issue when trying to post pictures to the API. Whenever I click on the ADD button, nothing happens except for an error 500 being logged in the console. Below is ...

javascriptreactjspostfetch-api

Retrieving parameters from within iframe (child)

I currently have an embedded Iframe within a website, with both residing on different domains that I own. My goal is to pass a query parameter to the src attribute of the iframe. <iframe id="iframe" title="Survey" allowtr ...

javascriptiframenext.js

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

javascripthtmlcssvue.jsnuxt.js

Shopping Cart implemented in PHP

Looking for help in PHP to create a shopping cart? If you're experiencing products disappearing once the user leaves the cart area, here's what you can do: <?php foreach($almofadas as $item):?> <form action="cart.php&quo ...

phphtmlmysqlmariadb

The local authentication feature in NodeJS Passport is experiencing issues and not functioning properly

I have integrated passportjs local for authentication. However, I am facing an issue where it always redirects to the failureRedirect without displaying any error messages. The redirect also includes the original username and password, resulting in a dupli ...

javascriptnode.jsmongodbpassport.jspassport-local

Bringing in a selection of functions as an object using ES6 imports

functions.js export const setA = () => {...} export const setB = () => {...} export const setC = () => {...} component.js import {setA, setB, setC} from 'functions' export class componentOne extends React.Component { constructor(p ...

javascriptnode.jsreactjsecmascript-6redux

issue with retrieving data from PHP script via ajax

My attempts to use AJAX to call a PHP script have been unsuccessful. I added an echo alert statement in my deleteitem.php script to ensure it was being called, but no matter what I tried, it never executed. Both the PHP script and the JS script calling it ...

phpjavascriptajax

Establishing the Default Volume within a script

I'm looking to adjust the default volume of music on my website. Currently, it plays too loudly on load, but I have a slider bar that allows users to change the volume. How can I set the default volume to be 25% of the slider? CHECK OUT MY WEBSITE! ...

javascripthtml

Glowing semi-opaque about spotify?

Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work ...

csshtml

The fuse-sidebar elements are not being properly highlighted by Introjs

I have recently developed an angular project that utilizes the fuse-sidebar component. Additionally, I am incorporating introjs into the project. While introjs is functioning properly, it does not highlight elements contained within the fuse-sidebar. The ...

javascriptcssangularintro.js

What is the most effective way to transfer information between two pages in React JS?

I am a newcomer to react and currently working on a project that involves two pages/components. I collect user details on one page and need to display that data on another page. However, I am facing difficulties in achieving this. Can someone please provid ...

javascriptreactjsreact-props

Linking the location of the pop-up to the currently selected text box

I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...

javascriptjquerycssposition

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

htmlcsscss-float

Is there a way to display a message box when the mouse cursor hovers over a text box?

Currently, I have set up 3 text boxes in my project. The functionality I am trying to achieve is when the user clicks on the second text box, the value of the first text box should be displayed in a message box (providing that the validation for the first ...

javascriptasp.net

For my Bootstrap website, it's a constant struggle to balance between having a responsive menu item and ensuring its correct visual appearance

I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...

htmlcsstwitter-bootstrap

Utilizing HTML5 and JQuery for Drag and Drop functionality: Moving an image to populate a linked webpage within an iframe upon dropping

Looking to add a drag and drop feature to my project. The left pane will contain tiles that act as images, while the right pane will display iframes. My goal is to drag a tile from the left pane and drop it onto an iframe on the right pane. The twist is th ...

jqueryhtmldrag-and-drop

Inspect the render function in the 'RestApi' class

I encountered the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined ...

javascriptreact-nativeexpo

What could be the reason why the form is appearing correctly on one landing page but not the other?

I have embedded a Marketo form on two different landing pages on our website. I am using the same JavaScript provided by Marketo for both pages (shown in the code below). However, on page 2, the form field label and cell are displaying incorrectly, appeari ...

htmlcssformsmarketo

Custom Typescript type that runs concurrently with the base type is disregarded

Assumption: When creating a custom type that mirrors an existing type, the expectation is for variables assigned to that type to maintain it and not default back to the base type. In the function f provided below, the expected return type should be Dog ins ...

javascriptnode.jstypescriptvisual-studio-codetypes