What?! Puma on ScandiPWA | ScandiPWA Meetup
Alex Tse, ScandiPWA evangelist and Business developer at Scandiweb
Before we share our exciting news about the Puma brand embracing PWA and tell more about the process, let’s discuss reasons PWA is the best choice for any eCommerce business.
PWA necessity
We all know why Progressive Web Apps are great, but I would like to highlight their necessity. Everybody in the community is praising the technology stack, plugins, etc. We can appreciate that as developers, for business, it means nothing. Business wants money. What is driving money? A good website. What makes the website a good one? Speed.
Let’s say as an example, the average loading speed of a page is 8 seconds. Sounds OK, but if you experience an example of that in real-time, it’s way too long for the homepage to load.
When we think about PWA, this new technology solves that problem. Fast load times create brand credibility in the eyes of the user from the very first moment they visit the website. You can potentially achieve that by using a lot of caches, but why not use caches + PWA?
Why Puma joined PWA
It started from an example of the current store that they have — a category page of Puma US, which is not on PWA with a performance score of only 19%. The main blockers are long rendering time, image procession, PHP execution. It is certainly not as good as it could be. If we are speaking about a sports brand promoting speed, their website should be reflecting that as well.
We saw the problem in the Lighthouse score and decided to do something to resolve it. Basically, that was our main point when pitching PWA. We promised to resolve the performance issue for the user in terms of speed and the duration of each session.
In contrast, let’s take a look at the category page of their Mexican website, which is now on ScandiPWA. There were a lot of things implemented to resolve the performance issue for the fastest brand in the world, as we strongly believe their store should also be the fastest in the world.
With Puma MX, we faced a challenge to learn, understand, and replicate their original 5-year-old Magento theme in ScandiPWA. Because of the ScandiPWA modern technology stack, it was possible to introduce the same amount of features and migrate them in 3 months.
How did we achieve that?
Check the Puma MX website powered by ScandiPWA live https://mx.puma.com/
Optimization of the initial bundle size
The development team optimized the initial bundle size and broke the bundle into chunks. If your store does not use wishlists, why have a wishlist on the bundle? This is a common mistake I’ve seen on several recently launched PWA stores.
Mixing CSR with SSR
We split the rendering into two different streams, mixing server-side-rendering with client-side-rendering. The server-side is handling the heaviest part on the server to be sent prior, and everything else is optimized.
Using Varnish + Redis Caches
We see stores that are not using those or using just one cache and not the other, but it’s super important to use both.
WebP Image optimization and lazy loading
We reduced the size of the images by converting them to WebP format and also used the already known technique of lazy loading content when it is actually needed to improve first load speed.
WYN approach for attributes on PLP
On the heaviest page, which is category listing, ScandiPWA provides the chance to only request what you need (WYN). For example, on a PLP that has 30 products and 30 product descriptions and attributes, you don’t need to load all product descriptions, just filters, and some basic information.
Hosting on ReadyMage
ReadyMage is optimized hosting for ScandiPWA and Magento 2 projects. Usually, websites see an increase of 10–20 points in lighthouse score when using ReadyMage.
Want to learn more about ScandiPWA?
We have introduced several of these improvements as part of the current release already. ScandiPWA is a free and open-source PWA theme for Magento. You can learn more about it on its official website scandipwa.com.
ScandiPWA is a free and open-source PWA theme for Magento —
https://scandipwa.com/?utm_source=medium&utm_medium=article&utm_campaign=spring_meetup
Follow our social media accounts to be the first to know about any news and updates:
