airnetworksinc.com

Magento 2 Mobile Checkout Speeds are Horrible!

We had an issue come in a few weeks back: One of our customers were getting complaints that their new Magento 2 website was ‘unusable’ and ‘slow’ and ‘pages would go gray’ – despite the fact that the site was new and running on highly optimized servers.

It would have been easy to ignore – the site tested fine and performed well on speed test sites, at least for a Magento 2 site – but I didn’t like hearing that kind of feedback for a site that I was pretty proud of. So I dug in.

Initial tests were inconclusive. I couldn’t find where the pages were slow or unresponsive. I couldn’t see where the page would go gray. I didn’t see any errors in the logs and we fixed the few js errors inspect showed us.

After a few days of searching and testing, I found a lead. In their Google Analytics, I noticed that about 60-70% of their users were mobile. Up to this point I had mostly tested on the desktop with minimal mobile testing. This opened up the issue in a hurry.

First, the theme we used as a base had some odd behavior on the mobile side. When I click on ‘search’ for instance, a black page would pop out from the side and it was hard to see the search text box, especially in the light. The mobile menu was a mess and missing a few things, thank you Mega Menu…

Those required a little bit of touch-up from the dev team but were mainly cosmetic. They did reduce the complaints significantly, but one issue remained: The checkout page would take up to 24s to load – especially on older phones.

There are a few options for speeding up your mobile checkout page load times:

  1. Make sure you minify your js and css files. This removes excess space, comments and combines many smaller files to a few larger ones.
  2. Make sure you disable/uninstall unused extensions. Basically that page loads just about everything.
  3. Make sure your server hardware is speedy. There are a ton of files and api calls associated there, don’t be the hold up.
  4. Consider using a 2 step checkout (default, not one-step checkout). This splits the page load time pretty evenly. It may annoy desktop users though.

If those don’t work for you and you need a more comprehensive solution, you should look into creating a React.js storefront and just using Magento as the backend serving it – sort of like a headless e-commerce site. React is a lot faster, the checkout pages I’ve tested all loaded in one page in under 3 seconds.

The drawback to this approach is that it’s basically a website redesign – so it’s probably going to run you $30K-$50K or more depending on your requirements. It’s a lot of work to get this set up and customized. And it’s newer so there aren’t any existing repositories of themes and easy-to-use templates. Many extensions won’t work with it either.

If you find you need to update/upgrade your website’s mobile capabilities, schedule you free consultation today by filling out the form below.

Leave a Comment