Beyond Optimization—The Secrets Behind the Fastest Magento 2 Stores

Source: nngroup.com

A speedier, frictionless eCommerce store can show the user more products in a single session. This, in turn, increases conversion rates. In an ideal scenario, the store and its interface should get out of the way and be only a backdrop for a great shopping experience.

Additionally, like most eCommerce stores, you’re most likely offering a product in a market where people are very price sensitive. What makes things worse—your competitors may offer the same products at similar prices. In this case, your SEO ranking and website experience may be among the few remaining ways to differentiate yourself. And these two are more connected than many sellers realize.

Google favors fast websites

With the Google Page Experience update around the corner it’s crucial to pay close attention to your website’s speed. Optimizing eCommerce websites for speed has been identified as one of the top initiatives for many retailers in 2020 and beyond. And when the page experience algorithmic update rolls out, slower sites will slip quickly in search rankings and SERP position. Now is the time to take action.

The first page of Google’s search results receives almost 95% of the web traffic, leaving just 5% for the remaining SERP pages. And while Google has always been super vague about their RankBrain algorithm and how its different components were weighted, we know for sure that starting 2021 speed is going to play a key role in search ranking. This is very likely the first time in history when Google is opening the kimono on the specific signals that impact search results.

Not optimizing your Magento 2 store for speed puts you at risk of losing organic traffic and potential customers. Many stores—even big brands—which don’t take action in 2020, may see their search traffic dwindle and suffer substantial revenue losses. Websites which offer more fluid, better and faster experiences will start dominating the most sought-after organic keywords.

Deliver great experiences, not just products

Like many other eCommerce platforms out there, Magento 2 was originally built with a backend- and data-first approach, and very little focus on the actual end-customer experience and website speed. Their focus is on SKUs, not people. This puts the burden of website speed optimization on the platforms’ customers, system integrators, designers and developers.

Whether your store runs on Magento 2 or any other popular eCommerce platform or backend system, if you want to deliver the fastest experience out there you’ll need to implement advanced speed-focused web technologies, and for that you must first go headless and build a portable frontend.

For a full run-down of what headless eCommerce is and why it is fundamental to instant pageloads, watch this webinar.

Read on for the key tactics behind the fastest Magento websites.

The tech behind speedy Magento 2 stores

Site speed is especially important for eCommerce as shopping online is inherently a very visual experience. Stores are typically image-heavy websites and the last thing shoppers want to see is slow-loading product pages, grainy pictures and jank.

When optimizing your Magento 2 store for speed you can implement a range of tactics to make it faster—use a lightweight theme, optimize images, remove the render-blocking javascript code etc. You can have a whole team optimizing your website, but the problem is all these standard speed optimization techniques involve tweaking things which usually happen after the tap. Making your website really fast requires a combination of technologies which run under the hood before the customer even clicks on anything. You need to move from reacting to the tap to anticipating it (more about that later).

Many of the speed-oriented web technologies require separating the backend from the frontend, i.e. making the frontend portable, or subscribing to headless commerce architecture. Going headless makes it easier to use the best-of-breed solutions for your frontend and backend independently of each other, so that you can deliver the fastest website on the backend of your choice.

Once you go headless with your Magento 2 eCommerce website, you can use a portable frontend built for speed like a Progressive Web App (PWA). Running a headless Magento 2 store with a PWA frontend requires solid API coverage and good documentation.

Going headless also lets you begin to implement additional cutting-edge technologies which will make your website blazingly-fast, including:

• Portable frontend for speedy browsing transitions
• Server-side rendering (SSR) and AMP support for lightning-fast first loads.
• Predictive prefetching
• A state of the art CDN with edge computing to optimize cache hit rates for dynamic content at the edge and remain 5 seconds ahead of the shopper

Let’s investigate how suited Magento 2 is for implementing these technologies and supporting sub-second eCommerce websites.

1. Magento 2 APIs

A headless store connects the frontend to the backend eCommerce platform via APIs. Before going headless, it’s worth checking if your eCommerce platform has good API coverage and if you can easily connect to a third-party storefront.

Magento offers API coverage: SOAP and REST endpoints are available on all versions, and native GraphQL support was added with the Magento 2 update. PWAs and headless endpoints can be created via the GraphQL API, however, customization of the platform’s code and/or database schema can disrupt API compatibility.

• Magento 1 API formats: REST, SOAP
• Magento 2 API formats: REST, SOAP, and the more modern GraphQL

Magento 2 makes it relatively easy to create APIs to support headless websites and PWAs with GraphQL as an alternative to its REST and SOAP web APIs for frontend development.

2. Building a PWA frontend for Magento 2

Modern PWA portable frontends are like native apps in many ways, and their speed benefit is evident as exploring the website is faster—which people do a lot when they are shopping online.

With a native-like feel, a PWA on Magento 2 will feel faster. However, when speed is mentioned in the context of PWAs, it’s more about layout stability than speed. As you go from page to page, these pages don’t “bounce around” like on a traditional website. And users typically perceive this “bouncing around” as slow page loads.

You’ve probably seen this happen many times—you enter a website and then an ad or a banner loads a couple of seconds later, and everything shifts, moving the whole theme up or down. This results in unintended clicks, distraction, and frustration for the shopper.

A PWA frontend solves this problem. Magento PWA Studio is a collection of tools that lets developers build complex progressive web apps on top of Magento 2. Unfortunately, PWA Studio is only available on Magento 2.3 or higher, versions that most sellers have yet to upgrade to.

To summarize, here are the pros and cons of building a PWA frontend to sit on top of your Magento 2 store.

Magento 2 advantages in supported PWAs:

• Magento offers some PWA support. Magento 2 comes with the Base and Luma responsive themes out of the box. For PWAs, Magento 2.3 offers a toolkit called PWA Studio with a base theme called “Venia.”
• Better layout stability. With a PWA frontend Magento 2 pages render more smoothly, i.e. the images do not “bounce around” as they load, even on image-heavy pages.
• Speed. If the PWA is built correctly, it makes the website faster.

Please note that the last two advantages rely on server-side rendering, which is possible but not always available for PWA Studio frontends. More about that later.

The challenges of delivering PWA frontends on Magento 2:

• Magento’s natively offered PWAs aren’t really faster. You need proper infrastructure to become blazingly fast. Sometimes a PWA can even slow down your website without the right technology to support it (such as server-side rendering and CDN with edge computing). A lot of big stores make that mistake. It sounds a bit counter-intuitive, but it’s true—you get into the PWA to gain speed, but you may end up slowing down your website. Our analysis shows that the top 500 US eCommerce websites that deliver PWAs don’t load much faster than their non-PWA counterparts, averaging about 4 seconds.
• Without SSR & AMP the first click is still slow. Magento PWA Studio doesn’t support SSR or AMP out of the box, so the first-page loads aren’t that great. Also, the first load isn’t that fast because when you access a PWA you download the whole “app.” Next-page loads of PWAs are noticeably faster than traditional, multi-page websites.
• Magento’s PWA Studio is similar to other open-source frontend options, but PWA Studio is geared specifically for the platform. This means you remain locked into the Magento ecosystem, which blunts some of the value of headless commerce.
• Building a PWA on Magento using the native PWA Studio requires a different skillset and toolchain than the traditional Magento development.
• Magento PWA Studio is only available on Magento 2.3 or later. The bulk of Magento stores hasn’t yet upgraded to Magento 2.3.

Overall, choosing an open-source, portable PWA framework (i.e. one that is not natively built into the platform but offers a natural API connection) is a better option than the vendor-produced framework Magento offers in PWA Studio.

Third-party frontend frameworks for Magento 2

The open-source and vendor-offered frontend options are free, but the vendor-produced frontend is not portable. Of course, you can probably take it to another platform with some effort, but it certainly was not designed to allow that. Vender-offered frontends, like those built using PWA Studio, are built by eCommerce platforms to have a PWA answer, not because they intend to let you take it with you when you re-platform.

When looking for a PWA frontend that would work with your Magento 2 store, you’re ideally looking for an isomorphic framework, i.e. one which renders the same page in two versions. You don’t have to write it two times, you write it once. The first page is rendered server-side, and the navigation is client-side rendering.

There are a few isomorphic headless frameworks you can use for your Magento 2 store once you go headless:

• Next.js – a great React framework for PWAs created by Vercel,
• Nuxt.js – the same as Next.js, but based on Vue,
• React Storefront – based on Next.js but comes with more storefront capabilities, widgets and connectors to certain platforms like Magento, Shopify and SAP (Hybris). Layer0 is a major contributor of the open-source PWA framework React Storefront.
• Angular– enables creating portable PWA frontends with server-side rendering.

These four frameworks offer both client- and server-side rendering. This means there is no speed trade-off for the first load—both the first and all subsequent loads in the store will be fast. Also, we know that Google loves pages with short rendering times, which gives heavy apps like stores fewer chances to position themselves well without SSR.

Complex eCommerce sites are often JavaScript-heavy and need more effort from Google to crawl and make sense of them. They’ll say it doesn’t matter, but Google doesn’t like client-side rendering. And there can be bugs and issues if your content is not shown properly. Ideally, you should look for a PWA framework that does server-side rendering out of the box—and Magento’s PWA Studio does not.

Bottom line: the native PWA experience you get with PWA Studio on Magento 2.3 does not offer huge speed improvements. But launching Magento PWA Studio on Layer0 will get you a faster website.

Building a faster Magento 2

Headless, portable frontends like PWAs have many speed advantages. A good PWA will take you from slow to fast, but it will not get you instant. For that, you need to correctly combine cutting-edge technologies, such as:

1. Server-side rendering (SSR) and AMP

Magento 2.3 offers limited tooling for implementing server-side rendering. It is implemented through Mustache templates as part of Magento PWA Studio’s UPWARD spec. True SSR runs the full client-side code on the server (not just Mustache templates). As a result, SSR with UPWARD is limited to specific areas (like the app shell), or developers must duplicate the code into both the client-side React code and server-side Mustache templates for each page or area that needs to support SSR.

Google AMP is an open-source framework for creating super-fast mobile web pages by simplifying the HTML and enforcing stringent limitations on CSS and JavaScript. The average AMP page loads in 500 milliseconds from search. These pages are cached and pre-rendered on the Google server, which is how they are delivered quickly.

The challenges of implementing SSR and AMP on the Magento 2 store:

• Magento offers no built-in support for AMP. Supporting AMP requires third-party extensions and/or rebuilding your existing theme to add these capabilities on your own. This significantly hinders your ability to optimize first-page loads on mobile.
• On Magento 2, supporting true SSR with UPWARD requires running and maintaining a fleet of Node.js servers.

2. A modern CDN

A Content Delivery Network (CDN) can store media files. CDNs were made to make the content of your website load faster (images, videos and code—JavaScript, CSS— and other pieces of your website). When someone accesses your website, the CDN shortens the way to the content, so it doesn’t have to be accessed from the server all the way across the country. The CDN puts it in every major city, so the time to access that content is much shorter. Some people may have a CDN but not even know it.

Traditional CDNs are meant for static websites—to store images and text and other elements that do not change often. But modern stores, with dynamic pricing and real-time inventory lookups, need so much more than that.

Even when mobile networks are getting faster and faster and we have all these 4G and 5G speeds, mobile websites still stay at the same speeds, usually around 3-5 seconds per page load. This hasn’t gotten any better even though almost every major eCommerce site uses a CDN today.

The challenges of integrating a CDN with Magento 2

• The on-premises version of Magento does not come with a CDN integration out of the box, although you can still use the CDN of your choice.
• Magento Commerce (Cloud) has a built-in caching module, but it is not a true CDN. It lacks the distributed Points of Presence (PoPs) that a real CDN would have.

Layer0 CDN-as-JavaScript can replace your CDN or work alongside it. We have nearly 100 PoPs. Websites on Layer0 see an average cache hit ratio of 95%+ for dynamic content at the edge.

Schedule a consultative conversation to learn how Layer0 can help you achieve sub-second page loads on Magento 2.

We’re here to help

Layer0 makes having a speedy, headless Magento store super simple, from development and deployment to easy rollbacks. You can do it for any modern headless frontend: Next, Nuxt, React, SAP/Spartacus, React Storefront, Vue Storefront—we support all of them.

Speed and conversion lift. When combined, conversion rate increase and organic traffic lift generate a synergistic effect for your eCommerce site, which will directly translate into revenue. By running a faster store, you are not only getting higher in the SERP. In more competitive markets, it means your competitors are losing traffic to your website. Websites on Layer0 see a 15-30% average boost to conversion rates and search traffic.

Simplicity. At Layer0, our goal is to make the Web instant and simple—even though we’re supporting the headless trend, which is no simple task. Websites on Layer0 see a 20% increase in developer velocity and enterprise agility simply from putting the code in the center of their workflow with our serverless JavaScript platform.

Collaboration. Every time you write new code, a pre-production environment is automatically generated. Your QA people and business stakeholders can test it and provide feedback before the code is even merged in.

Upgrade from Magento 1 to Magento 2 in 12 weeks AND get a sub-second website.

True A/B testing. A/B tests will slow down your website. There would be no point in having a website optimized for speed and then A/B tests ruin your efforts. With Layer0 (Edgio), you can experiment on your website but still have it instantaneous. For example, you can do canary deploys for 5% of the users. With Layer0, you write route rules like you write your application and you have full control over traffic splitting.

Layer0 also comes with performance monitoring and dashboards to track it all.

Unlimited Scale. Even on Black Friday, Layer0 will scale automatically to absorb increased traffic to your store. With one-third of US shoppers visiting a website on Layer0 each month, you know you are in good hands.

Security. The Layer0 is enterprise-ready, PCI Level 1 DSS certified with WAF, DDoS and bot-mitigation supported out of the box.

How successful stores do it: AKIRA’s instant Magento 2 store on the Layer0

An instant eCommerce website can have a massive impact on your bottom line. We’ve seen this many times with our customers. For example, the gifts and flowers giant, 1-800-Flowers saw a 50% lift in conversions from its sub-second website. Venus Fashion is another example, the fashion retailer went from 15.25% of its website loading in under a second to 72.75% on the Layer0, resulting in a 24% lift to conversions.

The fashion retailer AKIRA lifted its conversion rate by 37.25% with a sub-second website on the Layer0. AKIRA went instantly through a combination of advanced technologies:

• A blazingly-fast eCommerce PWA built with React Storefront
• Server-side rendering and AMP support
• Predictive prefetching
• CDN-as-JavaScript with edge computing capabilities

The first two ensure lightning-fast page speeds from landing through checkout. The last two ensure the website stays 5 seconds ahead of the shopper by predicting their next move, prefetching the JSON data from the edge where it has been cached and streaming it to the browser. This way the user feels like the entire site is already on their phone and there is no longer a notion of a “page load.”

Frictionless AMP support for faster search traffic and better SEO

AKIRA outranks Amazon, Nordstrom, Zappos, and other multi-billion dollar competitors for key phrases. How? The fashion retailer delivers instant first loads from search by utilizing React Storefront’s AMP conversion technology.

Every page of the retailer’s website gets an automatically generated AMP version. This gives the retailer the competitive advantage required to outrank eCommerce giants with far larger teams and budgets dedicated to search engine optimization.

SSR for faster non-search traffic

AKIRA uses Layer0 built-in server-side rendering capability to deliver instant first loads for non-search channels. Display, social, email, referral and other non-search traffic averages at just north of a second, with subsequent pages loading in 500ms. This is quite a competitive advantage in a market that averages 3-5 seconds per page load.