Objective
Build an ultra performant & converting website that meets high demand of tech-savvy visitors to increase company revenue.
About the Flat World
How to connect the world’s best IT Specialists with ambitious and fast-growing companies?
Flatworld is on a mission to disrupt the world of remote work and enable companies to build and scale their business by finding them the best match for their needs and the company’s DNA.
They hone a broad understanding of the psychology of candidates and organizations, stringent technical vetting, and a killer algorithm that they have developed for automating and accelerating the locating and matching of remote top amazing talent for their clients.
Flatworld matching process is aimed to be seamless, fast, easy, and spot-on.
Outgrowing Monolithic WordPress
FlatWorld customers are fast growing startups, and a slowly working website was not something that could exist in this ecosystem.
On a first conference call Gilad pointed the main issues with the current FlatWold WordPress site:
Decreasing conversion rates because of low performance and bad user experience of outdated user interface.
Decreasing organic traffic because of performance issues and weak technical SEO optimisation.
Low Google PageSpeed Insights results and no chances to improve on the current WordPress site
Outdated, hard to manage technology stack, full of weighty plugins like Elementor
Services provided
Wordpress
as a Headless Cms
On-Site
Technical Seo Optimisation
Adopting a Headless WordPress architecture
FlatWorld was using WordPress for the last several years and they liked many of the existing functionalities.
That’s why we decided to keep WordPress working as a headless CMS for the new Jamstack website.
On top of that, saying with WordPress was also a good idea, as we didn’t have to worry about any content migration.
- Admin Panel & ACF Pro Plugin
Almost all marketers and content editors know WordPress admin panel. This is because it’s popular and super easy to use.
ACF Pro plugin allows to quickly enhance the admin panel by adding new editable features in a flexible way. It also provides API endpoints that can be easily integrated with Jamstack websites.
- Job Listings Plugin
Thanks to Job Listings plugin, Flatworld can manage his Job board very easily.
We had to enhance the plugin a little bit to add some new fie wlds and also make them accessible in the API.
- YOAST SEO Plugin
The most popular SEO optimisation plugin allows to adjust title, meta tags and open graph tags very easily.
Flatworld wanted to keep this flexibility in a new Jamstack website.
We had to include Yoast SEO data in GraphQL responses.
Why WordPress?
- User-friendly
- Huge open-source community
- Used by over 30% of Web
- Easy to operate
Why Gatsby?
- Great User Experience
- Easy to scale up down
- Great Performance
- Huge open-source community
Should we get it done?
Let's talk about you now!
Tell us about your challenge, and let's get the ball rolling.
Project Delivery
What’s important is the fact that Flat World needed all this to be done in a timely manner.
We quickly assembled tema needed, sit down on the internal meeting and made a step by step scope and execution plan, made out the following steps:
Step 1 Kick Off
First step was to prepare a project backlog and set up the infrastructure.
We’ve listed all data sources (editable contents) and made sure we can develop a solid API to feed the Gatsby Website.
Together with the client we decided to use Netlify for hosting of the Jamstack website and select Kinsta as a managed WordPress solution.
Step 2 Cutting Off the Wordpress Head
We’ve updated the WordPress to the latest version and cleaned it up by removing old custom code and non mandatory plugins.
At this stage we also enabled GraphQL API for core WordPress features and also for our bespoke enhancements.
The deliverable of this stage was a modern WordPress headless CMS ready for feeding a brand new Jamstack website.
Step 3 Design Handoff
We were included in the UX & UI design phase and we submitted some feedback to make sure that the final effect will be aligned with our demands.
After design delivery, Michal - our UI developer double checked all the files to be sure that based on that we can produce a library of design consistent, performant and reusable React components.
Step 4 Developing Jamstack Gatsby Static Website
Usually we start developing a Jamstack website by creating a boilerplate containing TypeScript, styled-components and Preact. This magic mix allows us to produce a lightweight and performant Gatsby Website.
After the boiler plate we started to produce React (Preact) components, following atomic design principles.
When the user interface was ready we could start preparing custom data sources to get contents from headless WordPress and build whole Gatsby pages and routes.
Step 5 Optimization
On this stage we did on-site technical SEO including supporting headless Yoast SEO plugin, Rich Snippets implementation and resolving all issues displayed in SEO & Accessibility tabs in Lighthouse Audit tool.
While working with a headless WordPress you need to remember about setting right redirects from old to new URLs on Jamstack website and also disallowing robots to index a headless WordPress API.
Step 6 Safe Release
FlatWorld is an active business with a strong network of customers and freelance developers willing to work with. That’s why the release had to be well planned and super safe.
After the launch, we ran a bunch of audits (Ahrefs, Seo Frog), monitored communications in Google Search Console and metrics in Google Analytics.
All warnings and issues were resolved in urgency, making sure the user experience of visitors is high and currently running paid ad campaigns are trackable and profitable.
Technologies used
- Gatsby JS
- Headless WordPress
- Netlify
- Preact
- GraphQL
- Styled Components
Speed and Performance Gains
- Unique Pageviews
1.01%
- Avg. Time on Page
12.77%
- % Exit
14.81%
- Avg. Server Connection Time (sec)
-17.67%
- Avg. Server Response Time (sec)
-25.77%
Great Performance
Quote from a client:
“Working with Pagepro appeared to be highly effective. From the beginning I felt I was in good hands and well taken care of. The crucial part was their understanding of what we want to achieve. I never had to micro-manage, nor monitor the progress, as deliverables were always spot-on and high quality.
P.S. Last month we got a big client that, I’m sure, wouldn’t contact us through the old website.”
Have a similar case? Use our experience!
Talk to our expert and see what we can to do push your project further.
