Best Practices

The global eCommerce market reached a US $13 trillion value in 2021 and is forecasted to reach a whopping US $55.6 trillion by 2027.

With such growth of eCommerce year over year, it's essential for online retailers (and other businesses) to have the right technology to support their business and strategy. But with so many eCommerce platforms available, how can you tell which fits your business best?

How do you pick the one that suits your needs, keeps up with the development and market trends, and ensures your business's online success?

In part two of the five-part article series, we discuss choosing an eCommerce platform that's the right one for your use case.

Core Web Vitals, INP, LCP, Cumulative Layout Shift, FID, Webpagetest.org, Google Lighthouse, Pagespeed Insight, CrUX. I’m sure you’ve stumbled upon one of these in your quest to improve front-end performance, right?

But how do you measure performance? And why do you need to be data-driven and continuously optimize and build a performance testing and optimization culture?

Let’s explore that. Let’s go millisecond hunting.

Local SEO focuses on optimizing a website's online presence to attract more local customers and improve search engine rankings for location-based queries.

Great product pages are vital to a successful online store, so how do you optimize your product pages for SEO and high conversions?

Are you struggling to convert your website traffic into paying customers? Are you tired of spending hours and resources on driving traffic to your site with little to no return on investment? Then it's time to focus on Conversion Rate Optimization (CRO).

Not your average list but a comprehensive 19-point eCommerce SEO checklist with everything you need to know to optimize your store and successfully grow organic traffic and revenue.

We all know that testing our website or web applications is important in helping us avoid breaking things down the line. It is what makes refactoring, adding new features, or simply fixing bugs so much easier. But are unit or integration tests enough?

A great product taxonomy improves your customer user experience and how they find the right product they need much easier and faster.

The design system acts as a repository for collections of reusable components and aims at closing the gap between designers and developers by providing easy access to pre-made design resources/components.

Content modeling is an interesting topic and lays the foundation for a great eCommerce architecture. When done correctly, of course.

Video is dominating the digital marketing landscape and contrary to what you may have heard there are a couple of ways you can easily add them to your Jamstack website.

Is there a best font for the web? Or what are the safest fonts to use on your web-based projects?

Genuine internet craftsmanship is performed by experienced UX designers, front-end developers, and information architects. The combined focus on customer experience, frontend performance, and beautiful reusable information architecture is rocket fuel for SEO, conversion and click-through rates, and reusable content services.

The differentiation is in the execution—in the details.

Creating a seamless and engaging on-site customer experience is the ultimate goal for everyone running an online store. Besides your product/service, your store performance and product videos ensure you get the much-needed attention.

Fewer bytes to download for the user equals better pagespeed index, better conversion rate, and in general better user experience. It is also an important factor in ecommerce SEO.

The most well-known tricks to server fewer bytes to download are:

• Optimize the quality of the images
• Use JPG where possible
• Use srcset to serve different sized images for the different devices

Today though, there is another way to reduce the size of the images, the relatively new image format WebP. It supports both lossless and lossy and can be used both for images with and without transparency.

If you read about the srcset attribute on images previously but never got around to implementing it, keep reading. Your users with their limited phone data packages will love you!

Images are crucial for frontend performance. Responsive images with srcset is a good start. If you have many and large images consider lazy load them, soon we get native HTML lazyload in our favorite browser also. When we wrote about srcset we mentioned the sizes attribute, but not the importance of using this attribute so the browser loads the properly sized image.

Let’s dig in.

Hyperlinks are one of the most important aspects of content creation, copywriting, and website management in general. And we should all know by now how to use hyperlinks properly, right?

Nowadays the performance of your website matters big time.

By using structured data to describe your web pages you are contributing to a more semantic web. This is a web where we describe the data being shown and not just how it should look, making it machine-readable. Structured data is also used by Google to enhance search results. Here is how you can add, test, and verify that your web pages are properly structured for the semantic web - as Google sees it. An important skill for better Internet craftsmanship.

A great content model is the best starting point when starting a new webshop, App, or marketing website. The content model serves as documentation and overview and connects information architects, designers, developers, and business stakeholders. We have created a design system in Figma for content modeling.

A few months ago we wrote about using webp in React and its benefits for frontend performance over traditional image formats like jpeg and png. Now there is a new kid in town, AVIF. This image format promises better compression than webP at no loss of quality. We just added AVIF support to our website and saw a big reduction in size. Let’s put it under the microscope.

With site speed becoming an important part of a customer experience making sure that the number of backend requests during runtime has become important.

Being able to use actual data is a great way to stress-test your design. Thanks to the use of API and a pre-made plugin you can now populate your Figma design file with product information from your Crystallize PIM.

Having a fast API for your ecommerce is a vital backbone of the infrastructure. It ensures that the performance bottleneck is not the data provider, and leaves you to dedicate focus to other important arenas; such as frontend performance. Important topics to consider on frontend performance are page speed index and time to interactive. We replaced the Apollo GraphQL client library with Urql and saw significant performance improvements.

GraphQL delivers a better developer experience with a self-describing API, query and mutation input validation, and a single query to your backend that returns exactly the data you need. This is why we based our fast ecommerce API on GraphQL.

Frontend performance is important. Not only is this good for your users, but it is crucial if run an ecommerce and you want to improve ecommerce SEO, and is actually really important for our planet as well. Use code-splitting and reduce the size of your bundles. Measure and optimize our frontend performance continuously.

Let's go millisecond hunting.

Let's say that you just implemented React SSR. After measuring your frontend performance, you're pleased to see that you got a very good page index score, but then you notice something else.

Shortly after the page is presented, it doesn't seem to work? Do you have a hard time scrolling and buttons don’t seem to do anything? But if you wait just a bit, a handful of seconds or more, suddenly everything works.

Congratulations, you've entered the Uncanny Valley.

Topic maps can be used to visualize your SEO strategy as well as building awesome internal navigation. Combined this makes for great internal and external findability. Get found in the search engines. Customers can easily navigate once they land on your website when proper information architecture is applied and connected with semantic topic maps.

React is super popular for eCommerce these days. Single-page applications (SPA) are typically the starting point due it their awesomeness. React SPA is however not awesome for SEO and time to first meaningful render. This is where server-side rendering (SSR) with Next.JS comes in. Frontend performance is super-important according to the ecommerce SEO checklist so you need to have fast APIs. GraphQL done properly could help your performance that you should verify with profiling and benchmarking. For eCommerce SEO the good old best practice still applies like title and h1 tag usage.