100% performance for an ecommerce website

Our team achieved supreme website performance by utilizing the latest tech stack.

About a project

UUUSoftware is a Canadian software development agency that has been present in the market for more than 15 years. As the company pivoted its focus to software development, UUUDesign was rebranded into UUUSoftware, in 2022. We invested some of our resources in building a new corporate website to use it as a marketing channel.

Having extensive domain experience in web development and optimization, the development of our website wasn't an exception. Our goal was to develop a highly responsive website with a PageSpeed Insights performance score of 100%. Welcome to our case study of achieving excellence in website optimization with only three months of development.

Website optimization plays a vital role both for online sales activities as well as for brand awareness, regardless of the type of business. It opens additional opportunities to increase the conversion rate and increase customer satisfaction. An optimized website provides a flawless and responsive experience for visitors, ensuring quality traffic inflows and a positive perception of your brand, which has critical importance for SaaS, IaaS, and PaaS platforms.

Our team achieved supreme website performance by utilizing the latest tech stack.
Challenge

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 solutions

UUUSoftware team had a clearly defined task and established a strategy to complete it. Firstly, 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.

Our team managed to resolve all technical problems related to website optimization. The challenge with Layout Shift and Contentful paints was solved by inlined CSS, inlined fonts, and proper image sizes. Our team overcame the improper Webpack css linking by upgrading to Webpack5. And finally, to clear the obstacle of critical CSS extraction, we replaced PreactCLI by Headless Chromium browser for SSG.

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.

Solution

Project details

2%
performance score
1
pages developed and managed
0x
increase in retention rate

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