A case study on Frontity Framework: Our new WordPress website scored a perfect 100 in speed tests out-of-the-box!

Vinuraj Varma

Sat Jul 04 2020

The Beginning

The other day, in one of our usual coffee sessions with the whole Awsm team (yes we had those in the pre-COVID era), the topic of revamping our company website – awsm.in came up.

The idea took root and to beat the COVID blues we decided to try out something new and experimental without compromising the speed and reliability of the website.

We strive to simplify all technicalities to minimize the dependency on documentations and all our designs reflect the same thought. It ensured the success of our plugins too. So it was guaranteed that our website would have a design that is sleek, clean, neat and elegant. Our design team led by Aravind Ajith has a fair amount of experience handling seemingly simple and unassuming but really powerful designs.

The objective was very clear for me – a website that would literally reflect the name of our company in all aspects – speed, design and content.

The Requirement

  • A modern stack for WordPress website
  • Use the full power of WordPress REST API and create a headless WordPress.
  • Keep the familiar WordPress backend with Gutenberg, ACF, Yoast and more for content addition.
  • Experiment with frontend framework or Jamstack, that offers a fast, reliable, scalable and secure website.
  • Beat the Google Page speed score and provide users with a fluid and fast experience.

The search in the wilderness for a suitable solution ended with Frontity – a react based framework specially built for WordPress. It offered all the new tech possibilities including server-side rendering, or better Serverless Pre-rendering (SPR) with dynamic content, easily extendable with extensions and packages and uses WordPress built-in REST API.

The Solution: Frontity

  • Frontity – the React framework made for WordPress.
  • It uses WordPress as a headless CMS to create and manage content.
  • It embraces WordPress REST API to serve the content anywhere
  • It can build a blazing fast, highly optimised and SEO friendly website that runs on a Node.js server.

I’m a front-end & WordPress developer, who has worked with numerous big and small projects. Though I have experience in building WordPress headless websites with Vue.js/Nuxt.js, I have never tried exploring React (you know why :)). So, Frontity is my first real-life React project too.

Well, to be frank, working on Frontity wasn’t as hard as I expected. Thanks to Frontity’s zero setup development, everything is already built-in or wired up. You get React, Webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing and anything you could think of for a WordPress headless development + Node.js website.

As mentioned earlier, setting up Frontity is easy. Just spin up one path for WordPress installation (which will be used as headless CMS) and another path for Frontity installation.

Frontity offers its own CLI to create projects. Once Frontity is up and running, you can connect your headless WordPress using the REST API. That’s it basically, you now have a fully working and extremely fast react based website. 

We had two requirements

  • Custom design/layout home page and other pages, to truly reflect our company including our services, portfolio, projects and products.
  • Integration with our most simple but powerful Job listing WordPress plugin – WP Job Openings.

We used the powerful Advanced Custom Fields (ACF) for building the backend structure for the layout in our headless WordPress CMS. Then used the ACF to REST API plugin to expose the ACF fields in the WordPress REST API. Once we had the data in REST API, we could use that in Frontity frontend, where we used truncated Bootstrap and custom CSS framework.

Early Challenges

Frontity is an “opinionated framework” because it comes with its State Manager and CSS solution. It adopts CSS in JS to reduce the overall bundle size and fully optimize the output code. That’s where I got a hiccup – as a frontend developer I love to write free flow in SASS/SCSS. But in Frontity you need to write CSS in JS.

At first, it was somewhat hard to get used to, but as time passed and when you get the rhythm correct, it gets easy. Do read the Emotion documents as Frontity has fully integrated and configured Emotion in their backend. You could still import CSS files directly, as underlaying the Frontity code is React (that we had done for the Bootstrap CSS file).

Frontity & SEO

For SEO, Frontity has been build to offer better SEO performance. It uses a fully populated and well-formed HTML file generated from the React code to serve the search engine crawlers. By combining the REST API – Head Tags WordPress plugin and Frontity head-tags package you get all the SEO basics covered.

The REST API – Head Tags WordPress plugin from Frontity adds meta tags generated by a WordPress SEO plugin (Yoast SEO, All in One SEO Pack and WP SEO plugins supported) to the REST API. While the Frontity head-tags package takes this meta tags from REST API and adds them to the head section of appropriate pages of the site. Everything is handled automatically by the Frontity package with zero effort on our side.

WP Job Openings the Frontity Package

During the website development, we wanted to integrate our own WP Job Openings plugin. It is a super-simple job listing plugin that can help you to concentrate on the hiring process by reducing the time spent on administrative tasks and keep track of all applicants.

By default, there is no support for most of the WordPress plugins on Frontity. As Frontity relies on WordPress REST API, only those plugins which add/rewrite content to the REST API can be used in Frontity.

Since WP Job Openings is a custom WordPress plugin and there is no plug-n-play option available in Frontity, we had to step in and build a Frontity Package. One of our Awsm developers, Anantajit JG built the WP Job Openings Frontity Package. Yes, it’s also our first package for Frontity!

WP Job Openings Frontity package enables the support for application form provided by the WP Job Openings plugin. All the default fields, including the CV/Resume upload field and the fields supported by WP Job Openings Pro, are also supported. It also offers a simple way to define the custom route (or page) where the Job listing needs to be shown.

Contact form 7

Every website needs a contact form and naturally, for any WordPress dev it’s Contact Form 7. One of the community members of Frontity, Imran Sayed has released a Contact Form 7 Frontity package for easy plug-in and play. You just need to create a form in the Contact Form 7 backend and add the shortcode to a page or post to display it in Frontity.

It was too easy, but we then we found a conflict with the Contact Form 7 Frontity package and our WP Job Openings plugin/frontity package. The issue was that when we create any page in WordPress with forms generated by other plugins (like WP Job Openings or Everest Forms) and access that page in Frontity it would break or return a blank. It was due to a conflict with the ‘frontity-contact-form-7’ package.

Our developer Anantajit JG was quick to offer a patch for the same and he virtually resolved this issue within hours. The original patch has also been shared with the Contact Form 7 Frontity package team. (https://github.com/imranhsayed/frontity-contact-form-7/issues/29).

The D-Day

Once everything was in place – the custom designs, ACF integration and WP Job Openings Frontity Package, we were finally ready to launch our website. We achieved this milestone on July 01, 2020. Incidentally, this day is very special to us. It was on the 4th anniversary of Awsm Innovations that we made this contribution to Frontity and WordPress. 

Deploying a Frontity website is easy. For the headless WordPress, you still need the usual database/PHP hosting, but for the frontend Frontity site, you can have a serverless hosting. Frontity out of the box supports deployment to Vercel, that’s instant, scalable, CDN powered and cheap. Vercel also supports Serverless Pre-Rendering that allows both speed and reliability of static hosting, and the versatility of dynamic data rendering.

The Unbelievable Page Speed

You need to experience it to believe, we hit a perfect 100 score in Google PageSpeed (Desktop) without putting any extra effort in optimisations.

We scored A(100%) in PageSpeed and A(98%) in YSlow during our website test on GTmetrix. To fully load our website it took only 2.5-3.7 seconds with a total page size of just 440KB and 24 requests. 

Please note that we actually skipped the Google Analytics code while testing the website. As you may have guessed, Google Analytics will pull one rank down. Generally, Google Analytics js is cached in almost every user’s browser, so there won’t be any actual downloading when you visit a new website (with GA in it). So, while testing the page speed of a website it would be appropriate to skip GA from loading.

The Frontity Experience

From a WordPress developer’s standpoint, Frontity offers a quick and easy framework to push any WordPress website to Jamstack. 

Out of the box, it comes with a zero-config setup, blazing-fast rendering, optimized for SEO and fast serverless deployment.

That said, if you want to go deep into the Frontity, you need to have some React knowledge and adapt to the CSS-in-JS concept. As Frontity is relatively new, there are few developers who are acutely aware of it. Due to this their developer community is not vibrant enough and documentation or tutorials are scarce. Yet, Frontity’s developers are always active to answer your questions in their community and also in Github.

For simple blogs and websites, the default Frontity build would be more than enough, but for a full-fledged WordPress port of headless CMS and Frontend like ours,  a considerable amount of development time and research is required. As there are only a few WordPress plugins supported with Frontity packages we may need to build out custom solutions to tackle it.

As Frontity is built over React, you could get the clues from the React community to tackle most of the issues. Actually you can use most of the react packages to enhance the website.

One last thing, at the time of writing this article, there is no option for post/page preview. You need to publish the article to view it on your website. This could be a deal-breaker for someone who is building a Frontity-based WordPress website for clients. The Frontity team is currently working on a solution for that.

In the end, the experience a frontity site gives to the end-user is priceless and that’s what makes it all worth it. The awsm.in frontity experience was simply incredible!

Links

(Vinuraj Varma is a Super Developer at Awsm Digital Innovations. He has over 11 years of experience in Web Development and Digital Marketing. He is the founder of  datareign.com, tutorialforest.com, rupyainr.com and indianbookworms.com. His hobbies are blogging and gaming. A softspoken technical expert with an unassuming attitude, he lets his works speak for him.)