Low performace score for page with full screen scroll based lottie

Hey everyone, we built a custom page with a full-screen scroll-based Lottie animation as the background. It is working as intended but we are getting a very low performance scores ranging from 20-35 using this tool - https://pagespeed.web.dev/

The lottie files are around 8 MB combined and the total file size for the page comes in at 14MB. Another one of the pages on the same site, the host page, has 31 MB total for the page but comes in at a performance score of 92 on desktop (the page in question came in at 33 on desktop).

I thought it was a file size thing but that does not seem to be the case. Does anyone have any ideas as to why the page performance score with the lotties is so low? I tried comparing my pages using different “grading” tools and I got similar results.

As a side note, I also have a little bit of horizontal overscroll that I cannot figure out how to get rid of if anyone has an idea.

Site URL - https://www.urnowhere.com/

Hosting Site URL - NOWHERE | Host in the Metaverse in under a minute

Read-only - Webflow - NWR 2.0

Hi @Sonny_Cirasuolo,

understanding the rating of these measuring tools also requires understanding what they measure and how they interpret the results. In both cases, the tests mention the big network load on the sites, but the host subpage loads the visible content quicker/more efficiently than the main page. Therefore a higher rating. It also seems to dislike a background video being loaded on the main page. However, I recommend reading into this explanation about the LCP, FCP, and further abbreviations to fully understand what their rating means.

The page speed insights for example don’t evaluate the total loading time, but a series of factors to get their result.

On the overflow issue, I can recommend this article, however, I couldn’t find the specific element in your case, it might be either hidden or tied to the lottie animations. The example code of the article lists the following elements on your page as ‘too big’:

  • Div Block 61
  • Lottie Animation 3
  • Lottie Animation 4
  • Gradient fade top copy
  • gradient background

A quick and dirty solution would be to set the overflow on your parent section to hidden like so:

Cheers
Leon

1 Like