Home › Toolset Professional Support › [Resolved] 48 Render blocking scripts.
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.
Our next available supporter will start replying to tickets in about 0.23 hours from now. 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+00:00)
Tagged: Views plugin
This topic contains 56 replies, has 3 voices.
Last updated by Akhil 5 years, 4 months ago.
Assisted by: Nigel.
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?
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
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00: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.
Ok. thanks
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00: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...
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.
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.
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. 🙂
[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
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00: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/
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.
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00: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.
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.
same for toolset-common.css .
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00: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.