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

The Complete Website UX Audit Checklist for 2020: 12 Steps to Uncover Usability Issues on Your Site
Users come to your website. They start the checkout process and... leave. Why is that? Is there a "best practice" process to identify the pain points in the user journey? A website UX audit checklist that you could use? And how would you know: what to include in your audit? what pages to review? how to interpret all the collected data and turn it into actionable insights? You've got the questions, we've got the answers. And we've included them all in an 11-point checklist to run whenever you want to assess the user experience on your website: What Is a UX Audit More Precisely? Source: process.st Let's go back to the example above: You notice that visitors on your website keep abandoning their shopping cart.  In this case, a website UX audit might uncover specific flaws in the customer journey responsible for this low conversion rate: confusing navigation structure cluttered screens a too complicated checkout process an inconsistent visual style across pages not enough payment options In other words: A UX audit helps you identify all those usability challenges with a direct impact on users' experience. key elements on your website that are too hard to find ... or too hard to use the workflow users are to perform is not that obvious and intuitive And it helps you find your answers to legitimate questions like: What is working and what isn't? What metrics are your collecting and what metrics should you be collecting? What does the gathered data tell you about your website users' needs? Why do they behave the way they do and how might they behave once you've taken follow-up action? In short: a UX audit provides you with those metrics which, once turned into updates to your website, help you boost conversions. Step 1: Run Stakeholder Interviews and User Surveys Start off by talking to your: development team, the one in charge with all the UX improvements on your website; ask them about their development challenges, future plans with the company website, and specific requirements for achieving those plans marketing team and salespeople, who might already have their own user survey results collected along the years Then, run your own updated user surveys and categorize results by: task severity findings per screen  Tip! Run usability tests to filter through the qualitative data collected on these interviews and surveys. For instance, users might report a discouragingly complex checkout process. A usability test will confirm or disprove this claim. Step 2: Create Your User Persona- A Key Point in the Website UX Audit Checklist Who are you improving your website UX for? And there are different types of users visiting your website and each user type stands for a unique way that you could improve the user experience delivered there. To narrow down your options, you need to figure out who's the most representative user for your website.  Remember to add these 3 key attributes to your user persona as you're building its profile: user goals: do they align with your business goals? needs: what does he/she try to accomplish when visiting your website? frustrations: things to avoid when designing this user persona's experience on your website Tip! Bring your business goals (that we'll be focusing on at Step 3) into the picture, as they'll help you determine who your user persona is. Also, while at this stage in your UX audit, answer these 3 crucial questions: what are your visitors' demographics and behaviors on your website where do they come from to your site? are current visitors also your target users? Step 3: Get Specific with Your Business Goals  Let me guess: Your business goals tied to your website are related to conversions and revenue. At this step of the audit, you'll want to clearly define those goals that a better UX can directly impact. Once you've defined your business goals, include these key questions into your website UX audit checklist: What's my business goal? What's the key user goal? What actions do I want users to perform on my website? What are the top brand values that I want to communicate to my website visitors? What are my key sales channels? Who are my top competitors? Step 4: Perform a Cognitive Walkthrough of Your Website  ... to see things through the visitors' eyes. Try to perform those actions that users come to your website for. And stay vigilant to detect any obstacles that might stop you or slow you down when trying to achieve your "user" goals. Tip! Since you already know all too well how your website works, base the whole process on established criteria. This way, you can keep your focus on those user goals. Step 5: Dive Deep into Your Data Analytics Your website analytics reports make some great insights into how great or... less than great the user experience delivered on your site is. Use it to "fuel" your UX audit with, as it'll provide you with key information on: conversion or cart abandonment what visitors were doing before accessing your website (most common entry points to your website) specific user flows on your site traffic metrics hotspots on your website Tip! Filter your data analytics by specific segments and timeframes.  Source: uxbooth.com Supplement the valuable data that you get from Google Analytics with reports provided by tools like: Kissmetrics Hotjar Crazy Egg Step 6: Determine Your Conversion Rate Performance Is your website an eCommerce one? Then you'll want to take a close look at your sales and download figures as you try to improve your site with a UX audit. Figure out how well your website copy supports the overall user experience and whether your website meets visitors' pain points. Step 7: Identify Your Highest Converting Pages Another crucial point to add to your website UX audit checklist. Why? Because the pages with the highest conversion rate give you an insight into what UX is doing right on your website. They stand for some successful customer journeys that you'll want to get inspired by and... replicate on other pages on your site, as well. Step 8: List Your High-Traffic Pages with a High Bounce Rate "How to perform a UX audit?" One of the essential tasks to add to your "To Do" list is identifying those high-converting pages with a high bounce rate (above 70%). Step 9: Identify Strong Points and... Pain Points in the User Journey Where does the user step off the intended path? Why is he/she failing to take action? It's the strong points in the customer journey (those high-converting pages that you've listed at Step 7 are the best places to look for them) that'll provide you with the best solutions for fixing the weak points identified at this step. Step 10: Take a Close Look at Your Site Layout Your website layout is directly "responsible" for a great deal of the user experience delivered on your website.  So, at this point in your website UX audit checklist you'll want to check specific aspects of your site layout with a direct impact on the visitors' experience: Does it manage to meet visitors' needs? Is your website navigation intuitive enough and easy to use? Is your on-site search accessible enough? Is your website copy in line with the user journey? Step 11: Run a Competitive Analysis How will this help you? You identify your target customers' expectations when interacting with websites similar to yours. That sell the same type of products or services. What's those sites' traffic compared to yours? How usable are they? How well do they rank in the search engine results page? Seize any opportunities that your competitors might have missed. Or get inspired by what they do great in terms of user experience and... do it better on your own company website. Step 12: Organize Your Findings Into a UX Audit Report And use categories like: major usability issues A/B test suggestions challenges predicted impact ... to sort and group your results. 3 Tips to Keep in Mind When Conducting Your UX Audit I've saved 3 best practices for last. Apply them to streamline the whole process and to future-proof your findings. Group all your findings into buckets. It'll bet easier for you (and your team) to interpret your findings when you group them into categories (e.g. the "website navigation UX issues" category) Take screenshots of all the issues found. In other words: screenshot everything! It's the easiest and most effective way to document every aspect (web page, interaction, etc.) of your website with a direct impact on the user experience. Look for trends. Use your spreadsheets of UX findings to identify... patterns. Are there any common conventions and structures that visitors expect to find on your website? That they're already familiar with?   The END! I think I know what you're thinking right now: "But taking all the steps included in your website UX audit checklist takes... ages! And during all this time I'd have to put my team's projects on... hold." Not if you pass on the audit "burden" to us. Just drop us a line and let's uncover all the opportunities for UX optimization on your website! Image by Mudassar Iqbal from Pixabay     ... Read more
Adriana Cacoveanu / Jul 01'2020
How to Improve Internal Site Search and Boost Your Conversion Rate in 12 Easy Steps
They're not there for the looks, you know. Users come to your website to search for... something — a product, a service, information. Its role is to make it easy for them to find that "something" via its search engine. But how to improve internal site search and "shorten the time between query to conversion"? What are some best practices when adding search functionality to your website so that: it serves up the most relevant search results? it reduces user-friction? it provides the best search experience? it helps users to convert faster? Here's your 13-step checklist to an effective on-site search: Why Site Search Is Important?   "Adding on-site search to your website increases conversions by 480%!" (Neil Patel).  Just think about it: The user's found your website (your SEO efforts have paid off). It's something specific that he's looking. Or he at least has some idea of the type of products/services that he's there for. Now, why would you want to make him go over... 5 different pages of results before he reaches that service/product page that he was looking for in the first place? Instead, your website's search engine should help him out with: search suggestions autofills real-time preview of search results Like Office Depot here, whose on-site search engine gave me plenty of search suggestions when I looked for a "chair": Step 1: Put It Front and Center One of the powerful internal site search best practices. But also the most ignored one. Don't be that website owner. Instead, put your search box where users can see it the instant they get on the web page: besides the navigation right below the navigation, as a distinctive element above the navigation in the header Take Zara's example here: how long does it take you to find the search box on this page? Step 2: How to improve internal site search: Make It Easier to Navigate  And what better example than Google's Search Engine itself? You just can't miss it on the page. Moreover, search results are grouped into different categories — images, videos, news — lifting some of the burdens off your shoulders as an online "searcher". It'll even turn your misspelled search queries... Key takeaways: consider using tabs by categories to make the user search experience as breezy possible make the most of keyword matches ... and assistive technologies It's all about shortening the time from the user's query to... conversion, remember? Step 3: Boost Your Site Search Engine with Product Metadata "How to improve search functionality?" By forgetting all about the "meta tags have no impact on SEO" principle and starting to add relevant product metadata. For yes, they do not count for traditional search engines, yet they have a huge impact on the way that your on-site search engine finds any product in your inventory. So "feed" it metadata: titles, tags, attributes, categories, descriptions, specific keywords that your target customers will enter... Step 4: Cater to All Kinds of Searches There'll be users who know exactly what they need. So they'll be typing the exact product/serial number in the search box. And there'll be users who have heard of an innovative, newly launched product in passing and will misspell its name. Make sure your on-site search will serve up relevant results for both types of user profiles: turn the product/serial number into a search criterion make sure your on-site search turns relevant results on "misspelled queries", as well  Step 5: "Fuel" Your Internal Search Engine with Long-Tail Keywords   "How to improve internal site search?" By optimizing your website copy for long-tail keywords (3-5 words). The more you use, the more power you'll inject into your search engine. Let's take this example: You go to Office Depot's website looking for an office chair. Chances are that you're trying to find something more specific than a "chair". You want it to be... grey, ergonomic, made of leather or mesh. You get the idea. You're not looking for a generic "office chair".  Now, switch from your role of potential customer to that of an online owner and start optimizing your website copy for long-tail keywords. They still have most of the search volume. Step 6: Give Users Multiple Filtering Options via Faceting  Add multiple categories to help users filter through generic query results.  This way, you enable them to make their way to more specific results. This internal site search "best practices" becomes a must-have if it's an: eCommerce website with a large inventory ... that you have. A customer won't spend half a day looking for a "green cotton t-shirt for girls size XS", digging through dozens of result pages. Take H&amp;M's example here: they're using faceted search options to help me narrow down my options when I type a generic query like "shirt". Step 7: Tailor the Search Experience As Per the User's Location "How to improve internal site search?" Localize your website content. Or, in plain English: add regional dialect and idioms to your copy. And you'd also want to include "popular searches in your... (name of the region)". The whole idea is to: personalize the search experience, making it more user-friendly help the user find what he's searching for faster (and to convert faster, as well) Even if he's using a dialect-specific word or phrase as a search query. So, start building a list of synonyms for your search queries and use them to improve the search functionality on your website. Step 8: Implement In-Search Filtering Go beyond autocomplete if you want to provide the best search experience to your potential customers. In this respect, advanced in-search filtering is one of the most powerful on-site search features. Take this example: Someone enters "sneakers" in your search box. You'd want to give him/her more search options, more specific suggestions like "sneakers in men's clothes" or "sneakers on sale"... Again, a must-have on-site search feature if it's a large eCommerce website that you have. Step 9: Add Informational Content, As Well Not everyone on your website is there to buy something from you.  Some of them are looking for specific information on your products. So, another effective way of improving search functionality on your site is to you ensure there's enough info-rich content for these users to dig into. Step 10: Serve Targeted Search Results Based on User Behavior Data Here's another answer to your "How to improve internal site search?": Make the most of previous user behaviour to serve targeted search suggestions. Rely on users' profile log information to: identify distinctive patterns and tailor your recommendations accordingly identify regional phrases (e.g. "soda" instead of "coke") and use them to personalize your suggestions Step 11: Give Users More Control Over the On-Site Search Results How? By giving them: categories to filter through their search results drop-down menus brand names that they could use as search criteria a personal search results page where they can keep track of their past activity and use quick search options based on their past behavior Step 12: Serve Relevant FAQs on Every Search Another effective and easy way to optimize search function on your site is to display FAQS at the end of each search This way, users get more information about the product features/price/specific fees/brand that they're interested in. Tailor these lists of questions to the user's past behavior and query data and turn personalization into your most powerful ally. The END! Maybe you do want to increase the conversion rate on your website, but without having to: optimize heavy of loads content for long-tail keywords get tangled up in user data to track down all the regional words variations  write metadata for... hundreds of different product pages We get you. And we've got your back. Just drop us a line and let's improve your on-site search so that you stop leaving conversions on the table. ... Read more
Adriana Cacoveanu / Jun 26'2020
Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 2
"How can I make my Drupal 8 website faster?" Are you still struggling with this? Still striving to figure out which are the best (and most straightforward) Drupal performance optimization techniques for your website? Well, here I am today with a handful of 9 more ways that you can speed up your Drupal site. In addition to the 8 ones that I covered in the first part of this post. And yes: it's another round of Drupal caching best practices that'll help you boost your page load time. So, let's dive right into it: Tip #9: Use the Dynamic Page Cache Module  ... to cache for both authenticated and anonymous users. Unlike the Internal Page Cache module, that I mentioned in Part 1, which only caches pages for anonymous users. Tip #10: Use Distributed Cache, A Highly Effective Drupal Performance Optimization Technique But how does it work, more precisely? Once you've installed a distributed cache, it'll store your database's cache tables (Drupal's "cache_" tables) either in: file or memory Tip #11: Enable Drupal Cache for Anonymous Users Another one of those quick, yet powerful Drupal performance tuning steps that you can take. Tip #12: Use Squid to Cache Images and Static Content on Your Website "How to optimize Drupal for better performance?" You could go for Squid, an open-source caching proxy server. Now, since Drupal's already famed for its particularly dynamic content, the only cases where Squid does make a great performance booster are those where you need to cache static content. Tip #13: Add a Front-End Cache (i.e.Varnish Cache) Here's another handy Drupal performance optimization method for you: Use Varnish Cache to reduce the load on your server. How does it do it? It stores the HTML response, so that next time that the same page is requested, it serves it from memory. The result? Bypassed PHP and web server and... improved page load time. Tip #14: Use the Advanced CSS/JS Aggregation Module to Improve the Front-End Performance of Your Website  Combining your assets together is one of the most straightforward and effective ways to address those Drupal performance issues on your website. From: file grouping to caching to compressing ... the AdvAgg module handles all the steps that you need to take to aggregate your CSS and JS files. Tip #15: Install Memcache to Reduce Your Database Load You know how you're often struggling with keeping your database load to a minimum by caching database objects in RAM? In this respect, Memcache makes a great Drupal 8 performance optimization technique. It helps you reduce that load on the database and boost your page loading time. How? By taking standard caches out of the database. And by caching the results of resource-intensive database operations... Tip #16: Use the Entity Cache Module to Cache... Entities   Another caching best practice to boost Drupal 8 with is installing the Entity Cache module.  And its name says it all: it helps you cache entities. Tip #17: Cache Views  Here's the situation: Page requests made by registered users on your website lead to loads of queries to your database. Which impact the page load time. Now, to query the database, views are being used. And this is where this views caching module comes in handy to... boost things in there.   The END! These are our 17 recommendations for you on the best Drupal performance optimization methods for boosting your page load time. Not thrilled about the idea of having to go through the... Memcache installation process or to configure Varnish for Drupal? Or to put your current projects on hold so that your team can set up a... distributed cache? Maybe you don't have a professional Drupal maintenance team that could handle all these caching settings? We're here to help! Just drop us a line and let's figure out which of these 17 techniques are best suited for your website and the specific performance issues that it's struggling with. Let's speed things up in there! Image by Izwar Muis from Pixabay   ... Read more
Silviu Serdaru / Jun 23'2020