why is my most recent file a little bigger than my page load time?

Speed Index

Speed Index is quite complicated to explain here, so I will link to this article and the original speed index that Lighthouse Speed Index is based on

But in essence it compares a load of images of the site along a timeline as it loads. When it finds it has reached a certain “completeness” compared to the final page design it uses that time for the speed index.

Now when you apply your full page white cover to hide all the loading going on that creates a paint event that is the whole page and this slightly skews your Speed Index.

The figures also get skewed by long animations. You say 200ms but the performance trace thinks it is more like 400ms which matches the following item:-

#ambition_body.fade_in_out {
    transition-duration: 400ms;
}

So your speed index may be slightly out but if anything it is lower than it is in reality as your white cover stays way past 3.4 seconds when I apply network throttling and CPU throttling to match Lighthouse (the engine behind Page Speed Insights).

note: This is why you see 9 seconds vs your observed 2 seconds time, Lighthouse is taking into account throttling on the network and CPU as per the linked article information in the previous paragraph.

Largest Contentful Paint

This does happen much later, it appears there is a slight shift in the page just as the fadeout occurs. As you can see on this performance trace it happens right before the final image in the trace (the LCP line is the one to look at).

trace showing when LCP occurs

This appears to be from something strange happening, perhaps with your menu.

I turned on “paint flashing” under the “rendering” tab in Developer tools and just as the page is fading into view there is a strange flash towards the top left and then the whole page seems to repaint.

I don’t have time to find the root cause for you but my gut says see what the menu is doing on page load and see if you are hiding it with JS.

If you are hiding it with JS and you have 0.2 second animations on every element on the site (which is not a good idea) with html * {transition: all 0.2s ease;} then this may cause an unnecessary repaint and put your LCP late.

Actual problem.

The problem is we can argue slightly over the numbers but your site is indeed not particularly fast.

It weights 1.4 megabytes, which is high if you consider a mobile 3G connection may only be about 2 megabits per second (so about 250 kilobytes per second).

Also you have nearly a megabyte of uncompressed JavaScript to compile and execute on the site (about 250kb zipped).

That is a lot of heavy lifting on a mobile CPU.

Try and remove some of the JavaScript bloat, it is difficult when using something like elementor (as your site seems to do) however.

Also your speed will vastly improve if you fix your critical rendering path and and defer your JavaScript that isn’t essential for “above the fold” content to be rendered.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top