Magento – Magento 2: javascript elements load slowly

javascriptknockoutjsmagento2performance

Checkout forms, gallery on product pages, and more elements loaded by javascript take up to 4 seconds to load.

What can be done to make javascript elements load faster?

Update:

I'm using a custom theme which inherits from Blank theme. I've not added additional JS files, only made minor changes to them for translation purposes.
All caches are enabled.
It is a live site in production mode.

Pages loading times:

Category and product pages: 5 to 6 seconds.
Cart and checkout: 9 to 10 seconds. (is it normal?)

On product pages, product images are the last to load. This can be annoying for the user. Is it possible to make them load faster / before other elements on the page?

product page
category page

Best Answer

Enable JS Merge/Bundling/Minify from the backend. There was some issue with bundling in previous M2 versions. Now it is fixed in v2.1.5 upward. This will create single file including all small js/html files which make it faster to load and decrease the network traffic. It is recommended to enable CSS minify/merge and minify html templates to gain more performance benefits.

Note: You will have to do static content deployment after doing these changes.

enter image description here

This is what I get after above config changes.

enter image description here