On the website of the online store, on the "All products" page, each product has the following code in the script tag:

$(document).ready(function(){ $('#buy10769').blur( function (){ $.ajax({ url: "/include/section/add-easy-cart.php", type: "POST", data: ({id : 10769, quantity : this.value}), success: function(res) { } }); if ($("#buy10769").val()>0) { document.getElementById('reload-cart').click(); } }); });

There are products on page 540. Is the number of scripts critical for downloading a page?

  • @TotalPusher Please try to publish detailed answers containing a specific example of the minimum solution, supplementing them with a link to the source. Answers –references (as well as comments) do not add knowledge to the Runet. - Nicolas Chabanovsky ♦

1 answer 1

Firstly - your page is heavy, in the literal sense. Your code weighs a certain number of bytes, and you have this script repeated 540 times.

Secondly , when the HTML parser reaches the script tag, it will begin to parse it, blocking the rest of the html parsing, again you will have 540 times parsing the almost identical code

You have a bunch of identical elements on the page (say, input)

 <input id='#buy10769' class='buy-input' data-id='10769' /> <input id='#buy10770' class='buy-input' data-id='10770' /> <input id='#buy10771' class='buy-input' data-id='10771' />

And your code, you can modify it.

 $(document).ready(function(){ $('.buy-input').blur( function () { const $this = $(this) const id = $this.attr('data-id') const value = $this.val() $.ajax({ url: "/include/section/add-easy-cart.php", type: "POST", data: ({id, quantity : value}), success: function(res) {} }); if (value > 0) { document.getElementById('reload-cart').click(); } } }); });

Now, instead of 540 variants of your script, we have one. Which hangs up event handlers for each input, you can do without the data-id , then just make the id in the form of 10769

  • one
    Thank you so much for the answer and for the script! I checked the download speed with this example. With clearing the cache, the page was loaded for 18.5 seconds. With the cache loaded for 10 seconds + It was not available for clicks, it slowed down, it re-painted the tree for another 15 seconds. I did not notice the removal of the scripts of the tormozs and the long rendering. Without cache - 8 seconds. With cache - 5.3 sec. - Daniel Postnov