CODEWITHSUNDEEP
performancepagespeed
UmidK
UmidK

Reputation: 1

Slow pagespeed render delay

Hi all and thank you for being a part of this community.

I am working on this website orangecountymovers.com and the render delay and LCP is pretty slow. I've tried preloading elements in hero slider, signed up for siteground premium CDN, cleaned up CSS, and while it improved a bit, it's still pretty bad. Can someone chime in? Thank you!

Added CDN premium on Siteground Added preload to hero banner elements Removed unused CSS

Upvotes: 0

Views: 8230

Answers (1)

Brendan Kenny
Brendan Kenny

Reputation: 1573

The proximate cause for the render delay is there's a lot of JavaScript loading and running between when the LCP could be first painted and when it actually is painted.

DevTools performance panel view of the page load showing a lot of JS activity between FCP and LCP

The LCP is loaded via preload and is found statically in the HTML with an inline style, but that static layout isn't revealed until the scripts are loaded, run their initialization code, and the "preloader" spinner div is removed.

I see a few issues going on here:

  • PSI is loading your page using http/1.1, so it's taking a hit when loading all those images and JavaScript files in parallel. You might consider running Lighthouse locally (like in DevTools) for a slightly more realistic http/2 load
  • The page is loading those images and JavaScript files, and at least on my machine the JavaScript files are queued to be loaded after all the images. That makes sense because the script tags are all at the bottom of the HTML, which would be good if they weren't necessary for the first paint, but they are and all those images loaded first aren't necessary. I count 40 images starting loading before those scripts start (icons, images farther down the page, etc), which is a ton!
  • The scripts are then running some initialization code before revealing the contents of the page (which finally reaches LCP).

More tweaks to CSS, using a CDN, etc aren't going to move the needle on much of this. I'd advise:

  • bundle your CSS and JS

  • if the CSS and JS are really necessary for first render, make sure they load before all those images

  • However, at first glance at least some of that JS isn't necessary for initial interactions and could be deferred both in loading and initialization (e.g. fancy image slide-in animations). Consider splitting your bundles if possible, and deferring initialization of any code not needed for LCP to run even a frame later.

    For example, if I disable JS and delete the preloader div, the layout all looks good. The JS isn't necessary to reach LCP at all and that render delay could be 0, the problem is that all the UI also on the page isn't interactive, which isn't a great user experience.

    Consider if bundle split points could be used to only initialize what's completely necessary, or, alternatively, hide only the interactive elements and add them back to the page layout as they become initialized. That way the general frame of the page (and the LCP) can be painted immediately as the interactive elements load in. Or find some nice middle ground between these approaches.

  • Finally, and this isn't going to make a huge difference, but since the preload for your LCP image is working so well right now, make sure to put a fetchpriority="high" on it to make sure it keeps working well :)

Upvotes: 2

Related Questions