Blog Posts (20)
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.
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.
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:
- 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!
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.