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

DrupalTips
How SEO Helps Your Website Grow

How SEO Helps Your Website Grow

  Search engine optimization (SEO) is a powerful tool for helping your website grow and reach its full potential. SEO involves optimizing your website to make it easier for search engines like Google to find and rank it in their search results. By using SEO techniques such as keyword research, content optimization, link building, and more, you can increase the visibility of your website and attract more visitors. With the right SEO strategy in place, you can drive more traffic to your site and generate more leads and sales. In this article, we'll discuss how SEO can help your website grow and become successful. What is SEO? SEO stands for Search Engine Optimization, and it is the process of optimizing a website to make it easier for search engines like Google to find and rank it in their search results. SEO involves a variety of techniques, such as keyword research, content optimization, link building, and more. By using these techniques, you can increase your website’s visibility and attract more visitors. SEO helps your website become more visible in the search engine results pages (SERPs), which can lead to more traffic, leads, and sales. Benefits of SEO for Website Growth Let's have a look at some of the top benefits of SEO for website growth: Increased visibility: SEO helps your website become more visible in the search query, which can lead to more traffic and leads. Improved user experience: SEO also helps enhance the user experience of your website by making it easier to navigate and providing relevant content. Increased brand awareness: SEO can help boost brand awareness by making your website more visible in the SERPs, which can lead to more people recognizing your brand. Higher conversion rates: SEO can also help increase your website's conversion rate by making it easier for visitors to find what they are looking for and take the desired action. More organic traffic: SEO can help you drive more organic traffic to your website, which is free and highly targeted. Keyword Research for SEO Keyword research is an important part of SEO, and it involves finding the right keywords to target for your website. Keyword research helps you identify the words and phrases that people are searching for when looking for products or services related to your business. By targeting these keywords, you can increase your website’s visibility in the SERPs and attract more organic traffic. When doing keyword research, you can use specialized software to make the job easier. Content Optimization for SEO Content optimization involves optimizing your website’s content to make it more relevant to search engines. Content optimization includes optimizing titles, meta descriptions, headings, images, and other elements of your website’s content. Many companies rely on a solid blog approach to boost their content optimization strategy and highlight their SEO efforts. Link-Building Strategies for SEO Link-building is another top SEO strategy, and it involves creating backlinks to your website from other websites. Backlinks are links from other websites that point to your website, and they can help improve your website’s visibility in the SERPs. There are a variety of link-building strategies you can use to build backlinks for your website. These include guest blogging, directory submissions, social media marketing, and more. Conclusion SEO is an important part of website growth, and it can help you increase your website’s visibility in the SERPs, attract more organic traffic, and boost your conversion rates.  In the competitive digital world, brands that harness the power of SEO are on top of the game.  If you, too, want to integrate SEO into your web development project and are looking for professional advice, don't hesitate to contact Optasy. Optasy is a web development company that provides complete web development and maintenance services that support business growth.  Photo credit: Unsplash.  ... Read more
Raluca Olariu / Feb 14'2023
Tips
Website Security Best Practices

Website Security Best Practices

  Website security is an important consideration for any business or organization with an online presence. With the ever-increasing threats posed by cybercriminals, it is essential to ensure that your website is secure and protected from malicious attacks. Implementing best practices in website security can help protect your website from hackers, malware, and other malicious activities and security issues. This article will discuss some of the best practices for website security and how you can stay away from cybercriminals and improve your security posture.    "Cybersecurity is a shared responsibility, and it boils down to this: in cybersecurity, the more systems we secure, the more secure we all are." - Jeh Johnson Overview of Cybersecurity in 2023 The cybersecurity landscape heads towards a privacy-first approach to information security in 2023. Also, aligning regulations globally will allow businesses to gain more security and data protection.  There are growing voices that give their positive vote to passwordless authentication, which will presumably eliminate the risk of password breaches and amplify organizational security.  However, the rise of the Internet of Things (IoT) devices will likely increase security risks for organizations and expose more security vulnerabilities.  So how can websites cope and become more agile and accessible in this uncertain cyber landscape?   Best Website Security Practices in 2023 At the moment, the best website security practices involve a combination of proactive measures and reactive responses. Proactive measures include implementing strong authentication methods, encrypting data, and regularly patching software. Reactive responses include monitoring suspicious activity and responding quickly to identified security threats or security breaches. Strong Authentication Multi-factor authentication is one of the most important best practices for website security. It involves using two or more factors to verify a user’s identity, such as strong login credentials, and a biometric factor like a fingerprint or facial recognition. This ensures that only authorized users can access the website and its data, protecting it from unauthorized access. Additionally, strong authentication can help protect against phishing attacks, which are attempts to gain access to sensitive information by posing as a legitimate website. Encryption Encrypting data is another significant best practice for website security. Encryption scrambles data so that it can only be read by the intended recipient, making it more difficult for hackers to access sensitive information. It also helps protect against man-in-the-middle attacks, which occur when a hacker intercepts data as it is being transmitted between two parties. Software Patching Software updates are another important best practice for website security. Regularly patching software helps protect against vulnerabilities that can be exploited by hackers. It also ensures that the latest security features are in place, making it more difficult for attackers to access sensitive information. Monitoring and Response Reactive responses like monitoring suspicious activities or responding quickly to identified threats are two valuable tools for website security. Monitoring for suspicious activity can help identify potential threats before they become a problem. Responding quickly to identified threats can help minimize the damage caused by malicious code. Conclusion Keeping websites secure in 2023 involves a combination of proactive measures and reactive responses. These best practices are just some measures you can take to protect your digital assets. If you want to go more in-depth and opt for complex ways to secure your website, don't hesitate to contact Optasy.    Photo credit: Pixabay.... Read more
Raluca Olariu / Jan 25'2023
DrupalTips
Top Drupal Debugging Techniques

Top Drupal Debugging Techniques

  Debugging is an essential part of developing any website, and Drupal is no exception. Debugging in Drupal can be a complex process due to the complexity of the system and its many components. However, with the right techniques, it is possible to identify and resolve issues quickly. In this article, we will discuss some of the top debugging techniques for Drupal that can help you troubleshoot your website more efficiently. We will cover topics such as using the Devel module, using Xdebug, and other helpful tips and tricks. With these techniques in hand, you'll be able to recognize and repair any problems on your Drupal site quickly.     Using the Devel Module for Debugging The Devel module is a powerful tool for debugging Drupal websites. It provides a suite of tools to help you quickly identify and resolve issues. The Devel module includes features such as the ability to view database queries, generate dummy content, and debug PHP code. It also has an API that allows developers to create custom debugging tools. Using the Devel module can be helpful when trying to identify the source of an issue. It can also be used to generate dummy content for testing purposes.     Utilizing Xdebug for Troubleshooting Xdebug is a powerful debugging tool that can be used to troubleshoot issues on Drupal websites. It provides detailed information about the code execution, including stack traces and variable values. This can help developers quickly identify the source of an issue and resolve it more efficiently. Xdebug also has features such as breakpoints, which allow developers to pause the execution of code at certain points to inspect the application's state. This can be helpful when trying to identify and fix complex issues.     Leveraging Drupal's Logging System Drupal's logging system is a powerful tool for debugging websites. It provides detailed information about the events that occur on the website, including errors and warnings. This can be helpful when trying to identify the source of an issue. The logging system also allows developers to set up custom log levels, which can be used to filter out unnecessary information and focus on specific types of events. This can help developers quickly identify and resolve issues.   Using the Drupal Console for Debugging The Drupal Console is a command-line interface that can be used to debug Drupal websites. It provides commands for inspecting the database, generating dummy content, and running tests. This can be helpful when trying to identify and fix issues quickly. The Drupal Console also has an API that allows developers to create custom commands for debugging purposes.   Have You Completed Your Drupal 10 Migration? The release of Drupal 10 marks a major milestone for the platform, and it is important to ensure that your website is up-to-date with the latest version. Migrating to Drupal 10 can be a complex process, but it is essential for ensuring that your website remains secure and performs optimally. When migrating to Drupal 10, it is important to test the website thoroughly and use debugging techniques to identify and resolve any issues. The Devel module, Xdebug, and Drupal's logging system can all be used to troubleshoot any problems that may arise during the migration process. Don't forget to ensure that all of the modules and themes used on the website are compatible with Drupal 10. It is recommended to use the Update Status module to check for any available updates and apply them before migrating to Drupal 10. Additionally, it is a good idea to create a backup of your website before beginning the migration process in case something goes wrong. By taking these steps, you can ensure that your website is properly migrated and running smoothly on Drupal 10.     Conclusion Debugging in Drupal can be a complex process, but with the right techniques, it is possible to debug your website faster and easier. If you need more advice on your next web development project or on your Drupal 10 migration, our team of experts is here to help you. Contact us for more details.   Photo credit: Unpslash.... Read more
Raluca Olariu / Jan 16'2023

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
  • Cities
  • Support

© 2023 All Rights Reserved. Built with Drupal