Skip to Navigation
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.
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.
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.
Better page speed performance for Endgame on Jamstack architecture
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
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.
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.
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 👈
Comments