OPTASY: Drupal Web Development Agency Toronto
(416) 243-2431Drupal SupportRequest A QuoteQuote

Main navigation

  • Home
  • Services
    • Digital Strategy
    • Design
    • Web Development
      • Drupal
      • WordPress
      • Magento
      • Laravel
      • Shopify
      • Sharepoint
      • Contentful
      • Gatsby
      • Next.js
      • Node.js
      • React
      • AngularJS
    • Mobile & App
      • IOS
      • Android
      • Augmented Reality
      • Artificial Intelligence
      • Virtual Reality
    • Maintenance & Support
      • Drupal Maintenance
      • Wordpress Maintenance
    • Staff Augmentation
  • Portfolio
    • Web
    • Mobile
    • Ar
  • About
    • Who we are
    • Values
    • Events
    • Awards
    • News
    • Careers
    • Partners
      • Acquia
      • Google
      • Pantheon
      • Shopify
      • Wordpress
  • Blog
    • Drupal
    • Drupal 8
    • HTML
    • CSS
    • Javascript
    • PHP
    • Microsoft
    • Web Design
    • Design
    • Tips
    • News
  • Contact
(416) 243-2431 Drupal Support Request A QuoteQuote

In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, 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
Tips

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.

 

Share the article

Development

We do Web development

Go to our Web development page!

Visit page!

Do you want a website

or app developed?

 

Get a Free Quote

and let's make it work!

Get a Quote

Recommended Stories

DrupalDrupal 8NewsTips
Drupal 10 New Features and How to Prepare Your Migration

Drupal 10 New Features and How to Prepare Your Migration

  Drupal is a free and open-source content management system that allows you to create websites with a simple interface, but it has many powerful features for more advanced users. Drupal is being used by millions of people worldwide and many businesses and institutions like Harvard, Twitter, or Whole Foods.  The first version of Drupal was released on January 15, 2001, more than twenty years ago.  Drupal 10 is expected to be released in December 2022. It will be a refined version of Drupal 9 and it will include many new features, including: Symfony 6 compatibility. Site owners and module developers will benefit from as much Symfony 6 compatibility as possible and Symfony 4 deprecations in Drupal 9 for Symfony 5 will be resolved. Supported solutions for rebuilding jQuery UI functionality by using either vanilla JavaScript or frameworks like React. jQuery UI components used by Drupal core will be removed. Best practices for deprecating modules. Users will be able to use a proper mechanism for naming, versioning, deprecating wrappers, etc. A 'lifecycle' - property can be used in info.yml files for themes and modules. Better decoupled developer and site builder experiences, especially for menu and URL handling. Introduction of CKEditor 5 with better authoring experience and more modern editing (replacing CKEditor 4). PHP 8.1 compatibility for Drupal 9 and Drupal 10.  Theme Starterkit tools for bespoke theme creation.     How to prepare for Drupal 10 The following are steps that you should take before upgrading your existing sites to Drupal 10. Upgrade all modules on your current site to their latest versions. If you have not already done so, upgrade core to its latest release. You can do this by running drush up --all from within your Drupal root directory. Perform a full backup of your site. This includes database backups as well as files and folders outside of the Drupal installation directory. Update your site's configuration file. The easiest way to do this is to download the Configuration Upgrade Module module and run it against your site. To do this, go toUpdate your themes and modules to the most recent versions available. In particular, update any custom modules or themes you use to their latest releases. Will the upgrade to Drupal 10 be easy? New functionality for Drupal 10 is added to Drupal 9 releases, meaning module developers can start adopting new APIs right away. Old functionality is removed, but backward compatibility is kept. Once we are ready for Drupal 10, we remove deprecated code, breaking backward compatibility, but because developers had a chance to update their modules, the upgrade to Drupal 10 should be easy. More exactly, Drupal 10 is identical with Drupal 9, except for its deprecation list. There shouldn't be any big or unexpected changes. What are the Drupal 10 platform requirements so far? PHP requirements: At least PHP 8.0.2 and PHP 8.1 is recommended.  PHP 8.0 is being dropped after November 2023, but security patches for PHP 8 will continue to be provided by other organizations. Some of Drupal's Composer dependency packages might start dropping support for PHP 8 after November 2023. Database server requirements: Check out the Database server requirements documentation.  Web server requirements:  They are the same as for Drupal 9. If you need additional support for preparing your migration to Drupal 10, our experienced team of Drupal experts can provide step-by-step assistance. Learn more about our Drupal services today!    Photo credit: Unsplash. ... Read more
Raluca Olariu / May 25'2022
DrupalDrupal 8Tips
Acquia Maintenance Services for Drupal Enterprise

Acquia Maintenance Services for Drupal Enterprise

  Acquia Cloud Enterprise is a fully managed cloud service that provides the infrastructure, tools, and services to run your site on the Acquia Platform. Acquia for Drupal Enterprise is an enterprise-ready version of Acquia's award-winning platform for building and running websites with Drupal 8. It includes all of the features you need to build, manage, and scale a modern website. It also comes with preconfigured modules, themes, and other content so you can get started quickly. What makes Acquia the right Drupal hosting provider? Acquia Cloud Platform offers secure and compliant web hosting services built exclusively for Drupal. You can use them to host your site and develop your content using Drupal 8, Drupal 7, or any other version of Drupal. They offer fully managed Drupal hosting, as well as a range of development tools. Their enterprise-grade security features include SSL certificates and access control lists (ACLs). They also provide world-class customer service. The following are some of the key benefits of choosing Acquia: Fully managed hosting - No servers to install, configure, maintain, upgrade, patch, or monitor. All you have to do is deploy Drupal. Focus on innovation - Having a fully managed Drupal hosting solution allows you to create digital experiences that focus on what matters most: the customer. Highly scalable - Acquia’s cloud architecture scales from small sites to large global deployments. Built for performance - Acquia has built its hardware and software solutions to ensure that your site performs at peak levels. Streamline compliance - Compliance requirements such as GDPR, PCI DSS, HIPAA, and more are easily met through Acquia’s robust data protection practices.   Top features of Acquia web hosting for Drupal Drupal 8 support. Acquia supports Drupal 8 out of the box. This means you can start developing and deploying your next great project immediately. Built-in security. Acquia includes strong authentication and firewall controls. Robust developer tools that provide automated testing for development, staging, and production environments.  Real-time monitoring tools (Acquia Insight) that measure and report on application health. Add-ons. Acquia offers hundreds of add-on modules and themes to help you customize and deliver cutting-edge experiences. Best Practices for Acquia Setup &amp; Maintenance  In order to optimize the performance and functionality of your site, we recommend the following best practices when setting up and maintaining your site on Acquia. Set up the environment before starting work. The first step in getting started with Acquia is creating an account and installing Drupal. Once your site is live, it’s important to keep it running smoothly by regularly updating core, contributed modules, and third-party extensions. Use the Acquia Dashboard. The Acquia dashboard provides a single place where you can view all of your settings, including installed modules, configuration options, and user roles. It's also where you can manage users, groups, and ACL permissions. Keep your database clean. As part of regular maintenance, make sure your database tables are properly maintained. For example, if you have many content types or custom fields, consider using the Field Permissions module to prevent orphaned records. Keep your database optimized. If you use the MySQL Query Cache feature, it will be automatically enabled. To ensure optimal performance, disable caching whenever possible. Optimize your codebase. Use the built-in Drush command line tool to perform updates and upgrades to Drupal core and other modules. Optimize your site architecture. Make sure your site has a clear separation between presentation logic and business logic. This helps separate concerns and makes it easier to maintain your site as its complexity grows. Make sure your site has a clean separation between presentation logic and data access logic. This helps separate responsibilities and makes it easier to update your site when new features are added. Test your site thoroughly. Test your site from multiple devices and browsers. You should test on mobile phones, tablets, laptops, and desktop.    FAQs about Drupal hosting How does Acquia compare to other Drupal hosts? Acquia is one of the few companies offering truly integrated Drupal hosting. The brand has combined its expertise in both technology and business management to make it easy for users to launch and grow their online presence. What is the difference between Acquia Hosting and Acquia Cloud Platform? With Acquia Hosting, customers get all the benefits of a full-featured, managed Drupal platform without having to manage servers themselves. With Acquia Cloud Platform, customers get all the advantages of a private cloud infrastructure with the convenience of a shared environment. Both options allow you to build, test, and deploy websites quickly and efficiently. Is there a free trial available for Acquia Hosting? Yes. You can try our services completely risk-free by signing up for a 30-day free trial. After the trial period ends, you will be billed $9.99 per month. Can I host my website using Acquia Hosting if I am not interested in running an enterprise-level site? Absolutely. Acquia Hosting is designed to work well with any type of website. It comes with everything you need to launch your new or existing website, including: A powerful Content Management System (CMS). An intuitive user interface. Easily scalable resources. Advanced security. Access to thousands of premium WordPress themes and plugins. Support for multiple languages and currencies   To learn more about Acquia Drupal, check out this page.          Photo credit: Unsplash.... Read more
Raluca Olariu / Apr 29'2022
DrupalDrupal 8Tips
How to Find the Best Drupal Developer for Your Needs

How to Find the Best Drupal Developer for Your Needs

  Building a robust Drupal development project that supports your business objectives can be challenging and time-consuming. But with the right Drupal partner that has the experience and expertise needed to help you build a website that will meet all of your needs, you will find this process a lot easier. This article talks about the competitive advantages of hiring Drupal developers and how you can find the best fit that meets your Drupal project needs.  The benefits of hiring Drupal developers Hiring a Drupal developer is an investment in your company's success as it provides plenty of competitive benefits that set you apart from the competition. These advantages include: Building highly-personalized Drupal projects that boost your brand awareness and increase sales. Designing and developing custom Drupal features and functionalities that suit your project requirements. Dedicated support for your Drupal project throughout its lifecycle from content migration and system integration to API design and web accessibility. Having access to ongoing updates and continuous maintenance and support. Reduced costs and increased ROI by having a dedicated team working on your project. What are some of the challenges of hiring Drupal developers? Hiring a Drupal developer or a Drupal development team may not always be easy because there are many factors involved when choosing a Drupal developer. Some of these factors include: Finding a good match between your skillset and their technical knowledge. Choosing a Drupal developer who understands your business goals and objectives. Finding a reliable Drupal partner at a price that fits your budget allowance.     How to spot the right Drupal partner for your business requirements There are several things you should consider before hiring a Drupal developer. Here are some tips to help you identify the right Drupal developer for your project: Do your research first and gain a good understanding of what a Drupal developer is and what are their responsibilities.  A Drupal developer has plenty of duties like conducting research and installing Drupal modules that best fit your needs, extending existing modules so their functionality increases, managing how your website looks and works for high-quality user experiences, migrating existing websites and content, architecting  Drupal projects and web infrastructures, etc.   Also, a Drupal developer can have three main roles that you should pay attention to: Drupal Front-End Developer. A front-end developer is responsible for designing and building the interface of your site using HTML, CSS, JavaScript, jQuery, Bootstrap, Foundation or any other framework. This includes elements such as buttons, forms, navigation menus, or tables and also includes how your page looks. Drupal Back-End Developer. A back-end developer is responsible for programming the logic behind your site's functions and processes. This includes writing code that handles database queries, creates pages, manages users, and more. Drupal Theme Developer. A theme developer is responsible for styling the look and feel of the entire website including the layout, colors, fonts, images, and anything else that makes up the overall appearance. They will work with the front-end developer to ensure that everything on the site matches and flows well together.        2. Identify and examine your project needs.  Now that you know in more detail what a Drupal developer does, it's time to understand your project needs and what you require from a developer's services. Key questions to ask at this stage are: Do you need a back-end expert or a full-stack developer? Do you only need Drupal maintenance? Do you need a whole new enterprise-grade Drupal solution? Would you like to hire a freelance developer or a contract-to-hire? Do you just have a rough idea of what you’d like him/them to develop? What type of experience do you want them to have? How much time would you be willing to spend working with them? How many hours per week would you be able to dedicate to the project?       3. Know where to look for talented Drupal developers. Top channels to consider for passive searches: job portals like LinkedIn, Monster, Glassdoor, Indeed online Drupal (or PHP) communities freelance platforms like Upwork, Toptal, Scalable Path Top channels for your active searches: social media Drupal groups local IT communities LinkedIn (when you start analyzing particular profiles on LinkedIn your passive search becomes active) Drupal.org (select the top Drupal profiles there and start evaluating them against your own requirements) developer communities like GitHub, Stack Overflow       4. Ask the right questions. Among the most important questions to ask potential Drupal partners are: How long have you been working with Drupal development solutions? What Drupal experience do you have? Are you familiar with my business model? Can you provide references? What Drupal skills do you possess? What Drupal technologies do you use?       5. Evaluate your potential Drupal partner carefully. Essential things to consider are: How experienced they are in working with different Drupal versions What their technical expertise is / How skilled they are at Drupal module development Their GitHub Profile (how much time they spent on different projects, samples of their written code, details on their contributions) Their involvement with the Drupal community What past clients say about working with them   Optasy's team of experienced Drupal developers is here to help you We are a development company and we are ready to leverage and to "fuel" your project with all that Drupal expertise that we've been gaining as a Drupal firm during these +10 years: whether it's custom module development, Drupal migration, AI implementation, or any type of new feature integration with Drupal that you need us to do. We're web developers, but with a mobile-first approach to our website development projects, in fact: we commit to helping you deliver the message to your users in an intuitive, effective, and nonetheless appealing way, on all devices.  We'll be in for the long run: our Drupal development services include 24/7/365 support &amp; ongoing maintenance, which means much more than just rolling out patches and updates; we'll ensure that your OPTASY solution (be it Drupal, Laravel, WordPress, Magento, React or Angular-based) keeps meeting your goals, that it continues to remain relevant in the context of future technology changes. From structure planning, to Drupal website development, all the way to maintenance and long-term support, we've got your back; stay assured: full-cycle projects are our specialty as a Drupal 8 agency. As a development company in Toronto we have the experience and the expertise to handle your most specific requirements:   back-end development: we design and develop the custom features and functionalities that suit your project requirements front-end development: from custom themes to user-friendly Uis, to user experience design, to designing responsive layouts content migration system integration API design and development web accessibility  website maintenance: pass over the maintenance burden on our shoulders; we provide ongoing updates and continuous maintenance and support   For more information on how our talented Drupal experts can help you build a robust project for your web development needs, contact us.    Photo credit: Unsplash.... Read more
Raluca Olariu / Jan 21'2022

Browse cities

×

Toronto

WordPress Development Services in Toronto
iOS App Development Services in Toronto
Drupal Development Services in Toronto
Magento Development Services in Toronto
Laravel Development Services in Toronto

Montreal

WordPress Development Services in Montreal
iOS App Development Services in Montreal
Laravel Development Services in Montreal
Drupal Development Services in Montreal
Magento Development Services in Montreal

Vancouver

Magento Development Services in Vancouver
iOS App Development Services in Vancouver
Drupal Development Services in Vancouver
WordPress Development Services in Vancouver
Laravel Development Services in Vancouver

New York

WordPress Development Services in New York
Laravel Development Services in New York
iOS App Development Services in New York
Drupal Development Services in New York
Magento Development Services in New York

Need a new Project?

Dare us to shape and boost your idea(s)!

Start a Project

(416) 243-2431

Contact

(416) 243-2431

contact@optasy.com

Toronto Downtown

First Canadian Place,
100 King St. W. Suite 5700, Toronto

Toronto West

2275 Upper Middle
Rd. E, Suite 101
Toronto

New York

1177 Avenue of the
Americas, 5th Floor,
New York

Newsletter

Get the latest OPTASY news, tips and how-to’s on the go, right in your inbox!
OPTASY
clutch
Pantheon Premier Partner
  • Drupal 8
  • Services
  • Contact Us
  • Partners

  • Drupal
  • Google
  • Magento
  • Shopify
  • Wordpress
Facebook
Twitter
LinkedIn
Drupal
  • Careers
  • Cities
  • Support

© 2022 All Rights Reserved. Built with Drupal