Magento 2 remains one of the most popular eCommerce platforms in the world. eCommerce developers, in particular, love it because of its open-source code, ease of customization, and flexibility. A fully-owned subsidiary of tech giant Adobe, Magento 2 has a robust developer community and extensive support.
The upgrade from Magento 1 to Magento 2 did wonders for eCommerce merchants’ ability to optimize their stores for mobile devices, performance, and SEO. Magento 2 is the foundation for hundreds of thousands of online stores, including stores fielded by some of the biggest brands in the world.
If Magento 2 is the platform of choice for your online store, you have a powerful selection of features to choose from—and some unique pitfalls to avoid. Here are five tips to nail the development of your Magento 2 online store:
1. Get the most out of developer mode
Magento 2 comes out of the box in default mode. When your Magento 2 store is live, it will run in a state called production mode. But Magento 2 also comes with a special developer mode. It is possible to add modules and customize the code in production mode, but it’s like flying with a blindfold tied over your eyes. If bugs and errors are hiding in the code, you will never be able to see them before it’s too late.
Here’s what developer mode offers to help you develop and troubleshoot your Magento 2 online store:
- Extensive Reporting. Developer mode keeps a robust log in the var/report directory, documenting every action taken during the development and customization session. This makes it much easier to retrace your steps and troubleshoot should a problem arise. Better record-keeping also makes for an easier quality assurance process, which may be important for regulatory compliance.
- Static Files Displayed but Not Cached. In developer mode, a static file gets written into the pub/static directory every time it is called for, but it is not stored in the site cache. This means that the static file is displayed on the front end of the site immediately. The result? If a customization produces an error message, you see it immediately. It doesn’t hide in the cache, waiting to be discovered by a frustrated user.
- Exception Errors. Exception errors appear in the browser immediately, rather than being logged. Again, this gives you a real-time video of how your changes might affect the user experience, giving you a chance to fix problems before a user has the misfortune of encountering them.
Developer mode has all these advantages. So what’s the downside? Performance. All of these functions absolutely kill your site’s performance, causing it to load and run more slowly. Performance heavily affects user behavior. Bounce-back rates and site abandonment skyrocket for every second after 2 seconds it takes for your website to load, which means you absolutely must switch back to production mode before your site goes live to users. Production mode offers the highest possible performance of the three modes.
The point of development mode is to improve the coding experience and spot problems before they have a chance to derail the UX for any given customer or a whole population of customers. Make sure to use developer mode whenever you make changes and customizations to the Magento 2 source code, or whenever you code and add a custom module.
To determine which mode Magento 2 is currently running in, send the following command:
php bin/magento deploy:mode:show
The easiest way to switch to developer mode is to run a CLI command. First, clear proxies and generated classes to avoid errors and delete the contents of the var/di and var/generation directories. Then send the following command:
php bin/magento deploy:mode:set developer
2. Take advantage of Varnish caching
One of the major improvements to the tech stack of Magento 2 compared to Magento 1 is the inclusion of Varnish. Varnish is a free, open-source HTTP accelerator, designed to improve the performance of dynamic and data-heavy websites.
It does this by creating a virtual memory space for data to be stored, letting the OS decide what data gets stored in memory and what gets sent to disk. Without this extra layer, the OS might start caching data as it moves to disk.
The Varnish virtual memory space sits between your Magento 2 online store and the server. All cacheable data is retained in the Varnish virtual memory space. Varnish can produce that cached data whenever requested.
By reducing the caching burden produced by the site, Varnish can speed up data delivery by several hundred orders of magnitude. This makes a big difference, considering that seconds count when it comes to user engagement and bounce-back rates.
To turn on Varnish caching, install Varnish and then go to the Magento 2 admin panel. Select Stores > Settings > Configuration > Advanced > System > Full Page Cache. Select “Varnish Caching” from the “Caching Applications” list. Fill in the “TTL for public content” field and start configuring Varnish.
Varnish is not the only addition to the Magento 2 tech stack that has the power to increase your store’s performance, but it is one of the most powerful. Other steps to take to optimize the performance of your online store include:
- Optimizing Images. Magento 2 sites tend to be image-heavy, which can slow down your site. Compress all images and select the correct image type for the right use.
- Choosing the Right Theme. Some themes load faster than others. When site performance is a priority, a clean, lightweight theme is usually the better choice than a flashy theme with a lot of bells and whistles.
- Use a Content Delivery Network. A content delivery network (CDN) is an “Edge” Cloud service that enables you to locate your shared server functions geographically closer to you.
- Use Flat Cataloging. Flat catalogs and products is an option you can turn on in the admin panel that can speed up your site significantly.
- Use a Dedicated Server or VPS. Consider not sharing servers. A dedicated server may be the way to go for a robust Magento 2 online store.
3. Keep an eye out for extraneous extensions
Extensions make it easy to customize your Magento 2 site without the excess cost or burden of custom coding. Each extension is a discrete module that exists in a separate directory within your website architecture. Magento 2 developers have a wonderland of third-party extensions to explore, each of them ready to plug-and-play to add functions to your eCommerce store.
But just because an extension exists does not mean you need it. Just because an extension performs the function you are looking for doesn’t mean it’s the only choice or even the best choice. While extensions make Magento 2 eCommerce sites easy to customize, extraneous extensions are a likely culprit when a site that is otherwise well-optimized starts getting bogged down with poor performance.
At various points in the development process, conduct an extension audit. Look at every extension in the site library in search of two categories of offending extensions:
- Unnecessary Extensions. Some extensions are simply unnecessary. Magento 2 may perform the functions out of the box and could mimic the extension with light customization. In other cases, the extension may add value, but you may realize that the value added by the extension is outweighed by the impact on performance. A fast site will usually outperform a site with bells and whistles.
- Oversized Extensions. Some extensions may perform an essential function within the site architecture, but the chosen extension may not be the best solution. A more lightweight extension might be available to perform the same function or a similar function with light customization. Again, even the perfect function may not be worth a loss of site performance.
4. Use the right extensions to enhance SEO
Some developers focus like a laser on the performance of the sites they deliver. But if you are a merchant, or a developer mindful of the merchant’s needs, at least as much attention needs to be paid to the site’s search engine optimization (SEO).
SEO is one of the most powerful tools of digital marketing, enabling your online store to be easily found by new customers searching for products like yours in search engines like Google, Yahoo, or Bing.
Performance is a big component of SEO, as is mobile-friendliness. Search engines can detect site performance and mobile optimization and will rank your site accordingly. Other aspects of SEO happen off the website itself, like backlinking, directory listings, and local map optimization.
But many aspects of SEO happen on the site in the form of on-page and technical optimization. Extensions can play a key role not only in adding user-facing features, but also in optimizing your Magento 2 site for search engine performance.
Individual extensions can perform individual SEO functions; other extensions perform a whole suite of SEO services, attempting to be an “all-in-one” solution for Magento 2 site SEO. Features these extensions might perform include:
- Mass Task Implementation. eCommerce stores often have a huge catalog, considering the number of product pages. Performing SEO tasks on all of these pages can be tedious. Look for an extension that can perform SEO tasks on multiple pages at once.
- Sitemaps and Layered Navigation. XML or HTML sitemaps, as well as structured data, make your site easier for search engines to index so that they become searchable on their engine. Look for an extension that easily adds this architecture.
- Meta Tag Templates. Meta tags help both users and the search engine identify what your page is about and can be loaded with high-impact keywords. Look for an extension that templatizes your meta tags and makes them easy to add.
- Rich Snippets. Some extensions offer advanced information to your search snippets to make your site more attractive to searchers—in other words, more likely to click on your page vs. a competitor’s page.
- Page Analysis. Some extensions offer back-end analysis to track your SEO performance and identify areas of improvement.
- Advanced Tagging. Some extensions offer specialized tags that allow your pages to be more effectively indexed.
5. Consider custom widgets
A widget adds either dynamic or static content to an online store. Examples include catalog category links, new product lists, recently viewed products, orders, and returns.
Magento 2 comes with a variety of standard widgets, but they may not display content in exactly the way you want them to or in line with your branding. A custom widget may be required to get the display of content right.
A custom widget is essentially an extension with advanced parameter options. Make sure to keep the widget lean and test it extensively to see how it will affect the site’s performance.
——————————————————————————————————
Global eCommerce sales are expected to surpass $4.2 trillion in 2021. Whatever you want your eCommerce store to be, Magento 2 can bring it into reality. The tips above will help you realize that vision, while at the same time making sure that vision is fast, efficient, user-friendly, and easy to find—qualities that benefit every online store.
Migration to the new Magento 2 platform can be a daunting process. Even if you are thinking of staying with Magento 1 for the time being, it is a good idea to open a conversation with your Magento solution partners about how to best handle the future of your online business and put together a long term transition plan.
At Liventus, we have been developing e-commerce sites for over two decades now. We are a Magento Professional Solution Partner with expertly trained staff capable of making your transition to Magento 2 seamless. Contact us today to learn more.