Developed Mobile-responsive, Lightweight PWA using Gatsby.js

Project Goal

A service-based company’s website must be exceptional not only in terms of design but also in terms of the type of user experience they provide. The stakes are higher for a company that works with product design for a wide range of clientele.

The client provides Outsourced picture editing services through his WordPress Site. They edit images for marketplace product portfolios on the behalf of the customers. The end-users upload the photos on the website and the client turns them into professional images.

The website of the client ran on simple WordPress. A large amount of content and a long list of services put a load on the platform, resulting in a slow website. To improve the page loading speed and reduce the burden on the website, the client approached our development team for help.

Solution

After grasping the requirements of the client, our development team began to develop a static website with Gatsby. We understand that to the client a professional website represents a whole business. Before starting the development process, we understood the branding aspect and how the end-user perceive the website. We used the following procedure to deliver the WordPress static site using Gatsby: 

• Designed a Gatsby site and integrated the client’s WordPress with it.
• The URLs were retrieved.
• Templates for pages and posts were created.
• Use GraphQL to fetch the posts.

As a result, while the final website design was still a part of WordPress, it was emancipated from its operations. The response time for animations has improved dramatically as a result of the faster page load time.

✔️ Static site development using Gatsby and WordPress

Gatsby behaves more like a web app that saves a lot of data in the browser than a simple website framework. The information from the data source is pre-fetched by the React-based framework. It is the existing WordPress site with links in our situation. 

To handle this, our professionals have written unique scripts. Gatsby is triggered to produce pages for each link from the WordPress site by the script. The custom scripts run GraphQL queries to retrieve the post-publication dates and author names. Our solution now fetches all of the pages ahead of time, preventing the website from triggering the WordPress backend regularly.

Gatsby also has the benefit of rendering the pages even when WordPress is down. The website no longer relies on the server to find pages because Gatsby has already saved them in the browser.

✔️ WordPress with Gatsby: Fetching Content from WordPress

Our development team used Gatsby with WordPress to improve the site performance and development speed. The list of services and content was too long that which affect the loading time. 

Gatsby can gather information from a lot of sources. For a smooth data interchange, the framework provides a WordPress REST API plugin. The API is capable of retrieving data from all endpoints, as well as the content they store. 

We tweaked the APIs to get just the correct amount of information from the client’s website. The blog content, thumbnail photographs, blog images, and headings can be retrieved via the custom API. The custom API ensures that no data is lost in the process, and the newly built website provides an enjoyable user interface.

✔️ Integration options for Gatsby with WordPress

Our team of specialists made certain that the final website provides a consistent user experience across all devices. The content and action buttons are optimized for all screen sizes.

Users see websites that speak their local language as more customized. Our professionals used their multilingual website development knowledge to make the Gatsby static site multilingual. The website pulls translations from English and Dutch JSON files that are kept separate. 

✔️ Create a PWA

Gatsby expands its offline access capabilities with new-age features like PWA. As a result, website owners can offer native-app-like functionality to their consumers. The user can download the website and visit without an internet connection.

Final Words

So this was how our development team decoupled CMS. It offered an excellent user interface to the client’s traditional website. You can reach out to us right now if you want to replace your old WordPress infrastructure with a headless approach or a static website to speed up page load times.

Client’s Feedback

5.00

“A job well done! I will hire them again.”