Dhairya Dwivedi

In the speed-obsessed world of today, better performance translates directly into business gains. You only have about eight seconds (source link) – that’s the average human attention span – before users lose concentration. From that stat alone, it’s obvious why website performance matters. No?

Google found that 53% of mobile visitors abandon a site that takes longer than 3 seconds to load (source link).

And nearly 70% of consumers admit that page speed influences their likelihood to buy (source link).

Faster sites see more engagement and higher conversion rates – for example, Walmart observed up to a 2% increase in conversions for every 1 second of improvement in page load time (source link).

Performance also plays a crucial role in retaining users (fewer will bounce) and ensuring a pleasant user experience, which boosts customer loyalty. It even affects your search engine ranking (Google uses page speed/Core Web Vitals as a ranking signal) and impacts your Google Ads Quality Score (slow landing pages can raise ad costs). In short, web performance influences:

• Time on site (users stay longer on fast sites)
• Page views (users view more pages when each loads quickly)
• Bounce rate (slow pages cause users to leave)
• Conversions / Revenue (speed encourages purchases – milliseconds can be millions)
• User satisfaction and retention
• Organic search traffic (page experience is an SEO factor)
• Bandwidth/CDN costs (efficient sites use less data)
• Ad Quality Score (fast landing pages improve ad performance)

Having all these benefits in mind, it pays off to have a performant website, right? So, how do you achieve that?

How do you write a web development guide for eCommerce websites? You don’t! What you write about instead are best practices you often see implemented.

This post is precisely that: a collection of practices our devs advocate, practices we’ve seen our clients do, and practices we’ve picked while networking with speakers and attendees at React Norway over a beer or two. BTW, React Norway 2025 is happening - submit a talk or get your tickets on time.

The rapid advancement of web technologies has transfigured the eCommerce landscape, enhancing online storefronts' development and user experience. And frankly nowadays, employing modern web frameworks is pivotal to achieving an exemplary, performant, and user-friendly eCommerce site.

Before we start - all the endpoints can be found in the GraphQL playground mentioned below.

Since Crystallize began, GraphQL has been chosen as a primary query language for all endpoints. The declarative nature of the language allows for fetching just the data we need, making all requests very predictable, minimizing the transferred data, and improving the response time. The Crystallize GraphQL application programming interfaces (API) efficiently manage core shopping functionalities like product catalogs, cart management, checkout processes, and orders.

So, you are done writing your code and (finally) want to merge it to get it out there so you can get on with the next task. It is never that easy, right? You need to ensure that all the PR checks pass. A reviewer will most likely also need to approve it. The work still needs to be done. To speed up the merging, you need to make sure that your PR is as easy to review as possible.

Pull requests are instrumental in maintaining a project's integrity by fostering collaboration, enabling peer review, and ensuring that only high-quality, tested code is merged.

Before we continue ...

Online shopping stores have taken off in recent years. As of 2024, there are 2.64 billion online buyers worldwide, a big chunk of the world's population. The success of any e-commerce business relies heavily on more than great products and competitive prices.

Users expect an online store to be performant and provide a smooth experience. After all, that is one way to convert window shoppers and browsers into buyers (more on that in our CRO strategies post).

This is where Global Content Delivery Networks (CDNs) come in. A CDN is a powerful tool that has had a big impact on how online retailers deliver content to their customers, ensuring lightning-fast loading times and a seamless shopping experience across the globe.

Let’s explain this with an example.

An entrepreneur runs a jewelry store. The web designs are amazing, but she has noticed high bounce rates and a lot of abandoned carts. The culprit? Product images are loading too slowly, and checkout is laggy for international customers. This is not a unique story; many eCommerce stores face this problem.

We’ll discuss how CDNs can be properly leveraged to make visiting that jewelry store from the example (and your online store) a great experience.

Astro🚀 has been a hot topic since its release in June 2022, especially because it is extremely fast. So it was a no-brainer to choose which framework we should go with next for our series of minimal eCommerce boilerplates titled ‘dounut’.

This post explores three important functions: fetching products, adding to a cart using our brand-new Shop API and pushing orders. The queries mentioned in this post are not tied to any language; you will use the same queries regardless of your language.

And is it something you should use in your application? Does it replace SSR and suspense? Let’s go through each of these questions individually and better understand the core concepts behind React Server Components, their advantages, and their impact on modern web development practices.

Having worked as a web developer for a while, I've had the pleasure (and occasional frustration) of working on projects that demanded the best from both frameworks. If you head over to the official React website, Next.js and Remix.run are the two frameworks recommended there. Each comes with its bag of tricks and quirks, making the development journey a roller coaster ride.

Next.js, loved for its strong emphasis on performance, especially with "static" mode, has become one of the most widely embraced frameworks worldwide. Its charm lies in its well-established ecosystem and seamless integration with Vercel, making it a go-to choice for many developers.

On the flip side, Remix, despite being relatively new, is receiving praise for its dynamic flexibility and smooth data handling, positioning itself as an exciting option for teams looking to create agile user experiences and robust data management systems while also keeping fantastic performance.

Let's get cracking and delve into the details of these frameworks.

3rd party scripts are also notorious for hurting your website’s performance in addition to posing security risks. With that being the case, let’s look at the cost of third-party scripts and how to manage their impact better.

GraphQL is a query language that optimizes performance by returning only the requested data, while TypeScript is a statically-typed language that helps catch errors during development. Together they can create robust and efficient web applications.

A payment gateway is a tech backend solution that facilitates the payment process for online businesses. Important, right?

As a headless eCommerce platform, our primary goal is to create services that delight front-end developers. This involves extensive research, hands-on experimentation with cutting-edge frontend frameworks, and the development of open-source eCommerce starters utilizing these technologies.

With React, Angular, and Vue, along with frameworks built on top of React, such as Next JS and Remix Run, and Vue, like Nuxt JS + frameworks like Svelte, Astro, and 11ty, the landscape of front-end frameworks appears nearly limitless. Still, this post is not about comparing or choosing the best one.

Instead, here we will highlight the frameworks we’ve found most rewarding to work with and believe should be part of your tech stack. By the way, our enthusiastic endorsement of these frameworks is admittedly biased, shaped entirely and solely by our own meandering experiences.

The world of React frameworks is ever-evolving; many frameworks are available on hand to create incredible web applications. Gatsby.js and Next.js are two such contenders, and over the years, they have evolved and learned from each other. However, things have changed (for Gatsby.js mostly).

Let's delve into the current state of affairs and inject a dose of opinion into the mix.

Hosting a conference? You’re already in talks with speakers, sponsors, venues, etc. while planning marketing activities, and you need an awesome-looking website, but don't have too much time for it. Enter the Intergalactic Conference boilerplate.

Whenever you write about frameworks, you end up with 50% of the article trying to explain concepts around rendering on the web. So, the topic deserves its own post, this one.

Before we get started, we need some background and definitions. What is rendering on the web? To answer that question, we'll take a stroll down history lane.

More than thirty years ago, the web started as a collection of static documents built for scientists to share their findings and ideas. Over the following decades, the web became more dynamic, and technologies like PHP, MySQL, and others enabled developers to build more dynamic functionalities.

Since then, JS frameworks and a class of static site generators have been introduced, rendering has become complex, and different models are suitable for different use cases. This article attempts to make sense of all this complexity. If we succeed, you will be empowered to determine which methodologies are best suited for your next web project.

Recent State of JS 2024 survey data shows that developers are increasingly performance-conscious and open to new tools in and out of the React ecosystem. Next.js still tops usage charts, but its interest and satisfaction scores have cooled slightly as it “follows a similar trajectory” to React (still widely used, but no longer the shiny new thing)​.

There is no one-size-fits-all solution but a spectrum of tools optimized for different priorities. A content-heavy blog maintained by a small team might thrive with a simple static-oriented tool like Astro or even Gatsby (remember that one!?). At the same time, a large enterprise dashboard would favor Next.js for its flexibility.

Unlike previous iterations of this article, we’re casting a wider net today, covering a bit more than the title suggests. There are many reasons for this, but mainly, we want you to consider how “React-dependent” you want your stack to be while waging solutions.

If you love React and want to stick with it everywhere, Next.js or Gatsby or Docusaurus let you stay in that ecosystem. If you mainly want to deliver content fast and don’t mind a more framework-agnostic approach, Astro or Remix… sorry, we mean React Router v7 is likely your friend. And if you’re feeling adventurous about the future of web frameworks, you might experiment with Waku, Tanstack, or Qwik’s new paradigm to get that edge in performance. The good news is that the React ecosystem is broad – you can mix and match (for example, embed React components in Astro or use Qwik for parts of an Astro site.

All of these frameworks are converging toward better performance and developer experience, so one can feel confident picking the one that fits their workflow.

Image source: State of JS 2024 survey.