Cs-Cart Render-Blocking Javascript And Css Problem *** Help ***

Hi,

I ran the PageSpeed Insights Tool by Google and looks like something is slowing my pages down. Here is what it reported. Please let me know what's causing these render-blocking javacript code. I tried deleting them from the var > cache folder but it keeps coming back in the folders. How do i remove the render-blocking javascript in CS-Cart and what do i do with optimizing the css delivery as i have no control over this. I also don't have any add-ons the CS-Cart is the newest version with no add-ons except for what CS-Cart came with.

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 2 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Please help as soon as possible.

Here is the code that Google Insights mentioned.

var/cache/misc/assets/js/tygh/scripts-6013b4f7e7dad1d5b3fbc6efb4bd8ae31496156714.js

https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoaded&render=explicit

Anyone that can help?

Hi,

I ran the PageSpeed Insights Tool by Google and looks like something is slowing my pages down. Here is what it reported. Please let me know what's causing these render-blocking javacript code. I tried deleting them from the var > cache folder but it keeps coming back in the folders. How do i remove the render-blocking javascript in CS-Cart and what do i do with optimizing the css delivery as i have no control over this. I also don't have any add-ons the CS-Cart is the newest version with no add-ons except for what CS-Cart came with.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 2 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:

Please help as soon as possible.

Since nobody else is responding...there is nothing you can do about any of that. The js and css is created by CSC and recaptcha is from google. Everyone else using CSC and/or recaptcha has the same thing.

I highly doubt they are slowing your site down enough to make a difference.

no problem. i will just skip fixing that.

This has been an issue that always comes back. This is called “above the fold optimization”. I have not seen anybody who can do this for CS-Cart. It requires a total mind shift for CS-Cart Owners, CTO and developers to look at their software. I have seen it over 5 years since I have been using CS-Cart but it is very slow.


For this to happen;

-they need to give us total control over JS and CSS compilation process

-prioritize some files over others

-change the code so nothing blocks DOM


These are core changes and they only have the ability to combine them and gzip them to give page load speed but not performance.

There are specific things that you DO want to run early to determine a redirect or other action BEFORE a page completes loading.

These "blind" metric tools should be used to investigate, not determine viability or necessity.

Almost all core CSS is combined into one file and is compressed upon access (so it remains readable for diagnostics/reference).

Same goes for JS. Almost all is deferred until after the page has loaded (I.e. document.ready()).

However there are many pieces that are necessary to load in sync with the page so that the user has a pleasurable experience. It's annoying to have a page change after you start reading or navigating within it.

Almost every Google snippet tells you to load it in the 'head' tag or at the top of the 'body' tag. Then you run their tools and they tell you it's blocking code! Seriously? Most of these can be deferred. They simply need to be loaded before the data (classes, functions, variables) are referenced. If you allow cs-cart to defer these internally (but note they use JS to do so) then they will load in the proper order.

The metrics can say whatever they want, but the goal should be a positive user experience.

Tony, not sure if you are speaking out of research or just experience. I have both and I can tell you that CS-Cart platform does not enable us to manage these resources the way we should have. Wordpress and may other platforms have these features.


We are not talking about 100% perfect load time, we are talking about the perception of the load time. I have competitors who have accomplished this and their DOM loads in less than 2 seconds every time. This doesn’t mean everything has been loaded. Everything that appears at the top of their page loads perfectly so user can start reading.


Question:

If I identify the CSS and JS requirements for above the fold elements, how can I choose them to be delivered first and the rest to be delivered async?


The simple answer: I can not pick and choose because CS-Cart will create a lump sum CSS and JS file - GZIP them and deliver to the pipe. There is no priority mechanism.


The developers will include their JS - CSS files on every page of the website. Even Simtech has addons that only have functions at the Checkout Page, they deliver all JS and CSS files to every page of the site.

Please refer to this article. There are many others on this subject as well.

https://www.goivvy.com/blog/remove-renderblocking-javascript-abovethefold-content-magento
https://css-tricks.com/authoring-critical-fold-css/

You're correct in that they bundle everything together and send on first refrerence (cached in browser after that).

There are arguments both ways for combining files (fewer requests) and enabling them to load separately (potentially smaller total size).

Fewer requests is a big win when latency is a performance issue and fewer but larger requests is an issue when bandwidth is the choke point.

The "every page" argument kind of disappears since the css and js files should be cached by the browser and therefore only loaded on first page load of a site. If your browser is downloading css and js for every page (not just checking timestamps to validate the cached version) then you have something in your browser setup to not allow caching which in itself would be less optimal.

If your argument is that addon css/js files add too much to the first page load, then that's valid for a first page load. But the caching should kick in for any subsequent page loads.

I'm not promoting one way or another since I think both have value in different contexts. I was simply stating how cs-cart works out of the box with no modifying attributes like 'data-no-defer' or class="cm-ajax-force".

Let's use a real example. I have this addon:

https://www.simtechdev.com/addons/customer-experience/address-autocomplete-by-google.html

for my checkout page only but they have their JS and CSS included on every page. I don't mind CSS per say but since they load JS on every page, now my users have to wait for the whole Google Maps JS libraries to be loaded. I can show you at least 4-5 examples where the addon developer has to be very careful with no loading their files into the files because it delays the whole website load time.

I believe the JS and CSS is loaded once even though it is referenced in the code base.

The browser will make a very fast request to check the checksum and timestamp of the last modification time. If both those are the same as what's cached in the browser then it won't load the JS nor the CSS.

I don't know about the maps api itself. I .e. I don't know whether it wants to query the maps db and download info every time it's referenced. But the JS that does that is only loaded once per site.

Loading JS and having it execute are two different things. You might ask them to add a condition around the actual api code so that it won't "execute" when it's not needed. But that is quite different than loading the JS code and the CSS. I.e. loading is not executing.

I believe the JS and CSS is loaded once even though it is referenced in the code base.

The browser will make a very fast request to check the checksum and timestamp of the last modification time. If both those are the same as what's cached in the browser then it won't load the JS nor the CSS.

Not true. Because everyfile takes time to download. %60 of web traffic is one page visitors, they leave immediately. The first impression is huge and if you have a website that loads in 15 seconds, you just lost it.

Not true. Because everyfile takes time to download. %60 of web traffic is one page visitors, they leave immediately. The first impression is huge and if you have a website that loads in 15 seconds, you just lost it.

This is true, but the JavaScript simply has to be retrieved, just like the CSS. If you really have problems with this I suggest you send me a PM and I might have a solution for you.

This is true, but the JavaScript simply has to be retrieved, just like the CSS. If you really have problems with this I suggest you send me a PM and I might have a solution for you.

PM sent. Thanks