6

The checkout page on our Magento 2 store is loading insanely slow. Does anyone know what causes this or how to fix this?

Customers are cancelling the orders in this last step. Really frustrating.

Thanks a lot!

UPDATE:

I provided a screenshot of the chrome waterfall. As you can see, some files are queued at 8+ seconds. Some files take over 30 seconds to load.

How can we speed this up? I checked the TTFB by enabling profiling, but that didn't show any significantly slow things. Please check screenshot.

enter image description here

  • Have you tried caching, JS AND CSS merge? Please share website URL and server configuration(ram, PHP version, Mysql version). – kunj May 28 '18 at 16:37
  • That doesn't seem to be the problem. The checkout page shows the loading spinner for about 1 to 2 minutes and then loads the checkout form. – Rick May 31 '18 at 10:26
  • Pleas, provide more details like your website url and which modules are installed for checkout, have you tried after disable one by one? – kunj Jun 1 '18 at 3:39
  • Maybe the screenshot helps @kunj I think the server config is ok. There's only one site running on a pretty good server. – Rick Jun 7 '18 at 9:52
  • I have a very similar issue, with remarkably similar numbers - ~415 requests and 45s to load the checkout. Server is not the issue and we have all merging and caches enabled, and we use Varnish (although it's probably not active on the checkout page). Did you figure anything out @Rick ? – James Sep 19 '18 at 12:45
1

I resolved this by switching to production mode, rather than developer or default, as follows:

bin/magento deploy:mode:set production

You can check your current application mode with:

bin/magento deploy:mode:show

The application modes are explained here; in my case the speed improvement with production was the result of it bundling Knockout components. In developer mode the components are all loaded individually as in OP's example, resulting in hundreds of requests.

0

As you have seen there are lot of Js files which are being requested from the server which slows down the rendering process of checkout . I tried in built option of js bundling but that wasn't useless at all

After doing bit of research i found there is option to do js bundling using require js which bundles all the required js and html(knockout template files to a single js file) files after implementing this my site is rending really fast .

this js implementation is given in Mangento 2 docs - Advance js bundling Below is the link you can follow Jst install Nodejs and r.js on your server and use the build.js file provided - https://devdocs.magento.com/guides/v2.3/performance-best-practices/samples/build.js

Below commands generates the bundles of js files which are required and after you generate the bundles you need to include those in required xml files which are mentioned in the documents

mv pub/static/frontend/Vendor/themename/en_US pub/static/frontend/Vendor/themename/en_US_source
r.js -o buildv1.js baseUrl=pub/static/frontend/Vendor/themename/en_US_source dir=pub/static/frontend/Vendor/themename/en_US

Refer the entire Article here https://devdocs.magento.com/guides/v2.3/performance-best-practices/advanced-js-bundling.html

0

Bundling in Magento is meh. Don’t use it. As Sairai has already mentioned, you need to use Advanced JS Bundling. Also check that you either use Advanced Bundling or Merge JS.

Quick setup guide for Advanced Bundling. Install nodeJS, npm and Reactjs. I personally use Magento DevTools installed as a Chrome extension. There’s a record button inside the extension. Use it to record how JS loads on Checkout. I suggest you also do it for other key pages in order to create a comprehensive bundle.js file that would include other performance-critical pages.

Ok so the next step is to create static content php bin/magento setup:static-content:deploy

You need to go to /pub/static/frontend/Magento/yourTHEME/yourLOCALE/ let’s say /pub/static/frontend/Magento/luma/en_US/ Also rename en_US to en_US_source

If you have put bundle.js to Magento root folder, then you need to execute it from there:

r.js -o build.js optimize=uglify2 baseUrl=”pub/static/frontend/Magento/luma/en_US_source/” dir=”pub/static/frontend/Magento/luma/en_US/”

There are more things you can do actually. We wrote this guide that includes a few good ones besides advanced bundling.

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.