Retail Giant Byggmax Reaches 99 PageSpeed Score on Hyvä

About the project

Byggmax is a leading retailer of home improvement, discounted DIY materials, and electronics. They operate across 3 Nordic countries, have 160+ physical stores, four Magento (Adobe Commerce) stores, six store views, and 55k+ SKUs. scandiweb has been helping Byggmax for several years to seamlessly integrate all elements and manage their site under one digital roof, providing proactive 24/7 support and implementing new features.

For Byggmax, page performance is an important aspect. As one of the more recent projects, we set out to optimize the overall website performance and increase the PageSpeed score on both desktop and mobile.

Challenge

Byggmax has lots of custom functionality that likely lead to increased page load times, e.g., different prices for products in various stores and product availability per store. With this project, they wanted to redesign product listing pages (PLP) and product detail pages (PDP), make all the custom functionality easy to understand for the end-user, and improve page performance. 

Our approach

With Byggmax being such a giant retailer with a customized site, we were not ready to migrate the whole site to PWA but preferred to do it page by page. To meet the project goals, the scandiweb team offered the Hyvä frontend theme to Byggmax.

About Hyvä

Hyvä is a Magento 2 theme built from scratch using a completely blank theme. It allows you to migrate page by page, keeping the checkout intact with all the payment and shipping extensions working as usual while migrating only the PLPs and PDPs to Hyvä to bring the speed and performance where needed most. 

Learn more about the Hyvä theme advantages and the Hyvä setup framework we’ve developed.

Byggmax migration to Hyvä

The team

We assembled a team of people with varied expertise and experience—the Byggmax core Support team in scandiweb who know their website inside and out and colleagues with previous PWA and Hyvä experience—to work on the Byggmax migration. It was also essential to keep at least three people working on daily maintenance tasks while the migration was in progress.

The process

• Set up a separate staging environment to not interfere with daily work and daily releases
• Identify all elements, modules, extensions, custom code that will need compatibility, and gray areas such as layered navigation; prioritize tasks from critical to low priority
• Move the site to Hyvä page by page, starting with global elements, PLPs, then PDPs
• Test page speed on staging before the go-live
• Ensure page performance is optimized to the maximum after the go-live.

List of extensions, integrations, and custom features we planned to test for compatibility and adjust within the project:

GLOBAL

• Page Builder, incl. custom elements
• scandiweb Menu Manager
• Store selector
• Loop54 AI search, search results, and relevance sorting
• Amasty GDPR and cookie pop-up
• Google Tag Manager for PDP and PLP events
• Mageworx meta titles and descriptions
• ElasticSearch
• Lazy loading
• Custom wishlist

PLP

• Amasty Layered Navigation, incl. custom features
• TestFreaks reviews
• Flowbox User-Generated Content  
• Amasty Infinite Scroll
• Sorting, incl. relevance sorting by Loop54

PDP

• Stock status in a particular store
• Shipping estimations from .NET
• Quick facts
• Display main price
• Suitable accessories
• Help pop-up
• Collector Bank widget
• Product back in stock alert
• Product recommendations

Website optimization

We began by working on global elements—header, footer, pop-ups, quick search, etc. We also knew that PLP would be the first page to go live with Hyvä, and to be efficient, we tackled the most complex feature, layered navigation, first. 

The Byggmax team prepared different designs for PDPs, so we had to identify and write custom code to exclude Hyvä from some PDPs and PLPs.

Since we used the client’s old website as the basis instead of building from scratch, they expected all the features to be transferred, including custom functionality not included in the new designs. This required careful comparison between old and new versions of the PDPs from the scandiweb team.

When we were ready for the go-live, we tested page speed on staging to ensure it had not degraded. After the pages went live, we checked the main areas we could improve in terms of page performance and took the necessary steps.

Lessons learned

Since our approach was to go page by page, all global elements must be available and styled on both themes—Core Magento and Hyvä, which in turn:

• Obliges pixel-perfect styling so that, say, the header on Core Magento and Hyvä page looks the same, and there is no deviance when switching between pages
• Becomes more complex when we need to work on a new feature that might need compatibility on Core Magento and Hyvä pages 
• Complicates testing—whenever you do something with global elements, it always requires testing on Core Magento and Hyvä pages. 

Our analysis showed a significant peak in week 33 for PDP compared to the previous weeks, even before launching Hyvä PDP. This means that changing the FE theme can have a positive impact, but you must rely on more than changing the FE theme to resolve all performance issues.

Note! It’s essential to collect data correctly to compare before and after later. This way, you’ll see reliable data about PageSpeed scores over time.

Hyvä is a great technology choice in case anything happens with the website. We can turn off the theme and see the old version, which gives Byggmax a safe fallback plan. 

Results

• Increased PageSpeed scores: PLP (85 to 99), PDP (70 to 87)

The graph shows that the new PLP was released at the beginning of July (week 28) and the PDP at the end of October (week 43). There’s a significant increase in PageSpeed scores over time on desktop. Since Hyvä PLP release and optimization, Google PageSpeed score for desktop varies between 94-99 points. The scandiweb team still has some optimizations planned for the PDP, so overcoming the 90-point threshold is just a matter of time. 

• Reusable learning materials

While working on this project, we prepared several reusable guides and videos for developers that we now use as our internal Hyvä training program for every teammate to learn to work with Hyvä successfully in just three days. 

• PLP and PDP with a brand-new design

Freshly optimized PLPs and PDPs got a complete redesign created by Biggmax’s designers and supported by scandiweb’s CRO and migration teams. 

Future plans

While the desktop score for the Byggmax website skyrocketed, the mobile performance increase has been a bit of a slower climb. scandiweb team has already begun a further investigation to optimize the mobile performance using the Hyvä theme.

Are you having issues with page performance on your website? Have you considered the Hyvä theme or a similar solution and are interested in the timeline and costs? Let’s get in touch and discuss your goals!

Share on: