Original source: Layer0
Optimizing the eCommerce site for speed has always been a key strategy allowing retailers to improve their visibility and conversions. Now site speed is even more important. Google recently announced an upcoming Page Experience Update that introduces a new ranking algorithm which judges pages based on the experience that users have on them. This means that slow pages will rank lower than what they currently rank when the update goes live in early 2021.
This presents a major challenge as well as an opportunity for Magento 2 websites who want to look beyond the meat-and-potatoes optimization tactics and literally crush their competition with an instant website that ranks high in Google’s search results.
What is Magento?
Adobe-owned Magento is a leading eCommerce platform used by over 250,000 online retailers worldwide. To put it in perspective, every fourth eCommerce business on the internet is using the platform.
Official support for Magento 1 ended in June 2020 and migration to Magento 2, the latest incarnation of the platform, requires a full website rewrite. For many retailers this presents a good opportunity to reconsider their speed optimization tactics and implement the best-in-breed web technologies that boost website performance and SEO.
Every second matters
Over the past couple of years the internet has accelerated tremendously. Nielsen’s law of internet bandwidth states that a high-end user’s connection speed grows by as much as 50% every year. This rule has held true for the past 36 years, all the way from ridiculously slow dial-up connections to today’s insane broadband speeds. According to Speedtest.net, today’s Americans, on average, are getting around 135 Mbps download speed and 52 Mbps upload speeds through their fixed broadband connections.
Impressive as these numbers are, this is not directly reflected in faster websites. The same goes for mobile internet performance—while the world is raving over ultra-fast 5G networking speeds, they rarely have anything to do with how fast eCommerce stores and other websites are. Ironically, mobile page load times have actually over the past couple of years.
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.
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.
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.
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
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.
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.
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
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.
Instant first-page load from search, with built-in auto AMP conversion on Layer0
You can read the full AKIRA case study here.
Modern consumers are fickle and discerning and may leave your eCommerce website if there are the slightest hiccups in the experience. With Google’s increased focus on website speed, online retailers are left with no excuses for offering sub-standard website performance.
If you’re plagued by slow website speed, it’s time to take action. With the Page Experience Update going live in early 2021, slower websites will begin to slip in the search ranks. Regardless, your users deserve a better experience, and you deserve better SEO. Speed will continue to gain importance for users and search engines, bringing traffic and conversion lifts as secondary wins.
But why spend the enormous effort to try to optimize your site for speed when you can just leapfrog the competition and go instant? If you have PWA or SPA on Magento 2, we guarantee sub-500ms median page speeds on Layer0 (Edgio). We will still guarantee this speed improvement if you have a traditional website on Magento (or any other eCommerce platform).
This is possible because Layer0 (now Edgio) reverts the concept of speed optimization, doing all of the heavy liftings before shoppers’ taps (via predictive prefetching and edge caching), not scrambling to optimize page renders after the tap. This way, we keep your site 5 seconds ahead of the shopper.