In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

How to Speed up Your Magento 2 Store on Mobile Devices: 5 Tweaks That You Can Make

How to Speed up Your Magento 2 Store on Mobile Devices: 5 Tweaks That You Can Make

by Silviu Serdaru on May 23 2018

What can you do to speed up your Magento 2 store on mobile devices?

For let's face it: Magento 2's “ecosystem” of third-party extensions and overall its modular architecture is convenience at its best for any developer! For any eStore owner. It empowers them both to start small and then scale it up to their most daring goals. Yet, all this power placed in your hand does come at a cost: reduced speed.

And top speed is crucial if you're determined to deliver a great mobile user experience.

So, what are the tweaks that you can make to boost your eStore's performance?

Luckily, there are plenty, ranging from:

 

  • well-known (and too frequently underrated) best practices, like optimizing your product images
  • to slightly more in-depth “tweaks”, like inlining critical CSS

     

But, let's dive right in! Here's your “emergency kit“ of 5 solutions to apply to your Magento 2 store for improving its performance on mobile:

 

1. Reduce Page Size to Increase Page Loading Speed 

And it's still those “too obvious to be truly effective” type of techniques that have the biggest impact on an eStore's performance on mobile devices:

Lower your web page size and it will make a drastic difference for your mobile users' experience with your online store; especially for those accessing your site from mobile devices with low bandwidth.

Now here are a few simple, yet effective tweaks that you can make to reduce page size:

 

1.1. Use GZIP  to Compress Your Pages

A handy “trick” that you can perform is to enable GZIP (if it's not already enabled) and let it “work its magic” on your web page's size.

It will compress:

 

  • fonts
  • CSS files
  • external scripts
  • JS

     

cutting your pages' “weight” down by almost 70%.

Note: put any of your front-end pages to the Google PageSpeed Insights “test”; take note of the GZIP-related warnings popping up and ensure that the CSS/JS compression feature is enabled.

 

1.2. Enable JavaScript/CSS Files Minification

Here's another built-in Magento 2 feature that all you need to do is... trigger to speed up your Magento 2 store on mobile devices: CSS/JS files minification.

Note: do keep in mind, though, that it works in production mode only (so not in default or developer mode, as well)!

Here's how you enable it:

 

  • Navigate to the backend menu
  • Stores > Configuration > Advanced > Developer
  • Set your app/site's production mode:

     
php bin/magento deploy:mode:set production

Note: not sure what mode your eCommerce site's running on now? Enter the following command to identify its current mode:

php bin/magento deploy:mode:show

1.3. Optimize Your Product Pages 

And the more crowded your product catalog is, the more important this solution becomes!

“Are you implying that I should take each and every one of my product images and optimize them... one by one?” you might ask yourself.

Definitely not! Since there are at least 2 easy solutions that you could go for:

 

  1. you can use a content delivery network (CDN) as it will take the image optimization “burden” off your back
  2. you can leverage the Google PageSpeed (GPS) server extension; it will compress your images in no time, among other “tricks” that it performs to speed up your Magento 2 store on mobile

     

2. Reduce The Server Response Time to Speed up Your Magento 2 Store 

Optimizing your server's response time (or “time to first byte”) is another critical tweak that you can do to boost your Magento 2 store's speed. 

Set your “target” to 0.5s, the time a browser would need to wait for your website's server response.

“But why bother, since Magento provides me with full-page cache functionality right out of the box”, you might wonder.

That's true, but just consider particular pages, such as checkout, customer pages, cart, that this pre-built functionality can't “work its magic” on.

 

2.1. Run a Throughout Audit on Your Third-Party Extension "Load" 

Start reducing your server response time with a basic, yet so very effective step:

Audit your entire modules infrastructure!
  • identify any issues with your current plugins and (if any) look for a patch or replace them with more performant ones
  • turn them on and off just to detect any negative impacts on your Magento 2 site's performance 

     

Note: as a rule of thumb, try keeping your Magento 2 third-party extensions to a minimum! Trim down your collection of modules keeping only the must-have ones; otherwise, its weight will affect your eCommerce site's performance!

 

2.2. Use Magento 2 Profiler to Detect Any Server Performance Issues

“What's a profile?” you ask. 

A program geared at identifying just how much time a code block needs to execute.

Using a profile you'll be actually drilling deep(er) into your Magento 2 store's internals to detect the very root cause of your bad server response time!

 

2.3. Consider Upgrading Your Hosting Plan

Is it time you upgraded your hosting server? More RAM and CPU will always have a huge impact on your eCommerce website's performance, you know.

So, how do you know whether it's time to upgrade?

Just install a brand new Magento 2 website on your current server. If it's speedier than your live website, there's no need to change your current hosting plan.

In this case, you'll only need to focus on the other tweaks included in this list here to speed up your Magento 2 store on mobile.

 

2.4. Use Varnish as a Full-Page Cache (FPC) Solution

Another trick for improving Magento 2's performance is to leverage Varnish, the software that caches and serves content.

The good news is that Magento 2 supports it natively.

And here's how you trigger its “power”:

 

  • navigate to the backend menu
  • Stores > Configuration > Advanced > System > Full Page Cache

     

Note: you'll need to enter a hostname, port and Varnish export configuration; if in doubt, ask your system admin for a hand to set everything up properly.

3. Load and Render Above-the-Fold Content First 

Prioritize the content that appears before scrolling down! It will make all the difference when it comes to your Magento 2 eStore's page loading time!

And now, here are the techniques at hand for loading and displaying this content first:

 

3.1. Defer Loading JavaScript 

Moving all your JS code to the bottom of the page (“beneath the fold”) will implicitly make your AF (above-the-fold) content load quicker.

You'll basically postpone the time-consuming parsing of JS code and thus speed up your Magento 2 store on all mobile devices!

The good news is that there already are Magento 2 extensions that do the job for you. They'll move all your non-critical JS scripts beneath the fold!

 

3.2. Inline Critical Above-the-Fold CSS

“But what about the above-the-fold CSS?” you might legitimately ask yourself. 

How do you approach these critical files? For you definitely can't place ALL your CSS at the bottom of the page, now can you?

Well, first you:

 

  • extract/isolate precisely this “critical” CSS
  • then you inline it straight to the HTML; right between <head> and </head> tags

     

This way, it will get loaded and rendered first (before the non-critical CSS), along with the rest of the above-the-fold content. 

Note: you might be tempted to go for one of those tools “promising” you to extract this CSS for you. Unfortunately for you, manually setting the critical CSS for each one of your pages (homepage, checkout, category etc.) is the right way to do it.

 

4. Leverage the Power of HTTP/2 

By moving your Magento 2 website over to HTTP/2 you'll grant your eStore users a secure and faster-browsing experience.

Not to mention the impact that it will have particularly on the experiences of those customers using a slow mobile network to access your online store.

The tremendous news is that Magento 2 co-exist with HTTP/2 by default. Yet, there are 2 conditions that you need to make sure your online store meets:

 

  1. your hosting server should already support HTTP/2
  2. your eCommerce web pages should be served via SSL

     

Note: run your own "investigation" and look for some suitable extensions providing server pushes.

 

5. Magento 2 Performance Optimization: Disable JS Bundling

But why would you want to disable a Magento 2 feature that actually lowers the HTTP requests made by your browser for loading and rendering a web page?

Because it comes with its own side-effects, the main one being the oversized JS file that this feature generates, of about 5-10 Mb.

Moreover, it's proven that downloading this huge external file takes more time than the time you'd actually be saving by reducing the no. of HTTP requests.

Now that we've tackled the “Why”, let's focus on the “How”, as well. Here's how you disable JS bundling:

 

  • go to your website's backend menu
  • Stores > Configuration > Advanced > Developer
  • and apply the following configuration:

     

Speed Up your Magento 2 Store on Mobile: Disable JS Bundling

Note: there's no need to disable this JS files grouping feature if you're already using HTTP/2!

The END! These are but 5 of the handiest solutions that you could use to speed up your Magento 2 store on mobile. As you can see, the list includes nothing more than predictable “tweaks” and well-known best practices that you should stick to.

 

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 2)
Ready to compare the features of 5 other best headless CMS in 2020? We've got them ready for you to just dive in and: survey the key reasons why you'd choose one over the other discover each one's main use cases narrow down your options … and pick the one that matches your requirements. What Is the Best Headless CMS in 2020? 5.6. Directus An open source tool for managing and delivering content across an entire network of platforms and devices. And here are some of the top reasons for choosing Directus: it provides your editorial team with an easy to use admin app for managing content it can be in the cloud or self-hosted it provides API for your development team to fetch content 5.7. Netlify CMS  One of your top 10 headless CMS options, an open source one, that you get to add to any static site generator of your choice. A React single-page application that provides you with an easy to use UI, playing the role of a… wrapper for your Git Workflow. Basically, when using Netlify CMS your content gets stored in your web app's git repository (as markdown files), close to your codebase.   "How does a Netlify CMS Gatsby setup work?"   It's pretty straightforward: You enter your content via that user-friendly interface, then Gatsby uses it to come up with the right pages for your web app. Why would you use it? it fits both large and small-sized projects, with fewer pages to create, to add content to, to edit, and to manage you get to review/preview your content and make changes in real-time, and even control entries status in editorial workflow mode it provides you with an easy-to-use UI, with just 3 tabs: workflow, media, and content you're free to use it with any static site generator you get to extend its functionality: add your own UI widgets, editor plugins, customized previews, etc. 5.8. GraphCMS     An API-first content management system, a GraphQL-native one, that allows you to distribute content across multiple digital platforms. And not just anyhow, but… within minutes. Your developer team gets to create content APIs in no time, whereas your content team gets all the tools they need for a smooth editor experience.   Source: capterra.com GraphCMS vs Contentful: Main Differences GraphCMS works best for enterprise and mid-market companies, enabling them to build highly scalable applications GraphQL is its underlying technology: an open source query language for APIs, that's been growing more and more popular among developers Contentful targets top global brands, helping them distribute digital content experiences across complex networks of markets and channels REST is its underlying technology: a programming paradigm for distributed systems And here are 2 good reasons for choosing GraphCMS as your go-to headless content management system:  you get a CMS that's client-side and JAMstack compatible you get to tap into the benefits of a JAMstack approach to development (JavaScript &amp; Markup &amp; API) 5.9. Cosmic A cloud-hosted headless content management system that provides you with both GraphQL and REST APIs. But what makes Cosmic one of the best headless CMS in 2020? Why choose the Cosmic Headless CMS?  it ships with features like content modeling, media management, localization, and webhooks it grants you a smooth editor experience with its WYSIWYG  editor, that you can use to incorporate (by embedding code) third-party services like Typeform and GitHub. it integrates smoothly with AWS, Slack, Algolia, Stripe, HubSpot 5.10. Kentico Kontent A cloud-based content delivery API that turns your structured content into content that's easy to be "consumed" by any device or digital platform that you might use as a front-end delivery layer.  Why would you choose it over other great options of headless CMS? you get an AI chatbot when using Kentico Kontent it provides webhooks and custom elements that make third-party integrations a lot smoother you get content management API enabling content consumption And we've come to… the END of the list of 10 best headless CMS in 2020. Which one checks the most features off your list? Now, if you're facing a "Headless Drupal 8 vs Contentful" dilemma, we're here to: help you identify the one that works best for your business and your requirements make your headless CMS-based project work Just drop us a line!   Image by tdfugere from Pixabay   ... Read more
Adriana Cacoveanu / Sep 26'2020
10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 1)
Overwhelmed with options? Are you building your first (e-commerce) headless CMS and you don't know what headless CMS platform to choose?  What are the best headless CMS in 2020, so you can at least narrow down your choices and start... somewhere? Which system matches most of your feature requirements? Here's a top 10: 1. But First: What Is a Headless CMS, More Precisely? Relax, I won't bore you with too many details — we already have an in-depth post on the differences between headless and traditional CMS. So, if we were to sum up the concept in just a few words, we could say that: A headless content management system is an architecture where content is separated from the presentation layer (the client-side front-end). Meaning that you get to create, store, and edit "raw" content (with no design or layout) in the backend and deliver it wherever needed —wearable, mobile app, website — via API. In short, what you get in a headless architecture is: a database to store your content in a dashboard for editing your content Source: Zesty.io As for the "head" that serves your content to the end-user : you're free to build your own front-end, from the ground up … and even multiple front-ends, if needed, that will all use calls from the API to retrieve and display content 2. … Then What's a Decoupled CMS? Headless CMS vs decoupled CMS: what's the difference? And why headless over decoupled? The role that the API plays… That's what makes the difference (and why you'd want to go for a headless approach): If, in a decoupled architecture, the API plays the role of an intermediary between back-end and front end, in a headless architecture the API can be used by any of the front-end portions for pulling data. In other words, a decoupled CMS does come with a built-in front-end delivery layer, that you can rely on, but a headless approach is an API-driven content repository. Which gives you more flexibility for delivering content to any type of display layer. … to multiple "heads". You're free to distribute it wherever it needs to get displayed. 3. Why Choose a Headless CMS? Top 9 Benefits Before I "divulge" the best headless CMS in 2020 to you, here's a shortlist of the key advantages of using a headless CMS software: you get to engage your customers with personalized content across an entire network of digital channels, at different stages in their journey you can deliver richer digital experience, tailored to each channel you gain platform independence you're free to choose your technology of choice you benefit from cross-platform support you get to manage your content from a central location and distribute it to multiple platforms/IoT-connected devices, in a universal format you're free to manage all your platforms from one interface your development team gets to choose the development framework of their choice, integrate new technologies and, overall… innovate you're free to redesign as often as you need to, without the dread of re-implementing your entire CMS from the ground up     4. … And When Should You Use It? 5 Best Use Cases  How do you know for sure that you need to adopt this approach? You know it because your scenario describes one of the following use cases for headless CMS: you're building a site using a technology you're familiar with you're building a website with a static site generator you're building a JS-based website or web app you're building a native mobile app you're building an e-commerce site and you know that the commerce platform you're using won't… cut the mustard as a CMS; or you need to enrich product info in your online store 5. What Are the Best Headless CMS in 2020? Top 10 "Which CMS should I use?" you wonder. "The one that meets most of your requirements…" So, you should start by pinning them down. What features are you looking for in a CMS? Maybe you need a system that should: be straightforward and easy to use for the marketers/non-technical people in your team be built on… Node be highly customizable and editable for your content team to be able to change overlay text, logo, background video/image be simple to set up integrate easily with Gatsby support multi-site setups not be tied up to (just) one specific database provide ease of content entry and rich-text support provide a granular permission system provide native support for content types What are the features that your project couldn't live without? Now, with that list of "mandatory" features at hand, just drill down through your top headless CMS options in 2020. Here they are: 5.1. Storyblok A purely headless CMS that ships with a visual editor, as well. Why would you go for Storyblok? What makes it one of the best headless CMS in 2020? it provides the experience of a page builder for all those non-technical users in your team: editors get to manage content via a more user-friendly interface it grants your developers easy access to the APIs they need 5.2. Prismic Its major selling point? It allows you to choose your own language, framework, technology… And these are the 3 good reasons to go with Prismic as your headless CMS: it allows you to model your content schema and to add your content you're free to choose whatever framework that meets your feature needs: React, Vue, Next, Nuxt, Node, Gatsby… you're free to choose either GraphQL or RESTful API to query content 5.3. Drupal 8 Headless CMS   Another great option is to exploit Drupal's headless capabilities and pair them with the JavaScript framework of your choice. Here are some of the best reasons why you'd use a Drupal 8 API-first architecture: Drupal's a mature and enterprise-level headless solution backed by a wide community, used by more than 1 million sites globally; you get to tap into its massive module collection and even create new custom ones to extend your website's functionality its JSON:API follows the JSON:API specification; developers in your team can start using the API even if they're not experts in working with Drupal you get to load your GraphQl schemas straight from your Drupal content repository; there's a specialized module for this: the GraphQL module you get to use all of  Drupal's famed features (granular access to content, processes, workflows, modules, etc.) right away; you get them out-of-the-box since the REST API is… rooted deep into Drupal 5.4. Strapi, One of the Best headless CMS for Gatsby. It's an open-source Node.js headless CMS, a "host it yourself" one, that allows you to build Node.js apps in… minutes. Why would you use it? because it generates available RESTful API or uses GraphQL shortly after installation, making data available via customizable API because it allows your developers to invest all their resources in writing reusable app logic (instead of having to use some of that time to build an infrastructure) because it's fully JavaScript because it supports plugins that extend the platform's functionality because it's open-source: you'll find the entire codebase on GitHub  5.5. Contentful  Looking for a platform-agnostic solution? A… content delivery network that would enable your development team to manage and distribute (and reuse) content to multiple channels? Then this is the API-driven headless CMS you're looking for. Here are 6 other reasons why you'd want to put Contentful on your shortlist: consistent APIs easy to set up you're free to create your own models easy to use: ships with a robust, non-technical, user-friendly UI you get to add custom plugins quick and easy you get to set your own schemas to get displayed the way you want them to, across different apps Good to know! There's even a Shopify extension available. What it does is connect your online store to your content, stored in Contentful. And if you'll need help with building, fine-tuning, and integrating your content hub, we're ready to tweak Contentful to your needs.  END of Part 1! Stay tuned, for there are 5 more candidates for the title of "the best headless CMS in 2020" waiting in line.  Image by Couleur from Pixabay ... Read more
Adriana Cacoveanu / Sep 25'2020
Magento vs Shopify 2020: Which Platform Should You Use for Your eCommerce Store? And Why?
A bit stuck? Are you looking to roll out your online store, but… you’re struggling with a Magento vs Shopify 2020 dilemma? Which solution works best for the size and the type of your eCommerce business? Which one covers most of your feature needs? In today’s post you’ll get your answers to the following questions: How are they different? Why would you choose Shopify over Magento? What are its strongest selling points? What are the cons of Shopify? What are the pros and cons of Magento vs Shopify? Which eCommerce platform works best for your type of business? 1. What Are the Major Differences Between Magento and Shopify? The main reason why you’re torn between Magento and Shopify is that: You don’t have a clear picture of the essential differences between them. So, let me expose them to you: 1.1. Magento is an eCommerce solution for enterprise-level online stores. It’s robust and flexible enough to power fully customized eCommerce websites, built from scratch — that you can further expand to fit your growth plan — by teams of Magento developers. 1.2. Shopify, on the other hand, is self-managed.  You don’t need any specialized skills — or server-side techs — to set up a Shopify store.  A front-end developer and a designer, at most, will do. “How easy is it to use Shopify?” Shopify is best-known for being beginner-friendly.  In short, the “Magento vs Shopify” dilemma comes down to: Flexibility and customization vs Ease of use. Which one's more important to you? 2. Magento vs Shopify 2020: Why Would You Choose Shopify? What makes Shopify a candidate for the title of “the best solution for creating an eCommerce website in 2020"? Here’s why Shopify could be the better choice for your online store: you have no (or limited) coding skills the idea of having a huge app marketplace at your disposal to browse through sounds tempting to you you need to get your e-Store up and running… now: the drag-and-drop website builder allows you to set up a new store in… minutes it’s an end-to-end eCommerce solution that you’re looking for, one that enables you to roll out and manage your online store with no technical experience it’s easier to use: its interface is famous for being particularly user-friendly you run a small or medium-sized eCommerce business page loading time is critical for you: Shopify’s just… fast Overall, it’s much less of a headache than Magento and usually the go-to option for small eCommerce business owners, with no web development experience, who need to get their websites rolled out fast. 3. What Are the Cons of Shopify? What could make you hesitate to choose Shopify for your eCommerce website? For there are, indeed, some limitations to consider before going for this particular platform:   You’d be trading some of the control over your online store for… ease of use and the convenience of setting up your eStore quick and easy, with no technical expertise   You do get a huge collection of plugins to choose from but… they all come with a price tag on; one that you’ll need to consider when planning out your budget   You won’t be able to customize every single aspect of your website. By comparison, Magento puts no limitation on the configurations that you can make to your site   Shopify provides you with weaker SEO features   It charges a transaction fee per… sale   4. Why Would You Choose Magento over Shopify? When dealing with a Magento vs Shopify 2020 dilemma, what could make you opt for Magento? Lots of reasons... Here are the strongest ones:   It enables you (or your team of Magento developers in Toronto) to customize everything about your eCommerce website, from theme to checkout process, to main menu, to email template, to...   You get to build custom functionality for your website, that’s not available on the market   You have lots of extensions available to choose from — Magento being open-sourced — and to customize your online store   You benefit from its strong SEO capabilities   You get to tap into its multi-store functionality: Magento enables you to manage all your online stores from one central dashboard   “In fact, according to eCommerce Platforms research Magento SEO scores 95 out of 100, and that is great result!” (source: Cart2Cart ) In short, you’d want to go with Magento because it enables you to build pretty much anything that you might need for your eCommerce website. 5. What About the Cons of Using Magento? For you need to be aware of the disadvantages of using this eCommerce solution, as well, before you make any decision. Now, here are the most… discouraging ones:   Building a fully customized website in Magento takes time and requires web development experience and Magento expertise; you can’t get away without a team of back-end Magento developers to handle the whole process and all the customization wok   You do have a large and thriving community to rely on, but no 24/7 dedicated support (like you have with Shopify)   You’ll need to optimize your Magento website on a regular basis to make sure it keeps performing at its best   You’ll need to take into account the cost of all the extensions that you might want to add, of the web hosting service, and the Magento expertise needed   6. Magento 2 vs Shopify vs... Shopify Plus: Which One’s the Best Fit? Considering that, starting June 2020, Magento 1.0 is no longer supported, your Magento vs Shopify 2020 dilemma turns into: “Magento 2 vs Shopify”. What new features does Magento 2 bring to the debate? simplified navigation (even) better customization capabilities better performance a more admin-friendly panel drag-and-drop layout editing improved checkout  “And what about Shopify Plus?” you might then ask yourself. Here are some of the enhancements that Shopify Plus ships with, so you can see for yourself whether it’s the best fit for what you’re looking for:   It gives you greater control over your online store: you gain more customization freedom   It’s robust enough to handle more than 10,000 transactions per minute, which makes it a viable alternative to Magento 2 for enterprise-level eCommerce businesses   You’re free to edit your checkout page (a feature that’s not available in Shopify)   You get your own launch manager: basically, a dedicated Shopify Plus team will handle everything for you, from implementing the custom Shopify theme that you need to code writing   7. Which Commerce Platform Works Better for Your Type of eCommerce Business? Now that you have a clear(er) picture of the pros and cons of Magento vs Shopify, how do you know which one’s the best fit for you? For your business goals and size? It’s simple: just pick the answer(s) that best fits your scenario from the following ones: You’ll want to use Magento if: you have a large product catalog your customization  needs are… above the average (i.e. complex product configurations): you want a fully customized online store built from the ground up you need a commerce platform robust enough to support your entire network of vendor/supplier fulfillment channels you have qualified Magento developers in your team (or the budget to hire some professionals, who know what they’re doing) You’ll want to use Shopify over Magento in 2020 if: it’s a small to medium product catalog that you need to set up being able to integrate/cross-sell on multiple platforms is a crucial feature for you you need to get your storefront online as quickly as possible Does this head-to-head help you with your Magento vs Shopify 2020 dilemma?  No matter which one’s the “winner”, the next question stays the same: “How do I get my Shopify/ Magento website built and suited to my needs?" Just drop us a line and we’ll have either our Shopify or our Magento expert team assigned to your eCommerce project! Image by Photo Mix from Pixabay  ... Read more
Adriana Cacoveanu / Sep 18'2020