Skip to main content

Best Practices

ECommerce SEO Checklist

This eCommerce SEO checklist gives you the most important factors for a better SERP ranking. Items include the page title, headers, URLs, link and video optimization through content strategy, front-end performance, and structured data formats.

The eCommerce Performance Magic Sauce

Three main activities make up the performance magic sauce in eCommerce: customer experience, frontend performance, and information architecture. Creating and delivering the perfect on-site customer experience is closely tied to websites performance.

Engaging Online Shopping Experiences with Video

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.

Frontend Performance Measuring & KPIs

Frontend performance matters for accessibility, user experience, conversion rates, and of course, good old SEO. To build fast websites, you need to know what to measure and how to measure it.

Using WebP in React

Images usually make up for the better part of the bytes on a website, so it is one of the most important things to evaluate when you optimize your website for front-end performance.

React srcset for Responsive Images

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

React Image Sizes Attribute for Fast ecommerce

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.

How to Use Hyperlinks Properly?

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?

Milliseconds Make Millions: Sell More and Grow Faster

Nowadays the performance of your website matters big time.

Semantic Web With Structured Data

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.

Content Modeling Using Figma Design System

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.

Smaller Images With AVIF for Faster Websites

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.

Event Driven eCommerce Orchestration for a JAMstack Frontend

JAMstack is a popular strategy for delivering super fast eCommerce experiences. The strategy basically means that you generate the pages on build time and are updated when content changes. Of course you want to make sure that all pages are 100% up to date with the latest marketing content and product information status like stock. You do not want to sell inventory that you do not have in stock - that is not good for customer experience. Event driven orchestration enables a fully coherent JAMstack frontend. Fast and always up to date.

How to Use GraphQL to Populate Figma with Real Product Information?

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.

Faster React TTI by Replacing Apollo with Urql

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.

Better Developer Experience with GraphQL

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 Optimization: React Code Splitting and Bundle Size

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.

Frontend Performance: React SSR and the Uncanny Valley

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.

Information Architecture with Topic Maps for Better SEO

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.

SEO for React eCommerce SPA

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.