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 presented on the market for 15 years. As the company focuses mainly on software development, in 2022, UUUDesign company decided to rebrand into UUUSoftware and invest some of its resources in building a new corporate website to use it as a marketing channel.

Being professionals in web development and optimization, we never settle for less. Our goal was to develop a modern website with a PageSpeed Insights performance score of 100%. Check out our case of achieving the best possible results in website optimization with only six team members and three months of development.

Website optimization is vital for any kind of business engaged in online selling and brand positioning. An optimized website brings in quality traffic, allowing you to provide visitors with targeted and personalized experiences. For SaaS businesses, website optimization opens additional opportunities to increase the conversion rate.

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 size

0%
performance score
0
pages developed and managed
0
team members

Tech Stack

Frontend
  • ReactJS
  • JavaScript
  • TypeScript
  • JSX
  • Redux
  • SCSS
  • AJAX
  • Webpack
Backend
  • Microservices
  • .NET Core
  • REST
  • SQL SERVER
  • Entity framework
  • MassTransit
  • Kubernetes
  • Docker
QA tools
  • Cypress
  • Jest
  • Postman
DevOps tools
  • AWS
  • EC2 instances
  • GitLab