[Resolved] First Contenful and Meaningful paint and Speed Index – Charge site library

[Anonymous]

Hi there,

In contrast to other site libraries such as Sider, there appears to be a significant difference when comparing results such as performance.

For example, when the a site that is configured with Charge is displayed for the first time it has a performance metric of 21. When it is requested the second time, it has an exponential improvement to 100.

In contrast, a site that is deployed with Sider has a starting performance measurement of 53 versus 21.

These were tested using Google Chrome’s Lighthouse audit.

Is there any particular reason why these differ and is there a way to improve these?

[Tom]

Hi there,

The biggest difference between those two sites is the number of images being loaded.

Charge has more images, so it will take longer to load (until those images are cached).

Other than content, most sites in the library are very similar (a combination of Customizer options and plugins).

[Anonymous]

Hi Tom,

The test was the “About” page for Charge which has no images.

[Tom]

Then there is very little difference between the two sites. Charge does have two additional javascript files (off-canvas panel and sticky navigation), but that’s it.

It could just be the testing mechanism you used? You should be able to compare the file size of the pages/other metrics by using a tool like GTMetrix or Pingdom.

[Anonymous]

Thanks Tom. Interestingly, I would expect similar results with Google Chromes Lighthouse audit. I’ll give GTMetrix a whirl.

[Tom]

Lighthouse is great as well. There are a lot of factors that can go into the scores. Different plugins, HTTP requests (from plugins and options), server performance at the moment of the test etc..

In the end, they’re both the same theme with the same underlying code.

[Anonymous]

Thanks Tom.

If they are the same theme, the underlying factors are consistent. For example, they are on the same server, with a replica of the configurations, no plugins, minimal images and the like. It continues to return differing results. They are being accessed from the one device and location for testing purposes.

[Tom]

I’m not really sure what the answer is, unfortunately. The two sites are both using GP with options set in the Customizer. Charge has a couple more javascript files, but that’s it. They load the same stylesheets, same PHP files etc..

The only difference is the CSS in Customize > Additional CSS and the options set in the Customizer.

[Author]

Posts