'PageSpeed Insights reports over 100s Main Thread Work on Mobile?

I have this website, that I think loads really fast and is nicely optimized, but whenever I run it through PageSpeed, it receives a horrible score on Mobile only?

enter image description here

With "Minimize main thread work" being the main one, spending allegedly 124 seconds on Rendering?

enter image description here

I've tried debugging it in DevTools, with the Performance tab, but even with CPU slowdown and slow 3G, I can't get it to show any problems. The long tasks in the screenshot are all related to Extensions I have installed in Chrome.

enter image description here

The JavaScript is run through Babel with the "@babel/preset-env" preset and then minified afterwards.

javascriptperformancepagespeedgoogle-pagespeedpagespeed-insights


Solution 1:[1]

For anyone wondering, this is what threw PageSpeed off:

.hero-image.animated {
    animation: animatedBackground var(--hero-animated-duration) linear;
    background-position: bottom right;
}

Removing the animation, fixed the issue with mobile pages scoring really low.

Solution 2:[2]

From Colombia you have a mobile version performance of 82 in PageSpeed

First Contentful Paint 1,7 s Time to Interactive 3,1 s Speed Index 3,3 s Total Blocking Time 30 ms Renderizado del mayor elemento con contenido 4,5 s Cumulative Layout Shift 0,017

the result is very good.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steffen Andreas Kloster
Solution 2 Yeison Velez

Related Questions