Lighthouse – performance / render-blocking resources / minimize main-thread work

[ThiloKiefer]

Hi Kriesi Team,

already discussed in various threads but so far we are not clear about the optimization of the following items for our site:

Lighthouse – Section Performance – Opportunities
——————————————————————
Eliminate render-blocking resources
… jquery/jquery.min.js?ver=3.6.0
Question 1: Can this be emlinated? How?

Diagnostics
——————————————————————
Minimize main-thread work
…fonts/entypo-fontello.woff2 – 40 ms, 38.65 KiB
…jquery/jquery.min.js?ver=3.6.0- 70 ms, 29.94 KiB
Question 2: Can this be minimized? How?

Best regards and thank you for your great support.

Thilo Kiefer

[Ismael]

Hey ThiloKiefer,

Thank you for the inquiry.

We could manually add the defer attribute to the jQuery script, but doing so might cause unexpected results such as elements not rendering properly because the scripts that are supposed to make them work are loaded last. You could also use Autoptimize and Async Javascript plugin to asynchronously load scripts while parsing the HTML and execute them once the scripts are fully loaded, which is a better way to prevent render-blocking resources. For more info, please check the documentation.

// https://speedy.site/configure-async-javascript-plugin-settings/
// https://wpblogging.in/site-optimization/autoptimize-wordpress-plugin/

You have to disable the Enfold > Performance > File Compression settings if you chose to use the plugin.

Best regards,
Ismael

[ThiloKiefer]

Hi Ismael,
first of all, thanks a lot for your great support.
We use both plugins, Autoptimize and Async Javascript plugin.
We checked the documentations and get very useful hints there for the configuration of both plugins.
We followed the suggestions there, but the result is not satisfying.
The lighthouse performance indicator mobile is now 70 % (before 80%).

The problems now went to another area:
——————————————-
Minimize main-thread work 5.8 s
Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn moreTBT
Category
Time Spent
Other 2,289 ms
Style & Layout 1,667 ms
Script Evaluation 1,296 ms
Parse HTML & CSS 221 ms
Rendering 193 ms
Script Parsing & Compilation 101 ms
——————————————-

BR
Thilo

[thinkjarvis]

Following this thread to see if support reveals anything or you come up with anything useful for minimizing the thread.

@thilo
Do you have script merging turned on? This will reduce the length of the thread because there are then less requests to the server?
Do you have any plugins installed to add extra front end features to the site?
what kind of hosting do you use:
Is it NGINX/dedicated wordpress or just a standard Apache server?

Regarding the length of the main threadwork question – Have you got any other warnings or recommendations in web vitals?
I have just short of 50 Enfold Installs running – All of which will pass web vitals with a score of 90+ with some updates I am rolling out at the moment.

Recent example: https://www.harrisongardenservices.co.uk/

Just remember that web vitals uses realworld data to determine a pass/fail score. Generally speaking – a site with a score as low as 50/100 can still pass – Depending on what kind of devices the site visitors use.
So at between 70 – 80 out of 100 you may already be achieving a pass mark for a majority of users.
I tend to find the LCP score for Enfold sites is about 0.1 – 0.5 seconds above a green score but the real world data shows a pass.

[ThiloKiefer]

@Ismael
So results are now better.
Both points are solved.

Eliminate render-blocking resources
————————————————
… jquery/jquery.min.js?ver=3.6.0
Question 1: Can this be emlinated? How?

Minimize main-thread work
————————————————
…fonts/entypo-fontello.woff2 – 40 ms, 38.65 KiB
…jquery/jquery.min.js?ver=3.6.0- 70 ms, 29.94 KiB
Question 2: Can this be minimized? How?

Both messages are gone.

But Core Web Vitals-Test still failed
Optimization required => Problem with LCP: longer than 2.5 s (mobile device)

But for this probably i need another thread.

Thank you!

BR Thilo

@thinkjarvis
Thanks for your input …

Do you have script merging turned on? This will reduce the length of the thread because there are then less requests to the server?
=> script merging in theme options was turned off (i think this was suggested somethere)

Do you have any plugins installed to add extra front end features to the site?
=> no

what kind of hosting do you use:
Is it NGINX/dedicated wordpress or just a standard Apache server?
=> Apache

PageSpeed Mobile
————————————–
Site: https://www.harrisongardenservices.co.uk/ => 93
First Contentful Paint: 1,5 s
Speed Index: 2,4
Largest Contentful Paint: 2,8 s
Time to Interactive: 2,9 s
Total Blocking Time: 140 ms
Cumulative Layout Shift: 0,022

Site: https://www.munich-enterprise.com/ => 91
First Contentful Paint: 1 s
Speed Index: 1,5
Largest Contentful Paint: 2,1 s
Time to Interactive: 4,4 s <=====
Total Blocking Time: 310 ms <=====
Cumulative Layout Shift: 0

Don’t know what to do to improve LCP … :-/

BR
Thilo

[thinkjarvis]

Hi Thilo,
How long ago did you make your last round of changes.
Web vitals scores update every 28 days. So you probably need to leave things in their most optimised state for a while and see if you get a pass.

I just ran your site in chrome dev tools which is more consistent and saw a score of 97/100 for your site.

Do you use the built in Google fonts?
You could always download them and load them locally. You can then add pre-load rather than relying on Googles Font servers.
You could also try reducing the size of your background image it is over 4000px wide!
You could also try making your first element smaller.
I have a simillar issue on https://www.hemppureoils.co.uk. The design calls for a tall element above the fold. Meaning the LCP score is a little high.
This site has a slightly different setup which has lowered some of the other metrics in the process. Its a balancing act!

Difficult for me to comment further without knowing the state of the site without your optimisation plugins enabled.
Autoptimize and WP-Super Cache Disabled.

[Author]

Posts