Lots of Blocking script and blocking CSS resources

From the plugin’s documentation:

You can selectively dequeue any script or stylesheet this plugin adds by using the gdoc_enqueued_front_end_* filters to remove the scripts with the associated handle. The registered handles are listed here.

Ok, but could you please give me at least one example? Now I have no idea where to place that code.

Also Documentation would be really useful only if you could example for every other topic. For example, since “DataTables customization options” I have no idea how to insert defer function which is very needed as already loading only 3k+ rows slows down page considerable a lot…

??

I already linked you to the documentation. Read it:

doc_enqueued_front_end_scripts – An array in the form $handle => array(...) representing parameters to pass to wp_enqueue_script(). This filter lets you unset() JavaScript scripts to prevent the plugin from enqueuing them. Use this to tweak your site’s performance by removing any scripts you know you will not need.

If you don’t know how to use filter hooks, read about filter hooks in the WordPress documentation.

Don’t get me wrong, I don’t ask and want you to do everything for me. I did read and did tired placing those codes in plugin options, plugin main file, however nothing. I’m not a programmer so when learning I need to see at least one custom example. ??

Start from scratch:
Let’s say I want totally remove pdfmake: URL: https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js
https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js

So I write “gdoc_enqueued_front_end_pdfmake” and “gdoc_enqueued_front_end_pdfmake-fonts”.
Where to place for them to work?

// or I write:
wp_enqueue_style( $handle="gdoc_enqueued_front_end_pdfmake",  $source="false", $dep array(https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js), $ver = false, $media = 'all');
// or maybe just:
wp_enqueue_style( 'gdoc_enqueued_front_end_pdfmake' );

Don’t get me wrong, I don’t ask and want you to do everything for me. I did read and did tired placing those codes in plugin options, plugin main file, however nothing. I’m not a programmer so when learning I need to see at least one custom example. ??

That’s fair. ??

When you need to write code to customize the behavior of some plugin for your theme, you should put that code inside your theme’s functions.php file. If your theme doesn’t already have a file named functions.php, you’ll need to make it yourself. Make sure the very first thing in the file (at the very top, before anything else, even before any spaces or tabs or empty lines), is the PHP processing tag: <?php

Once you have a working functions.php file in your theme, you can write code in it to make any change to how WordPress or any installed plugins work (as long as the plugin was written to accept modifications using a programming command, called a hook in WordPress’s jargon).

Inline Google Spreadsheet Viewer accepts commands from the hook named gdoc_enqueued_front_end_scripts (among others, documented in the “Other Noes” page). To use a filter hook, you define a new PHP function that runs some code when it is activated. To do that, we might write code like this in the PHP file:

function my_custom_filter_for_gdoc_scripts () {
    // our custom filter code goes here
}
add_action('gdoc_enqueued_front_end_scripts', 'my_custom_filter_for_gdoc_scripts');

Note the name of the function is in two places: the function signature and the second argument to the add_action() function call.

At this point, our custom filter is ready, but now no scripts are working; DataTables enhancements and Google Chart integration they’re all broken. Why? Because the function doesn’t return anything to WordPress. So, what should it return? What code should go in it?

Well, the documentation for the filter (linked above and found on the same plugin documentation page) says this:

gdoc_enqueued_front_end_scripts – An array in the form $handle => array(...) representing parameters to pass to wp_enqueue_script(). This filter lets you unset() JavaScript scripts to prevent the plugin from enqueuing them. Use this to tweak your site’s performance by removing any scripts you know you will not need.

What this means is that the filter receives “an array in the form $handle => array(…)” (an array of arrays) and that the result of whatever you do to this array in the code of your custom filter hook will be what the plugin passes along to the wp_enqueue_script() function. If you don’t return anything to WordPress when WordPress asks your custom filter how it should modify what WordPress gives it, then WordPress has nothing to give to the plugin and thus, no scripts are enqueued. But if you only want to remove one specific script, and keep the rest, we have to do something else.

According to the documentation, the filter hook receives an array. So the first thing to do is to change the function signature so that it can actually accept the array it is given:

Change this line:

function my_custom_filter_for_gdoc_scripts () {

to this:

function my_custom_filter_for_gdoc_scripts ($scripts) {

Now, our code looks like this:

function my_custom_filter_for_gdoc_scripts ($scripts) {
    // now we can modify and then return
    // the $scripts variable, which is the array
    // the documentation is talking about.
}
add_action('gdoc_enqueued_front_end_scripts', 'my_custom_filter_for_gdoc_scripts');

Okay, so now we are able to actually do something to the $scripts array. (We could have called this variable anything we wanted. “$scripts” is just a self-explanatory name.) What do we want to do with it? Well that depends. If our goal is to always remove a specific Inline Google Spreadsheet Viewer script from loading on the theme, we just need to know which script that is. Thankfully, that’s also documented on the same page that describes this filter hook in the first place. Let’s say we want to remove the PDFMake script, since our theme never uses the “PDF” export button.

To remove a script, we use PHP’s built-in unset() function to remove the entry in the $scripts array that refers to the script we want to remove. Again, this is what the documentation of the filter hook told us to do to remove scripts. In PHP, array elements look like this:

$variable_name['array_element_name']

Read more about PHP arrays if you are not familiar with them in the PHP manual.

Okay, so we know the array element we want to remove is the pdfmake element (because that’s what the documentation of the filter hook told us is the name [“handle”] given to that script), and we previously decided to call our array $scripts. So putting this together with the unset() function we need to use to remove this script from being loaded, our code now looks like this:

function my_custom_filter_for_gdoc_scripts ($scripts) {
    unset($scripts['pdfmake']);
}
add_action('gdoc_enqueued_front_end_scripts', 'my_custom_filter_for_gdoc_scripts');

There we have it. We’ve removed a script. If we want to remove more scripts, we just use more unset() lines. For instance, to remove the JavaScript for the DataTables column visibility button as well, we write this code

unset($scripts['datatables-buttons-colvis']);

on the line right after the line that unset()s the pdfmake element.

If you want to do fancier things, like remove scripts but only for certain spreadsheets, then you need to write more code. Now you can decide to remove (or add) scripts whenever and however you want, as long as you can make that decision using something that you know how to express in PHP code.

Hope this helps.

Wow, Man, you put a huge smile on my face!

I have read once and will read more to understand and have some questions, but now it’s very late. ??

If this is something you want to know more about more generally you should learn the PHP programming language. There are many beginner tutorials elsewhere, an Internet search will find them. This forum isn’t a good place to ask questions about anything other than this plugin.

I wrote that all out so that it is archived in this forum. Now people who want an example no longer need to ask me for one, they can just read this.

Oops, in my haste in writing this I of course forgot to actually add the return statement. The Last example should look like this:

function my_custom_filter_for_gdoc_scripts ($scripts) {
    unset($scripts['pdfmake']);
    return $scripts;
}

I have read it including given references again. And now I do understand why we couldn’t understand each other (first four posts). I believe you treated me as somebody who are experienced with the WordPress and coding and while I’m not – your answers (links to documentation) was totally worthless as I just haven’t faces such thing before. Also WordPress references is more less hard to understand as English is my secondary language. No offense on that, for others that would be all what they need but not for newbies. So big Thanks again! ??

Your tutorial was very informative and it, I believe, is helpful for lots beginners.
However I have some questions as I’m trying to fully be clear with the code:

? You used $scripts because it “is just a self-explanatory name” or because you have used such variable writing your plugin (I have looked at the plugin’s files) or it has nothing to do with what you wrote in plugin?

? I’m not sure exactly what is array – is it true to say it is like a library for variables, but on the other hand I know that we can assign anything to $randomword just describing in code page or assigning with the form… I’m confused with this thing but as you said, there is a lot lessons on the Internet so you don’t have to answer.

? Is it right to say that this function takes array (let’s say it library) and let go everything on it except our “unset”?

“I wrote that all out so that it is archived in this forum. Now people who want an example no longer need to ask me for one, they can just read this.”
That’s very smart.

Also I notice that on FAQ page at the very end there is such example I was asking, so it’s my bad I wasn’t focused enough to see it considering it was there for a while.

Earlier I have mentioned that I want two more functions.
? Plugin load only if tag is used, because leaving table and it’s responsive ability cause additional 4 resources to load every time.
? Add defer function to decrease load time for page. Now it has over 3000 rows and takes additional ~23 seconds to load (excluded server response time).
https://www.sperohub.io/games-monetization-database/

So for second I included datatables_defer_render=”true” datatables_defer_loading=”true” in the shortcode:
[gdoc key="https://docs.google.com/spreadsheets/d/16qXL4U92CwMa5QdAIS1tyTKDQNrINo0uvk6dvu10XBI/pubhtml" class="FixedHeader-top" datatables_page_length="25" datatables_defer_render="true" datatables_defer_loading="true"]
As it’s only what I found just reading Other Notes documentation but it does zero influence to load…

But datatables page gives such example:

$('#example').dataTable( {
  "ajax": "sources/arrays.txt",
  "deferRender": true
} );

Source

Assuming either way I need to add something to functions.php for shortcode to work or just add to plugin options something should be changed.
I would change #example to #igsv-MY_TABLE_KEY, right? Also table key is complete URL included in shortcode?
Then what I have to do with ajax?
Documentation says:

when DataTables loads data from an Ajax or Javascript data source

Hmmm… that’s not okay, I need use sheets as source?

Coming back to first function – load plugin only with shortcode:
I have read a lot examples and WordPress guides and it looks like I should edit plugin code? So before going further am I wrong? Maybe this also added though theme functions.php?

Why it’s marked as resolved?!

You used $scripts because it “is just a self-explanatory name” or because you have used such variable writing your plugin (I have looked at the plugin’s files) or it has nothing to do with what you wrote in plugin?

No, the $scripts I used in the example above has nothing to do with my plugin, it is solely for your custom filter function. When WordPress passes a value to your function, it makes a copy. That copy is wholly owned and controlled by your function. This is called “scope” and you should definitely read about scoping in programming languages. Wikiversity has a good introduction to the concept of scoping, try reading there.

I’m not sure exactly what is array – is it true to say it is like a library for variables, but on the other hand I know that we can assign anything to $randomword just describing in code page or assigning with the form… I’m confused with this thing but as you said, there is a lot lessons on the Internet so you don’t have to answer.

An “array” (in PHP) is just a fancy word for a kind of list. A list has some number of items in it, right? Here is a list with three items:

• Item 1
• Item 2
• Item 3

I could refer to each item of this list individually by telling you to, for example, “look at list item 2,” or I can refer to the whole list by telling you to “look at the list I wrote you.” Usually, people make lists to group certain things into a collection. For example, a list of scripts to load on a page. ?? If this were such a list of scripts, it might actually read more like this:

Scripts to load:

• DataTables core script
• PDFMake script
• Google Chart visualization API script

In PHP, this would be called “a numerically-indexed array,” because it is a list (an array) in which the first item in the list is called “element 0,” the second item in the list is called “element 1,” and the third item in the list is called “element 2.” (Notice that programmers start counting from 0, not from 1.) In PHP code, if the list were assigned to the variable called $scripts, then writing $scripts[0] would refer to “DataTables core script” and $scripts[1] would refer to “PDFMake script” and so on.

But sometimes, like when you’re writing a custom filtering function, you don’t necessarily know the order of the elements in the list beforehand. This is why PHP also lets you assign names, rather than numbers, to the individual list items. So you might call the “PDFMake script” list item pdfmake instead of referring to it by its numerical position (number 1). In this case, you refer to it like this in code: $scripts['pdfmake'], which, you’ll notice, is exactly how this plugin works.

Again, you should read up on arrays in the PHP manual.

Is it right to say that this function takes array (let’s say it library) and let go everything on it except our “unset”?

Almost. When you use unset() on an element in an array (on an item in the list), it simply removes the item from that list. So if your array had three elements as shown above and then you do unset($scripts['pdfmake']), then the pdfmake element is removed and the list now looks like this:

• DataTables core script
• Google Chart visualization API script

Only two elements remain. That’s why using unset() in a custom filter function is how you remove scripts from loading in this plugin.

Earlier I have mentioned that I want two more functions.
? Plugin load only if tag is used, because leaving table and it’s responsive ability cause additional 4 resources to load every time.

The reason the plugin unconditionally loads these libraries by default is because it can also work on tables that are produced from other plugins or that are written by hand. See the “DataTables classes” option in the plugin’s settings screen.

If you want to remove the scripts from loading on every page load except where a shortcode is used, you need to use several additional WordPress plugin API hooks, this time including a different kind of hook called an action. If you are still struggling with the filter hook I showed you above, I do not think writing several additional hooks is something you should attempt right now. Focus on learning PHP more first. That being said, one of the hooks you will need to use includes the wp_enqueue_scripts hook, but there are others. You can use the WordPress developer reference to search for various functions, hooks, and other components of WordPress that you can write custom code for.

? Add defer function to decrease load time for page. Now it has over 3000 rows and takes additional ~23 seconds to load (excluded server response time).

You are misunderstanding the purpose of DataTables’s options for deferment. These options are used to tell DataTables not to write HTML until it is needed when loading data from an Ajax source. Unless you have configured an Ajax source yourself (you haven’t), this plugin creates all the HTML the DataTables extension needs to use first, before ever invoking the DataTables features. The reason your page is taking longer to load is because it is printing all the HTML in your table. There is no way to defer that (unless you use an Ajax datasource, of course).

Why it’s marked as resolved?!

Because the answers to your questions are in this thread, and the various places the posts in this thread link to. The fact that you do not yet understand all of it is something you will have to address on your own, but has no bearing on whether or not the information you asked for has been provided to you in this thread.

Thanks a lot. I appreciate your, helpful hacker’s, time and effort explaining me those things.

Now I aim to expanding my knowledge. ??

Cool, good luck, thevukaslt.

For anyone else reading and wondering why thevukaslt got such a helpful response, it’s because their questions proved they were trying to solve the problem on their own, and were asking for assistance, not for solutions.