Boosting eCommerce Success with 100% Website Performance

Don't let slow website performance put the brakes on your eCommerce success!


With our extensive experience in web development and optimization, we aimed to develop a highly responsive website with a perfect PageSpeed Insights score of 100%. We're proud to present our case study showcasing how we achieved website optimization excellence in just three months. Join us as we explore how we achieved 100% website performance and how it can help boost eCommerce success.

About the project

UUUSoftware is a well-established Canadian software development agency with over 15 years of experience in the market. In 2022, we rebranded from UUUDesign to UUUSoftware, as we shifted our focus towards software development. As part of our marketing efforts, we invested resources into building a new corporate website.

Website optimization is crucial for both online sales activities and brand awareness, regardless of the type of business. It enables additional opportunities to boost conversion rates and enhance customer satisfaction.

A well-optimized website provides a seamless and responsive experience for visitors, ensuring quality traffic and a positive perception of your brand. This is especially critical for SaaS, IaaS, and PaaS platforms.

  • 100%

    performance score

  • 1.7 sec

    mobile app load speed

  • 2x

    increase in retention rate

  • 0.4 sec

    web app load speed

Client's challenges

  • We set an ambitious goal to create a website with 100 out of 100 PageSpeed Insights rank. The challenge was to achieve this goal by building a fully-fledged website, with 50+ pages. With various components, sliders, and a set of fancy animations, the website’s page speed score typically drops significantly below the threshold of 80, somewhere into the 60 or even the 40 zones. In addition, as soon as you add Google Analytics, Chatbots, Sentry, or other things, the site becomes even heavier and slower.

  • We faced multiple technical challenges, related to Layout Shift, improper WebPack CSS linking, extraction of critical CSS, Contentful paints, etc.

  • We wanted to achieve the set goal in four months without getting out of our usual timetable. UUUSoftware always adheres to the principle of an 8-hour and 5-day working schedule. Even though this project needed to be completed as soon as possible, we didn’t want to overcome the deadline challenge at the expense of our approach and principles.

Our case study

Layout Shift

The challenge with Layout Shift and Contentful paints was solved by inlined CSS, inlined fonts, and proper image sizes.

Our case study

Upgraded Preact

Our team overcame the improper WebPack CSS linking by upgrading Preact to Webpack5, that had not been done by its authors yet.

Our case study

CSS extraction

To clear the obstacle of critical CSS extraction, we replaced PreactCLI by Headless Chromium to render the pages for SSG.

Our case study

Layout Shift

The challenge with Layout Shift and Contentful paints was solved by inlined CSS, inlined fonts, and proper image sizes.

Our case study

Upgraded Preact

Our team overcame the improper WebPack CSS linking by upgrading Preact to Webpack5, that had not been done by its authors yet.

Our case study

CSS extraction

To clear the obstacle of critical CSS extraction, we replaced PreactCLI by Headless Chromium to render the pages for SSG.

Our case study

Layout Shift

The challenge with Layout Shift and Contentful paints was solved by inlined CSS, inlined fonts, and proper image sizes.

Our case study

Upgraded Preact

Our team overcame the improper WebPack CSS linking by upgrading Preact to Webpack5, that had not been done by its authors yet.

Our case study

CSS extraction

To clear the obstacle of critical CSS extraction, we replaced PreactCLI by Headless Chromium to render the pages for SSG.

Tech Stack

Frontend

  • ReactJS

  • PreactJS

  • JavaScript

  • JSX

  • SSG

  • SCSS

  • CSS animations

  • Webpack5

Optimizations

  • Lazy loading

  • Retina downsizing

  • Critical styles

  • Upgraded Preact

DevOps tools

  • GitHub actions

  • Chromium

  • Prerenderer

CMS

  • Headless CMS

  • Netlify

  • CDN Hosting

Project details

UUUSoftware team had a clearly defined task and established a strategy to complete it:

  • We refused the use of WordPress giving preference to headless CMS and Netlify, as they have been a high-performance trend lately. To achieve the best performance, our team chose a lightweight version of ReactJS called PreactJS.

  • Our team upgraded the PreactJS bundler by replacing WebPack4 with WebPack5. We also got rid of Preact CLI and used NPM instead, since it was a bit outdated.

  • For performance tuning, our specialists used inlined critical styles, inlined fonts, and lazy image loading, etc. We also created several resolutions for the same backgrounds for the srcset, prebuilt by WebPack automatically. We used Static Site Generation (SSG) for all pages and lazy JavaScript hydration to improve "the time to interact" metrics.

  • Our specialists also optimized SVG files by reducing their file sizes and overall bundle size.

As a result, our team, which consisted of six specialists (3 developers, 1 designer, 1 content writer, and 1 product owner) developed and managed a 51-page website and reached a website performance score of 100% in just three months.

UUUSoftware managed to design and build an advanced website the way that its page speed is superior, whatever technical and content enhancements the team members would find appropriate to make.

2

specialists

1

months

121

hours

13

page

Do you have a project in the same industry niche?

Get a free 30- to 60-minute consultation on your project!

Not quite what you had in mind? Discover our other projects!