Project description:
My client was a large children's book store located in San Diego, USA, and needed to migrate a page from a website builder to a newer, faster technology to give users the best experience.
This page was originally built on the page builder for Shopify - Unbounce. However the problem was that this company did not have full-time web developers and the person creating this page made several serious mistakes, for example, he used containers for images with a fixed width, which led to severe problems for the mobile version of the site.
For me, there was no problem in creating the design of this page for the complex one, it was that you had to integrate Gatsby.js with Shopify. Additionally, I needed to connect some analytics scripts, which, due to the peculiarities of Gatsby.js (static page generation), did not want to function. However these problems have been resolved, and the analytics scripts are loaded later than the generation of the page itself, which has a positive effect on performance.
In general, the project could not turn out fast, since the company uses more than five different analytics scripts, each of which seriously slowed down this project, but in general, it was possible to improve the LightHouse performance by more than 30 points.
Responsive development
The website is adapted for all devices. In this case, the CSS framework Bootstrap was used
Unique design
The website has a unique design that is not similar to competitors.
Improved Performance
+30 points in Google Light House performance which improved the user experience.
Ready to
work with us ?
Get A Quote
Technology:
- Gatsby.js
Gatsby.js is a free and open source framework based on React that helps developers build blazing fast websites and apps.
- React.js
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
- GraphQL
GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.
- Styled Components
Styled Components is a CSS-in-JS library that enables developers to write each component with their unique styles.
- Shopify
Shopify is a Canadian e-commerce company headquartered in Ottawa, Ontario. It is also the name of its proprietary e-commerce platform for online stores and retail point-of-sale systems.
Result:
Initially, the page had a 30 LightHouse score. I was able to improve page performance by +37 points to 67 points.
But because my client uses almost 300kb of analytics scripts (Google Tag Manager, Elevar, Everflow and more) this site will never be fast. I suggested various other solutions that work on the server side, but my client is more comfortable with the analytics that they have now.
This E-commerce page is fully responsive to any device. We've made some minor design changes, images are optimized (lazy loaded) for performance. Also, analytical scripts are loaded a little later, which also improves loading speed.
- Project URL:
- Technology:Gatsby.js + Shopify
- Location:USA, San Diego
- Project type:Landing page
- Duration:1 weeks
