5

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

  • 1
    You can optimize your website. – Dhiren Vasoya Dec 31 '16 at 4:49
  • 3
    Wow, thank you! – Luis Garcia Dec 31 '16 at 17:23
  • 1
    I'm having similar issues. Did you make any headway on this? – Robert Egginton Mar 24 '17 at 11:01
  • I have been struggling with this just under a year now - page requests and page speeds are at 17 seconds sometimes for us.. were also struggling and your not alone.. RequireJS adds so many http requests. I wish Magento publish the names of the developers who built this poor system! There front end developers are insane! – TheBlackBenzKid Apr 14 '17 at 18:46
  • @TheBlackBenzKid how is your server configured? Check response headers if they are gziped and allow cache? Maybe using a CDN would improve the loading times. – Zefiryn Apr 14 '17 at 20:10
5
+75

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

1

It's totally normal when you run on your local machine or on server don't configured correct.

If you use a local machine try to use this container Docker.

If you use a remote server use the files .htaccess.sample or nginx.conf.sample

Update the memory limit to 2048M on remote server or the max that you can locally.

So run these commands:

alias mage="php -d memory_limit=-1 -f bin/magento"

chmod -R 775 pub/static/ var/ pub/media/ &&
rm -rf var/view_preprocessed/ var/cache/ var/page_cache/ var/tmp/ var/generation/ pub/static/frontend/ ;
mage cache:clean &
mage cache:flush &
mage indexer:reindex &
mage setup:upgrade &&
mage setup:static-content:deploy ; mage setup:static-content:deploy -f;
mage setup:db-data:upgrade &&
mage dev:source-theme:deploy &&
chmod -R 775 pub/static/ pub/media/ var/
0

More information would be helpful, how large are the slowest scripts, is it just Javascript or is it CSS to? Are you adding JS via RequireJs or via XML? What caches do you have enabled? Is it on a local environment or a live site?

You could try minifying the JS via the admin, although be sure to test as this can cause errors. To do this login to the admin and navigate to `Stores > Config > Advanced > Developer > Javascript Settings and set Merge JavaScript Files and Minify JavaScript Files to true.

  • I've updated my question with more information. – Luis Garcia Jan 3 '17 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.