How to keep your web apps healthy

David Vršek and Adam Jedlička (both StoreFront X Developers) were among the speakers at the webinar Time to speed up! and had an inspiring presentation about the performance of the apps in relation to Core Web Vitals. We bring you the summary of their speech. 

How did it all start?

Our clients were coming to us worried about the performance of their websites, mostly dealing with decreasing conversion rates, poor UX, insufficient SERP position, low mobile web app conversion rate, or overloaded servers during the peaks and holidays. We run some tests and found out, that almost all of the web pages are not compliant with Core Web Vitals. If you want your website to perform better, you definitely need to find out, where you are. How? It’s pretty easy, you can use this link.

The snowball effect

If you run the test, you may find out that you have the same problem. What went wrong? How does it happen? Well, you simply add features to your web all the time. Things like chatbots, A/B testing tools, new banners, etc., and with that, you also add hundreds of KB to your frontend. And your website is getting bigger and bigger, which has an impact on your users.

Believe it or not, there has been a 40% rise in the amount of KB during the past three years! And that is definitely not a good thing, because it affects your performance. Another reason is that the frontends are obsolete. The apps are made of one big package, the users are unable to download smaller packages and that makes the sites slow and unresponsive. That means that the users are waiting long seconds before something happens which leads to leaving the page.

How can we stay competitive and improve

Now you know you have a problem, so you have to look for a solution, but how should it look like? We think you should consider these 4 parameters: scalability, SEO, developers, and technology. You need a solution that can handle high load and business growth, has good UX and is friendly for robots and developers as well. Moreover, you need to have a built-in mechanism to keep performance on the top level, keep up with the latest trends and be compliant with core web vitals.

We did research to find such a solution and … we have not found one! The existing solutions didn’t fulfill all the desired parameters for many reasons. One of them is that they started development way before web vitals. Then they did not focus on a single platform or lacked guidelines for all the participants to keep performance on the top level.

If you can’t find it, you have to make it!

All the solutions we looked in were based on PWA. That is a good thing because it is modern and efficient technology, but with some major problems.

Problem #1: PWAs have a slow initial load

You visit an e-shop and... nothing happens for a long time, then the content is loaded slowly, and just before you click on the product there’s a huge layout shift and you click on an ad. Oh no, that is a nightmare, your customers do not deserve this! This happens because PWAs are JavaScript-only, there is no HTML for the server to render.

Our solution? Server-side rendering where you see the content immediately with the main image and the rest shortly after. This leaves the door open for a higher conversion rate, lower bounce rate, and good customer experience. It also has a great impact on Web Vitals:

  • better First Contentful Paint (content is visible immediately)
  • better Largest Contentful Paint (large images are preloaded and thus visible ASAP)
  • zero Cumulative Layout Shift (server-rendered markup keeps the page from shifting when loading dynamic content)
  • plus better SEO & SERP position for free! (it’s easier for SE to crawl server-side rendered apps than JS only)

Problem #2: JavaScript negatively impacts performance

JavaScrip is also a good thing. It allows you to have interactive web pages with good UX. But when there’s too much JS, you have a problem. It takes a long time for the page to become interactive (it can take like 15s or even more).

Our solution? The performance-based approach basically means that you divide the page into smaller components and then you decide which JS needs to be loaded when. Some JS needs to be loaded immediately (like e.g. products and cart), some JS is loaded on interaction (like menu, filter, search), other parts with JS are loaded when visible (e.g. footer) and some JS never or on-demand (logo, breadcrumbs…).

It does not mean that the other components are not visible, users can see them, only JS is missing and gets executed only when the user interacts. For better understanding check out the picture below.

And what impact this approach has on Web Vitals? Lower Time to Interactive (JavaScript is executed only when interacting with components) and lower Total Blocking Time (less JavaScript is downloaded & executed).

Problem #3: Flexibility

What if the business or customers want something special? The platform has to be flexible and allow any possible modification.

Our solution? Modularity. The application is split into many small modules (catalog, blog, checkout…) and these modules can modify each other. You can e.g. create your own module with bestseller products and add this functionality to the catalog. You can have many different modules and just turn them on/off whenever needed. And what impact this approach has on Web Vitals? Better Time to Interactive & Total Blocking Time (only needed JavaScript is shipped to the browser).

Mmm, sounds good…

Well, does it make any sense to you? It definitely does to us and our customers. Our new platform is called StoreFront X and if you are interested to learn more about it, we would be delighted if you contact us. We would like to hear your opinion and discuss your experience.