Håkon Gullord Krogh

Putting those frontend performance checklist suggestions to work.

With the number of available tech solutions, tools, architectures, and approaches to web development today, it is easy to get overwhelmed when choosing the one for your online store.

Headless, composable, API-first, Remix, UI or UX-driven design, etc. Tracking development and design trends in eCommerce is both tough and rewarding at the same time.

Why Turborepo? We wanted to expose Crystallize App components in a public design system, speed up build times in the CI and on local machines, and create the foundation for micro frontends.

Google Tag Manager can influence your overall website performance just as any other external 3rd party script. Luckily, there are a couple of things that you can do in that regard.

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.

Remember the unicorn designer? The designer also knows how to build that markup with HTML and CSS - or even in React. Well, the times have changed. Google launched the core web vitals for measuring site speed and the bar is raised. It is now significantly harder to get a 90+ score in PageSpeed Insights for mobile than just a few weeks ago. Site speed affects Adwords pricing as well as SEO ranking. As a result, the designers of today have to take into account site speed as part of the design process.

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.

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.

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.

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 really matters for user experience, conversion, and of course good old SEO. To build fast websites you need to have the performance metrics and KPIs defined.

The ability to offer a personalized, localized experience to your customers fast is hugely important for today’s businesses. With that in mind, let’s talk about Jamstack, ecommerce, and multilingual setup.

Jamstack is now more popular than ever due to its promise to deliver better performance and scalability than traditional server-rendered websites. Still, when comparing performance to a traditional server-rendered site, many Jamstack sites lose, leaving the end-users worse off.

Getting your own shop up and running with Crystallize is a breeze. We have prepared a boilerplate for you to get started, as well as standalone React components to help you with doing stuff like managing the basket and collecting payment. As a frontend developer, you just need to have NodeJS installed, and then execute this:

npx @crystallize/cli my-new-ecommerce

That’s all it takes. You will be guided through the rest of the setup process to connect to your tenant and to set up your shop.

Lazy loading is a great concept that aims at enhancing frontend performance results. In essence, it enables us to defer the loading of assets until they are needed.

Dialogs in React are something that I have never fancied. The available open-source libraries out there don't really fit my need as they either do too little, too much, or simply do the wrong thing. I want my dialog library to be:

• Accessible
• Simple to style
• Not forcing me to include an extra .css file
• Usable with default config
• Be promise based
• Callable via functions, not as JSX elements
• Provide alternatives to the native alert() and confirm()
• Do nothing else. No magical image slideshow gallery thingy. I don't want a myriad of different transitions options.

After a long time researching and evaluating, I concluded that no libraries out there do exactly this, and so I decided to create one for Crystallize. Using the excellent a11y-dialog as the base, it does not require much code to give me exactly what I want!

One of the most sought-after features in Crystallize is the fast ecommerce API. You can expect us to spend not more than a fraction of a second crunching your data before sending it back to you. This is what fast headless ecommerce is all about, and is one of the most important reasons people are looking towards Crystallize. A fast API is key for frontend performance and helps drive ecommerce SEO.

React Hooks was recently announced by Dan Abramov at React Conf and it offers a new way to do really simple state management without the use of class constructors. Let us see how we can use this in a very simple way.

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.

When using illustrations, infographics, or diagrams you would often like to use a simplified version for mobile devices vs a full desktop display. Using the picture tag and a simple media query you can easily do this in good old HTML. No JavaScript or CSS trickery is needed. The same technique can also be used to serve responsive images that are optimized for site speed.