Case study: Jamstack website for Endgame with 200% better site speed results

Acclaim/Blog/Case Studies/Case study: Jamstack website for Endgame with 200% better site speed results
  • Comments icon
    0 comments
  • 4 minutes of reading
  • 1056 views
Share

Check out our case study for Jamstack site project that we created for Endgame. In our case study we provide key features, challenges & solutions along with website optimization result achievements.

jamstack wesbite for Endgame with 200% better site results

Endgame changes the way we sell software. This company focuses on product-led sales. We no longer live in a world where we sell software programs to company owners & executives. Instead, we are provided with free trials on various software developments. Based on user experience during free trials, they make a choice. They decide whether to buy a software program or not.

This new website is a Jamstack project based on Next.js and CMS 👉 Sanity.io. 👈 The basic idea was to easily create content by adding content via WYSIWYG style blocks.

The entire website is based on data downloaded from the CMS. The data is fully configurable. Furthermore, thanks to the use of Next.js on the front side, we could minimize the optimization of photos. Additionally, thanks to the next / image, we could switch between routes without refreshing pages. Therefore, we were able to create static pages.

Page Speed test results & website performance optimization

Here at Acclaim, we pride ourselves on providing our customers with highly optimized websites. We ensure that each website has a high page speed. Additionally, it is fully optimized. All of this ensures top-ranking results on Google and other browsers. For the company Endgame, we were able to do the same. Our team of developers put in a lot of effort to ensure website speed optimization.

Page speed results prior to the new Jamstack site & before site optimization

Before Endgame came to us, they had poor page speed results, especially when it came to their mobile results. Our team of developers is aware of how important mobile-first is when it comes to Google and website speed optimization. One of our priorities was to increase this number, and we managed to do so by 50%, thanks to our webpage solutions.

Previous PageSpeed Mobile Results
Previous PageSpeed Mobile Results

Jamstack website with improved Page Speed Performance tests

We managed to improve Endgame Page speed results by 200%. Faster load times on both desktop and mobile means overall better website’s performance. For more details on how we managed to make this happen, check out our project challenges and solutions below.

PageSpeed Insights Desktop results - website speed testing
PageSpeed Insights Desktop results – website speed testing
PageSpeed Insights Mobile results - website speed testing
PageSpeed Insights Mobile results – website speed testing

Better page speed performance for Endgame on Jamstack architecture

Pingdom - loading time 5s - Endgame
Pingdom – loading time 5s – Endgame
GTmetrix Results-Endgame
GTmetrix Results-Endgame

If you are interested in increasing your website’s search engine optimization, consider getting your own 👉 Jamstack project 👈

Technologies we used to build this website

Technologies used in this Jamstack project:

What are some key features of this new website built on Jamstack?

Client-side vs. server-side

On the Next.js side, Incremental Static Regeneration has been implemented. This is a kind of hybrid between the client-side and server-side. It allows us to easily determine the page build revalidation time.

The method of data fetching was based on the GROQ recommended by 👉 Sanity.io. 👈 We also had the option to use the well-known GraphQL. However, GROQ turned out to be very intuitive and easy to use.

Static files and image files editor

We also used Image Builder from Sanity. This website tool allows for easy editing of photos. You can edit your photos by:

  • cropping them
  • creating hotspots
  • resizing them
  • and so much more
Image block on website - endgame

Dynamic site map

On this web page, we were able to add a dynamic site map. This sitemap is a hybrid of server-side sitemaps and next-sitemap.

What were some of our challenges when building the Endgame website?

Challenge: Customizable content

One major challenge here was to adjust the content editing options. We wanted to make the editor interface as intuitive and modular as possible. This was achieved by using Portable Text from 👉 Sanity.io. 👈 This function enables the user to drag and drop content. Each content block can be easily edited and placed anywhere on the page.

Learn more about 👉 headless CMS 👈 is great in terms of presenting content in various ways.

Editor's interface Jamstack

Challenge: website speed optimization

Also, an important part of this project was taking care of 👉 website optimization. 👈 We came upon a few challenges in this area because of dynamically loaded content. This leads us to deal with problems such as Layout Shift, Scripts Chain, and minifying the size of bundle.js.

In order to thoroughly test the sizes of the script files, we used the bundle-analyzer, which allowed us to determine which files should be reduced.

We also took care of the optimal placement of the scripts and the reduction of scripts that Next.js receives for blocking the rendering of the page by the website user.

Additionally, we chose to use next/dynamic in some components. This tool was useful to dynamically import components like a large number of fonts and their sizes. We had to look for a solution to the issue of chaining critical requests and the sizes of the fonts that are loaded. So we reduced local fonts and added fonts loading above the fold to node_modules. This allowed us to reduce the query time.

Various fonts on website

We also used 👉 segment.io 👈 in order to track user behavior and analytics. The information stored using this tool is vital for most website owners. The user behavior and analytics give key demographic information to better expand and develop your business.

Common web development challenges and solutions

For more common issues and solutions during web development, check out our latest 👉 blog 👈

Related articles

Comments

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.