lighthouse VS Vue Storefront

When we implemented the MVP of the fintech app, we had a quite complicated form. At that time, I was still young and inexperienced. And eventually, we realized that our project was slowing down. We had to spend additional hours figuring out the reason. We had many unnecessary re-renders because we ignored basic rules related to props in React. I wanted to do everything possible to avoid such situations in the future. So, I added to the project linters like this and an additional starting configuration to package.json to run why-did-you-render. In short, this plugin issues a warning if something is re-rendered unnecessarily and suggests how to avoid it. Also, we included running Lighthouse in headless mode. Some people say that premature optimizations are bad, but for me, it's a principle: do it right from the start.

There's a link to what they mean by mobile network there (https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md) and it says:

Here's the non-psuedo code equivalent that can leverage CompressionStream rather than using a browserified-gzip-library: https://github.com/GoogleChrome/lighthouse/blob/437eb4d757c5...

We use it in Lighthouse for the exact same purpose, a URL #hash full of state. We found that modern browsers support 10mb of data in the hash. https://github.com/GoogleChrome/lighthouse/pull/12509#discus...

You can find out if your SaaS app is slowing down with Google Chrome Lighthouse. Lighthouse should be a staple in your monitoring because it lets you see the performance, accessibility, and SEO metrics related to your app's performance.

[2] https://github.com/GoogleChrome/lighthouse/issues/10023#issu...

Lighthouse: A tool developed by Google to measure a website’s performance using an average of six metrics.

Performance Using Lighthouse as a measurement tool, the blog should score 100 on all criteria.

For implementation testing (e.g. WCAG 2.1 compliance, performance, best sec practices) there are checkers like webhint, lighthouse, and Pa11y.

The website should score 80+ in performance, SEO, and accessibility in Google Lighthouse tests. Plus, the load time should always be less than 2 seconds and ideally in the order of a few hundreds of milliseconds. The real challenge lies here, since the website consists of more than 2 million pages, and pre-rendering them all will take weeks. Also, the content shown in most of the pages is not static. Thus, we opted for an incremental static regeneration approach. When a visitor hits a page no one ever visited, Next.js generates it with the data retrieved from the APIs exposed by the backend. Then, Next.js caches the page for 30 or 60 seconds, depending on the importance of the page.

We're currently building an integration between Vue Storefront (https://www.vuestorefront.io/) and WooCommerce.

If you are looking for a production-ready Nuxt application with Shopify, check out https://www.vuestorefront.io/ and especially, the integration with Shopify https://docs.vuestorefront.io/shopify/.

Vue Storefront is an open source frontend framework for headless ecommerce built on top of Vue.js. It provides ready-made integrations to existing ecommerce platforms and allows you to extend the framework to build your own integration.

To enable Cache on the browser level, we will be using a http-cache package from Vue Storefront that you can check out here.

For the storefront you have many options. For instance, there is Vue Storefront or Next.js Commerce.

Vue storefront is an open source platform that provides a storefront for ecommerce platforms. Although it integrates with many monolithic platforms, it is made specifically for headless commerce platforms.

The point of headless is that your data can come from anywhere. Shopify can hold the product images, the prices, the inventory, or it could only deal with the order management and none of the product information. You could build all of your products in something like Contentful. Have a look at https://www.vuestorefront.io/ might give you a better sense of how these things can integrate together.

Vue Storefront 2: https://github.com/vuestorefront/vue-storefront/discussions

I present to you the dream stack -> Vue Storefront & Vendure.