Checkout page very large and quite slow.

[pynej]

Using a single store on 2.6 in production mode. No combined JS/css, with setup:di:compile, varnish, and SSL for checkout.

Normal pages work quickly through varnish as expected in 2s/100ms uncached/cached and around 12k each.
Customer pages like past orders come in without varnish as expected in 1.5-2.5s at around 40k.
Going to the checkout with a single item in my cart take 4.5s and weights in at 800k and seams to go up in size and response time.

Note that these times are for the roundtrip for the html file, not any resources or images.

[ishakhsuvarov]

@pynej Thank you for reporting this issue. We already have an internal backlog item MAGETWO-40101 to improve checkout loading time and make the page cacheable. We will update this ticket when it's implemented.

[daniel-ifrim]

@pynej @ishakhsuvarov Checkout page has in it JSON data for all payment methods and shipping methods that are disabled in admin. This is why the page html source is this large. Magento_Ui should filter out at least disabled payment methods and shipping methods.
And all regions from database are redundant in those JSON objects.

[SchumacherFM]

We ran into the same issue that all payment methods will be loaded regardless if deactivated.

Would be nice if you guys can fix it ASAP ...

[pynej]

On 2.1 We were able to enable the Merge Css, Merge JS, and Bundle Js options and with all three on the issues seam to goo away.

[SchumacherFM]

The bug is still not fixed and enable bundling and merging hides only the problem.

Customers are already complaining about the bloated checkout page.

[pynej]

Yes. I would say this is a critical issue and makes us look very bad to our customers. The site, products, and custom loggin pages are all quite fast @.5ms for cached requests and 1s for uncached requests. But anyone getting to the checkout page is in for a nice 10s delay and gets very irritated. We have even disabled some unused of the shipping modules per advice I found but that had a very minimal impact on the performance.

To clarify the checkout page is 50 times larger then any other page on the site and its loading 5 times as much javascript code. Or with bundling turned off its loading 50-90 separate scripts per page load.

Also the way that the varnish/caching works the /checkout and its resources don't benefit at all form these systems. This means that the checkout page spends 1.85s processing in PHP with all the setup:di:compile complications, all caches enabled, and opcach set up. It then has to spend a further 1.5s downloading the large file. Then it gets to loading wither 90+ scripts or the 3.5MB bundles file either way taking another 6s.

[pynej]

These example numbers are with the following disabled:
List of disabled modules:
Magento_Dhl
Magento_Fedex
Magento_Authorizenet
Magento_Paypal
Magento_Braintree

We did load a custom module for CC processing: MD_Cybersource

[pynej]

The script block stertign with this is 440KB of JSON data.

<script type="text/x-magento-init">
        {
            "#checkout": {

Most of the data here looks like it is Locality info. Region/State info that is filled in the dropdown when country is changes. At the very leas this should be changed to be loaded when the country is actually changed as 99% of this data isn't going to be used on a individual page. An api that returns the regions for the selected country will significantly reduce this page size.

[pynej]

Reducing the 'Allow Countries' in settings to only US doesn't entirely remove the entries form the page HTML but it does reduce the checkout page form 476KB to 371KB.

[loekderooij]

This is a real serious issue, especially when you have many payment methods. One of our customers uses 2 payment providers which makes the total of payment methods 50+. Excluding countries and region reduces the request size, but even then the code looping these methods gets real slow. Total loading time took up to 30 seconds.

Since our customer only uses a total of 7 payment methods, I 'fixed' this by writing a plugin for 'Magento\Checkout\Block\Checkout\LayoutProcessor' in which I strip all payment methods that are not active for the current storeview. Now the page takes only 2 seconds to load instead of 30. This is however not a real solution to the problem.

[pynej]

Related to #6997 though there may be more issues like the payment methods not covered in that ticket.

[KalaiarasanSeetharaman]

We are using magento 2.0.6 . It is present in live . Checkout page is very slow . Why it is very slow when compared to magento 1 . Magento 2 is slow. How to optimize for checkout page . I have enabled cache system also , other optimization in backend also i did . But still slow for magento 2 checkout page it take arround 2 min more

[thlassche]

@SchumacherFM @ishakhsuvarov @pynej I fixed this by adding a layout processor plugin. It checks whether the default payment methods of Magento are enabled or not, and if they are disabled it removes them from the JS layout. Dramatically reducing the page load of the checkout page

di.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="checkoutLayoutProcessor" type="\<vendor>\<moduleName>\Plugin\CheckoutLayoutProcessor" />
    </type>
</config>

CheckoutLayoutProcessor.php:

<?php
namespace <vendor>\<moduleName>\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;
use Magento\Framework\App\Config\ScopeConfigInterface;
class CheckoutLayoutProcessor {

    protected $scopeConfig;
    public function __construct(ScopeConfigInterface $scopeConfig) {
        $this->scopeConfig = $scopeConfig;
    }

    public function beforeProcess(LayoutProcessor $layoutProcessor, $jsLayout)
    {
        // Do not render jsLayout of disabled payment methods (fixes Magento core bug)
        if ($this->scopeConfig->getValue('payment/free/active') == 0)
            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['renders']['children']['free-payments']);
        if ($this->scopeConfig->getValue('payment/banktransfer/active') == 0)
            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['renders']['children']['offline-payments']['methods']['banktransfer']);
        if ($this->scopeConfig->getValue('payment/cashondelivery/active') == 0)
            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['renders']['children']['offline-payments']['methods']['cashondelivery']);
        if ($this->scopeConfig->getValue('payment/purchaseorder/active') == 0)
            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['renders']['children']['offline-payments']['methods']['purchaseorder']);
        if ($this->scopeConfig->getValue('payment/checkmo/active') == 0)
            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['renders']['children']['offline-payments']['methods']['checkmo']);
        return [$jsLayout];
    }
}

[Khaleel]

This is still not resolved.

Magento 2 Checkout JS:

• Load all payment methods despite disabled or not
• Load all countries and states despite disabled or not

This code is JSON fired inside the HTML rather than an API call - that code is around 957kb call it 1mb

When you JSON Lint fire the code it returns 2.1mb of JSON

Your developers need a kick up the ass in Ukraine.

[SerhiyShkolyarenko]

We are closing the issue because MAGETWO-60351fix is delivered to develop branch. Thank you!

[thlassche]

@SerhiyShkolyarenko Is that true? Bug is still present in 2.1.3

@Khaleel @SchumacherFM @ishakhsuvarov @pynej I developed an extension to solve the issue. Please let me know when you need it.

[andidhouse]

Is this really fixed in 2.1.3? We use 2.1.3 in production mode and the checkout it very very slow... taking about 3-4 seconds on mobile devices to load.

[Khaleel]

The JSON address, the JavaScript, the HTML, the fact that checkout pages do not have any cache layer, the lack of default CDN support, minification and the use of all the checkout modules and XML files.. checkout should have been simple and clean.. it was over engineered.

[che2on]

@hostep Tried your FasterCheckout module and it is now taking 80 seconds to load. :(

[che2on]

Here is a good news! I am learning more and more about magento as i am discovering bugs and speed issues.

The Checkout page speed is under 3 seconds now, used @thlassche's solution.

The very very important step is to System > Advanced > Developer and minify javascript and css .

Also use varnish and redis for caching.

If someone wants the entire module please have a look at this generator https://mage2gen.com/ and use the code suggested above.

So far it is going good. Will be back here for the next speed fight.

[plentyhappy]

Desktop works fine but Android checkout takes 10 seconds and iphone not much better (tried this on multiple phones from different people). Changing to production mode really does not help - have not tried the @thlassche's solution yet.

Anyone from team Magento have update on when checkout will get quicker? Will it be part of the next release or a few months from now?

[twistedatrocity]

@plentyhappy I would not count on it any time soon. There are major bug fixes committed to the develop branch as far back as a year ago that have still not made it into a release. I really don't know what this company is thinking anymore.

[plentyhappy]

Here's an idea for Magento team:

http://feedback.shipstation.com/forums/330429-product-feedback-fresh-ideas/filters/top

users are allowed I believe 3 votes...you can use all your votes on 1 feature requested or split them up and hope that other users share your concern. Magento could use this for bug fix requests and/or feature requests.

[hostep]

@twistedatrocity: the community can now submit PR's to backport certain fixes from the develop branch to the 2.1-develop branch, and if they get accepted, they will be released in one of the upcoming 2.1.x releases: https://community.magento.com/t5/Magento-DevBlog/Pull-Requests-for-2-1-x-Patch-Releases/ba-p/65630

I'm thinking about submitting a PR to backport MAGETWO-59685 in one of the next days. This one should already improve the speed of the checkout somewhat, certainly if you aren't selling to a lot of different countries.
I already tried backporting the other fix (MAGETWO-60351) for this slowdown issue a couple of months ago, but failed to do so. This one is probably going to have a bigger effect then only MAGETWO-59685, but it should already be a small step forwards.

@plentyhappy: there is already a way to upvote issues: https://community.magento.com/t5/Magento-DevBlog/GitHub-Issue-Priority/ba-p/60088, although it isn't very clear about how to vote for issues to get backported. But now the community can get involved in this by submitting PR's (see above).

Just fyi :)

[plentyhappy]

Thanks for the information hostep! Fingers crossed for backport :-)

[magento-team]

Internal ticket to track issue progress: MAGETWO-67724

[magento-team]

Internal ticket to track issue progress: MAGETWO-67725

[thlassche]

I now have an extension which contains my fixes + additional fixes to load only active countries. The JSON now only contains relevant data for me.

[delyriand]

Hi @thlassche ! Can we get your module somewhere? I have same problem with checkout ... It is very slow on tablet and mobile.

[thlassche]

@delyriand Yes, just drop me an e-mail

[tomlever]

Hi @thlassche , is it possible to get your module?

[hostep]

@tomlever: you can just upgrade to Magento 2.1.8, it should contain the fixes discussed in this issue.

[thlassche]

@tomlever Sure, just drop me an e-mail

[Khaleel]

I am on 2.1.6 and face same issues. The module can be found here: https://marketplace.magento.com/thlassche-performancetweaks.html @tomlever

[sbwcws]

Did that extension help any one to speed up the checkout process