Skip Navigation

[Gelöst] 48 Render blocking scripts.

This support ticket is created vor 4 Jahre, 10 Monate. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+01:00)

This topic contains 56 Antworten, has 3 Stimmen.

Last updated by Akhil vor 4 Jahre, 9 Monate.

Assisted by: Nigel.

Author
Artikel
#1267451

Thank you, Nigel, for the guide

Now that we are able to deque them, we now need to enqueue back conditionally,
perhaps regex would be an idea?

#1267525

Hi Nigel.

Should I close this and open a new thread for further discussion on this topic?

I found a way to overcome all this issue, but it's going to pain to manage. Please advice your views too

1. dequeue the script.
2. use plugins like custom CSS and js pro and create new js codes, load external with wp - conditional tag maintenance
3. once there is plugin update, compare the script and copy the new script

few challenges using this approach

1. maintenance
2. conditional tag, there is no limited method to some of the pages, example: body tag. Is there one?
https://codex.wordpress.org/Conditional_Tags

#1267539

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+01:00)

I'm going through my queue and then I'm going to continue looking at this later this morning, so let me get back to you later with some suggestions.

#1267831

Ok. thanks

#1267933

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+01:00)

There are two parts to this:

1. When to disable Toolset assets
2. Which assets to disable

We could take a whitelist approach, i.e. dequeue scripts on all pages except specified pages, or a blacklist approach, i.e. only dequeue scripts on specific pages.

The whitelist approach makes sense where Toolset is used in only a few parts of a site, while the blacklist approach makes sense where Toolset is used extensively but where pages such as landing pages need to be optimised for SEO.

1. When to disable Toolset assets

When visiting the front end of a site we are either viewing pages, posts (of some type), or archives of posts.

We can use conditional tags to test which: https://developer.wordpress.org/themes/references/list-of-conditional-tags/

The key tags are

- is_page() : test if a static page generally, a specific page, or one of an array of pages
- is_single() : test if a single post (of whatever type) generally, a specific post, or one of an array of posts
- is_singular() : test if a single post of any type, or of one of the specified types
- is_archive() : tests if any kind of archive being displayed except blog post archive
- is_home() : tests for blog post archive
- is_post_type_archive() : tests if an archive of some CPT
- is_tax(), is_category(), is_tag() : tests for if on a taxonomy archive generally, or with specified term(s)

2. Which assets to dequeue

I've taken a fairly simply approach here, looking at what assets are enqueued on pages where there is no Toolset content and so which are unnecessary.

There is not much of an alternative to examining the registered scripts and checking their dependencies to work out which scripts to dequeue. The reason is that some core scripts which are loaded as dependencies of Toolset, e.g. underscore.min.js, may be needed by scripts loaded by other plugins. Removing the Toolset scripts that require them will remove such scripts—unless something else is calling them.

With Types, Views, Access, Forms, Maps and Layouts active all of the unnecessary scripts on pages with no Toolset content can be removed by dequeueing the following:

wpv-pagination-embedded.js
main.js
ddl-tabs-cell-frontend.js
date.js
bootstrap.min.js

(Note there is an active issue in WP core about the media element scripts being added to the head instead of the footer: https://core.trac.wordpress.org/ticket/44484.)

So a whitelisting example might look like this:

function whitelist_toolset_scripts( ){

	// Remove Toolset scripts everywhere except specified pages and custom archive for listing post type
	if ( !is_page( array('page-with-a-view', 'another-view-page', 'custom-login-page', 'submit-posts-form' ) ) && !is_post_type_archive( 'listing' ) ) {
		wp_dequeue_script( 'views-pagination-script' );
		wp_dequeue_script( 'wptoolset-field-date' );
		wp_dequeue_script( 'toolset_bootstrap' );
		wp_dequeue_script( 'ddl-tabs-scripts' );
	}
}
add_action( 'wp_print_scripts', 'whitelist_toolset_scripts', 9999 );

In this example we want to get rid of Toolset scripts everywhere, except for certain pages where we know Toolset is used, including a custom archive we made for the listing post type.

Similarly, here's what a blacklist example might look like:

function blacklist_toolset_scripts( ){

	// Only remove Toolset scripts on specific pages and all archives including blog archive
	if ( is_page( array('sample-page', 'landing-page-1', 'landing-page-2', 'contact-us', 'home' ) ) || is_archive() || is_home() ) {
		wp_dequeue_script( 'views-pagination-script' );
		wp_dequeue_script( 'wptoolset-field-date' );
		wp_dequeue_script( 'toolset_bootstrap' );
		wp_dequeue_script( 'ddl-tabs-scripts' );
	}
}
add_action( 'wp_print_scripts', 'blacklist_toolset_scripts', 9999 );

Here the scripts are only dequeued on particular targeted pages and, in this example, all archives.

Every site is different and so there is no one-size-fits-all solution, you'll need to think about which approach makes most sense for your site, and be sure to test so that if you are removing Toolset assets you don't accidentally break the functionality of some page where you have mistakenly disabled the Toolset scripts.

You could try to make the process of identifying where to exclude scripts simpler by, for example, adding a checkbox custom field to all pages and post types for whether to exclude assets for the page/post...

#1268419

Thank You for the detail explanation.
i am actually doing the same thing too. its along process but worth it .
just to add there is views-map-script , wp-embed to control too,

2. i like the 2nd approach too. using custom fields to select the scripts to load selectively.

#1268691

Hi Nigel,

i am having trouble dequeue-ing [7] => jquery-ui-datepicker ,
it seems its loaded by views-pagination-script
which is needed by the toolset archive page, but i don't have any date fields. how do i remove them any idea ?

dependent scripts are going to be an issue in our work here.

#1268707

Hi Nigel,

i am getting all these scripts for Post type archive page:

[4] => ddl-tabs-scripts - dequed
[5] => ddl-layouts-frontend - dequed
[6] => jquery-ui-core
[7] => jquery-ui-datepicker -
[8] => mediaelement-core
[9] => mediaelement-migrate
[10] => mediaelement
[11] => wp-mediaelement
[12] => underscore
[13] => wp-util
[14] => backbone
[15] => wp-playlist
[16] => views-pagination-script - needed
[17] => google-maps - maps
[18] => views-map-script - maps
[21] => wp-embed
[23] => views-addon-maps-script - maps

will appreciate if you could advice what those scripts are for so that I can decide to enqueue them.

also perhaps would like to merge all maps scripts. dequeue them all and create a custom toolset-maps.js and enqueue them conditionally. could save 3 requests. 🙂

#1269123

[4] => ddl-tabs-scripts - /plugins/layouts/resources/js/ddl-tabs-cell-frontend.js >> dequed
[5] => ddl-layouts-frontend - /plugins/layouts/resources/js/ddl-layouts-frontend.js - >> dequed
[6] => jquery-ui-core
[7] => jquery-ui-datepicker -
[8] => mediaelement-core
[9] => mediaelement-migrate
[10] => mediaelement -/wp-includes/js/mediaelement/wp-mediaelement.min.js
[11] => wp-mediaelement -/wp-includes/js/mediaelement/wp-mediaelement.min.js
[12] => underscore - /wp-includes/js/shortcode.min.js
[13] => wp-util - /wp-includes/js/wp-util.min.js
[14] => backbone -/wp-includes/js/backbone.min.js
[15] => wp-playlist - /wp-includes/js/mediaelement/wp-playlist.min.js
[16] => views-pagination-script - wp-views/embedded/res/js/wpv-pagination-embedded.js
[17] => google-maps - - /maps.googleapis.com/maps/api/js?librar
[18] => views-map-script - /wp-views/embedded/res/js/jquery.wpvmap.js
[21] => wp-embed - /wp-includes/js/wp-embed.min.js
[23] => views-addon-maps-script - wpv_addon_maps.js

#1269203

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+01:00)

I'm not seeing the maps scripts on pages without maps, I wonder if you have the up-to-date plugin versions?

Anyway, the treatment would be the same, namely to dequeue the maps scripts either whitelisting or blacklisting as described above.

I can't tell you what each of the individual scripts does, it's not documented anywhere, I don't have such information to share.

But where scripts are declared with dependencies then you should not remove the dependencies as that may generate errors: the scripts are declared as dependencies because they are used by the scripts that require them (even if it is not obvious why).

So if you need the pagination script on a page, it will call its dependencies, namely jquery, jquery-ui-datepicker, wp-mediaelement, wp-playlist, and underscore.

I realise that is frustrating when you are trying to reduce the number of requests on the page, but right now I don't have a better solution. We have an internal ticket about overhauling this, and you have submitted a request to the product manager that it be prioritised.

In terms of bundling scripts, you can use a plugin such as autoptimize to concatenate and minify scripts, but you should be aware that in the settings you must exclude several scripts, as described here: https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/

#1269659

Hi.

1. maps are loading fine, i want to merge the toolset files; Google API files no control over it.

2. the information in the link you provided is very wrong. There are more scripts to exclude, not sure who came out with those documents.

I am in the midst of setting this; I would appreciate your help on this as I have no idea to verify which script needed to be excluded just by looking at the error console.

the login is the same as what you have in the record.

#1270315

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+01:00)

That document was only published a week or so ago after a colleague did extensive testing to determine which scripts could not be included in minification/concatenation done by plugins such as autoptimize.

Which other scripts did you find needed to be excluded to avoid breaking anything? I'll ask my colleague to re-test and update.

#1270695

Hi Nigel. ill provide the list once i am done with my optimization.

i would like to know how to dequeue : toolset-maps-fixes-css ?

the handle is "toolset-maps-fixes-css" or "toolset-maps-fixes" both doesn't respect the dequeue and deregister_style functions.

#1270911

same for toolset-common.css .

#1271599

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+01:00)

The handle for the toolset_maps_fixes.css file is "toolset-maps-fixes" which is what you need to use to dequeue it.

For "toolset-common", it is a dependency of "onthegosystems-icons", so you cannot dequeue toolset-common alone, you need to dequeue onthegosystems-icons. Do that first and see if toolset-common is still loaded. If it is you will need to directly dequeue it as well.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.