How to keep your web apps healthy
Februar 17, 2022
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 Google Search Console and Google PageSpeed Insights.
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.
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!
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.
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.